Developer Plus

1
 Developer Plus

Índice
Sumário

Índice............................................................................................................2
Introdução....................................................................................................3
O Guia Definitivo..........................................................................................5
1. HTML/CSS.................................................................................................6
2. JavaScript................................................................................................. 8
3. Linguagem de Back-end.........................................................................11
4. Banco de Dados e Web Storage............................................................ 13
5. HTTP & REST...........................................................................................14
6. Arquitetura de Aplicativos Web............................................................ 15
7. Java Web Full-Stack............................................................................... 17
8. Apêndice................................................................................................ 19

2
 Developer Plus

Introdução
Este é um guia definitivo para as habilidades mais importantes
necessárias para se tornar um desenvolvedor Web Full-Stack hoje.

Desenvolvimento Web Full-Stack, de acordo com a Pesquisa de

Desenvolvedores do Stack Overflow, é a ocupação de desenvolvedor
mais popular atualmente.

Desenvolvedores de back-end estão em segundo lugar por uma grande

margem. Graças a esta pesquisa, sabemos que os desenvolvedores
full-stack podem trabalhar com 5-6 linguagens e frameworks, enquanto
outros especialistas escolhem 4 deles.

3
 Developer Plus

Este tipo de desenvolvedor tem se tornado cada vez mais requisitado.

Mas por que isso acontece?

Em suma, quanto mais habilidades você tem em sua profissão hoje em

dia, mais valioso você se torna.

Que benefício é ter alguém que saiba tudo sobre desenvolvimento de

aplicativos!

Mas quem são essas pessoas na realidade?

4
 Developer Plus

O Guia Definitivo

Um Desenvolvedor Web Full-Stack é alguém que é capaz de trabalhar em

partes de front-end e back-end de um aplicativo.

O front-end geralmente se refere à parte de um aplicativo que o usuário

verá ou interagirá, e o back-end é a parte do aplicativo que lida com a
lógica, as interações do banco de dados, a autenticação do usuário, a
configuração do servidor, etc.

Ser um Desenvolvedor Full-Stack não significa necessariamente que você

tenha que dominar tudo o que é necessário para trabalhar com o front-end
ou back-end, mas significa que você é capaz de trabalhar em ambos os
lados e entender o que está acontecendo ao construir uma aplicação.

O que realmente importa é sua habilidade e paixão em entender tudo o

que está acontecendo e fazer com que funcione.

Se você quiser se tornar um Desenvolvedor Web Full-Stack, abaixo está

um guia de referência com uma lista de coisas que você deve aprender.

5
 Developer Plus

1. HTML/CSS

Praticamente todos os cursos, sejam eles on-line ou presenciais, que

ensinam como ser um desenvolvedor web, começam com HTML e CSS,
pois são os blocos de construção da web.

Simplificando, HTML permite que você adicione conteúdo a um site e

CSS é o que permite que você estilize seu conteúdo.

Os seguintes tópicos relacionados a HTML/CSS aparecem com

frequência em entrevistas e no atual emprego quando você está
trabalhando:

 HTML_semântico

 Ser capaz de explicar o modelo de caixa de CSS (CSS_Box_Model)

 Benefícios dos pré_processadores_CSS (você não precisa

necessariamente entender como usar um deles em um nível profundo,
mas deve entender para que serve e como eles ajudam no
desenvolvimento).

 CSS_Media_Queries para segmentar diferentes dispositivos e

escrever CSS responsivo.

 Bootstrap (um framework para ajudar a projetar e distribuir conteúdo

em uma página e enquanto muitos cursos on-line ou escolas se
concentram fortemente no ensino de Bootstrap, na realidade é mais

6
 Developer Plus

importante ter um conhecimento profundo dos fundamentos do CSS

do que os recursos e métodos específicos do Bootstrap).

7
 Developer Plus

2. JavaScript

A linguagem JavaScript está se tornando mais popular a cada ano e novas

bibliotecas, frameworks e ferramentas são constantemente lançadas.

Com base na Pesquisa de desenvolvedores do Stack Overflow, o

JavaScript é a linguagem mais popular em desenvolvimento Full-Stack,
Front-end e Back-end.

8
 Developer Plus

É a única linguagem que é executada de forma nativa no navegador e

também pode ser usada como uma linguagem do lado do servidor (como
você verá abaixo com o Node.js).

Abaixo estão alguns tópicos que você precisa entender como um

Desenvolvedor Full-Stack:

 Entender como trabalhar com o DOM. Também saber o que é o JSON

e como manipulá-lo.

 Recursos importantes da linguagem, como composição_funcional,

herança prototipal, closures, delegação de eventos, escopo, funções de
ordem superior.

 Fluxo_de_controle_assíncrono, promises, and callbacks.

 Aprender a estruturar corretamente seu código e modularizar partes

dele, coisas como webpack, browserify ou ferramentas de build como
gulp definitivamente serão úteis.

9
 Developer Plus

 Saber como usar pelo menos um framework popular (muitos cursos se

concentrarão em ensinar uma biblioteca ou framework como React ou
Angular, mas na realidade é muito mais importante ter uma
compreensão profunda da linguagem JavaScript e não se concentrar
tanto nas características específicas do framework. Uma vez que você
tenha uma boa compreensão do JavaScript, escolher um framework
que fique no topo não será muito difícil de qualquer maneira).

 Embora alguns possam argumentar que você deve usar menos ou que
está morrendo lentamente, o código jQuery ainda existe na maioria
dos aplicativos e uma compreensão sólida dele será útil.

 Alguns conhecimentos em teste de frameworks e por que eles são

importantes (alguns podem até afirmar que esse tópico deve ser
opcional).

 Aprender sobre alguns novos recursos importantes do ES6 (opcional).

10
 Developer Plus

3. Linguagem de Back-end

Depois que você perceber que tem uma boa compreensão sobre HTML /
CSS e JavaScript, convém seguir para uma linguagem de back-end que
lida com coisas como operações de bancos de dados, autenticação de
usuários e lógica de aplicativos.

Todos os cursos geralmente se concentram em uma linguagem de

back-end específica e, na realidade, não importa o quanto você aprende
de determinada linguagem, desde que você entenda o que está
acontecendo e aprenda as nuances da linguagem escolhida.

Você receberá várias respostas diferentes se perguntar a alguém qual

linguagem de back-end é a melhor para aprender. Por isso, abaixo, segue
uma lista com algumas combinações populares.

Uma nota importante: o que você decidir aprender, basta seguir e

aprender o máximo que puder sobre ela - há vagas disponíveis para todas
as linguagens listadas abaixo.

 Node.js: Essa é uma ótima opção, pois o próprio Node.js é um

ambiente JavaScript, o que significa que você não precisa aprender
uma nova linguagem. Esta é uma grande razão pela qual muitos
cursos escolhem ensinar Node.js. O framework mais popular que
você provavelmente poderia aprender para ajudá-lo no
desenvolvimento de aplicativos Web é o Express.

 Ruby: Alguns frameworks populares para desenvolvimento em Ruby

são Rails e Sinatra. Muitos cursos ensinam Ruby como uma primeira
linguagem de back-end.

11
 Developer Plus

 Python: Alguns frameworks populares para desenvolvimento em

Python são Django e Flask.

 Java: Muitas empresas usam o Java como back-end e é uma

linguagem muito requisitada.

 PHP: PHP já não é muito ensinado em cursos nos dias de hoje, mas
assim como com Java, ainda é muito requisitado e é uma pedra
angular da web hoje.

12
 Developer Plus

4. Banco de Dados e Web Storage

Ao aprender a criar aplicativos Web, em algum momento você

provavelmente desejará armazenar dados em algum lugar e acessá-los
posteriormente.

Você deve ter um bom conhecimento sobre os seguintes tópicos

relacionados a bancos de dados e armazenamento.

 Compreender os benefícios dos dados_relacionais, por ex. SQL

 Aprender sobre bancos de dados NoSQL, por exemplo MongoDB.

 Entender qual seria melhor em certas situações.

 Saber como conectar a um banco de dados com a linguagem de

back-end escolhida (por exemplo, Java + MySQL).

 Entender os benefícios dos armazenamentos_de_dados_na_memória,

como Redis ou memcached.

 Web_Storage para armazenar sessões, cookies e dados em cache no

navegador.

 Escalar bancos de dados, ACID e ORM (todos opcionais).

13
 Developer Plus

5. HTTP & REST

O HTTP é um protocolo de aplicativo sem estado na Internet - é o que

permite aos clientes se comunicarem com servidores (por exemplo, seu
código JavaScript pode fazer uma solicitação AJAX para algum código
de backend executado em um servidor, o que acontecerá via HTTP).

Alguns tópicos importantes que você deve aprender estão listados abaixo:

 O que é REST e por que é importante em relação ao protocolo HTTP

e aos aplicativos da web.

 Práticas recomendadas para projetar uma API RESTful. Solicitações

de POST/GET.

 Aprender a usar o Chrome_DevTools pode ser extremamente útil.

 O que são certificados_SSL.

 HTTP2_e_SPDY (opcional).

 WebSockets, Web Workers, e Service_Workers (todos opcionais).

14
 Developer Plus

6. Arquitetura de Aplicativos Web

Uma vez que você acha que tem uma noção sobre HTML/CSS,
JavaScript, programação de back-end, bancos de dados e HTTP/REST,
então vem a parte complicada.

Neste ponto, se você quiser criar um aplicativo Web um tanto complexo,

precisará saber como estruturar seu código, como separar seus arquivos,
onde hospedar seus grandes arquivos de mídia, como estruturar os dados
em seu banco de dados, onde executar determinadas tarefas
computacionais (lado do cliente vs lado do servidor) e muito mais.

Há práticas recomendadas sobre as quais você pode ler on-line, mas a

melhor maneira de realmente aprender sobre a arquitetura de aplicativos é
trabalhando em um aplicativo grande que contém várias partes móveis -
ou melhor, trabalhando em equipe e, em conjunto, desenvolvendo uma
aplicação grande e complexa.

É por isso que, por exemplo, alguém com mais de 7 anos de experiência
pode não necessariamente conhecer CSS ou JavaScript melhor do que
alguém com 2 anos de experiência, mas durante todos esses anos eles
presumivelmente trabalharam com todos os tipos de aplicativos e sites e
aprenderam a arquitetar e projetar aplicações (entre outras coisas
importantes) para ser mais eficiente e poder ver o panorama geral quando
se trata de desenvolvimento.

15
 Developer Plus

Veja abaixo algumas coisas que podem ajudá-lo a aprender como

arquitetar seus aplicativos Web de maneira eficiente:

 Aprender sobre plataformas comuns que funcionam como serviço,

por exemplo Heroku e AWS. O Heroku permite que você carregue
facilmente seu código e tenha um aplicativo instalado e funcionando
com muito pouca configuração ou manutenção de servidor, e a AWS
oferece dezenas de produtos e serviços para ajudar com
armazenamento, processamento de vídeo, balanceamento de carga e
muito mais.

 Otimização de desempenho para aplicativos e navegadores modernos.

 Saber o que uma arquitetura de aplicativo Web deve incluir, que

envolve: Front-end, Back-end, frameworks, bancos de dados,
software e hardware do servidor.

 Projetar Aplicativos Web separando-os em camadas de apresentação,

negócios e dados.

 MVC - Model / View / Controller

 O mais importante é que você deve tentar trabalhar em projetos com

pessoas, consultar bases de código de projetos populares no GitHub e
aprender o máximo que puder com desenvolvedores seniores.

16
 Developer Plus

7. Java Web Full-Stack

Por ser multiplataforma e bastante completa, a plataforma Java ganhou

muitos mercados diferentes - da Web ao Desktop, passando por mobile e
IoT. Mas o grande mercado Java hoje ainda é o back-end em sistemas
Web.

Veja abaixo mais algumas razões para se aprofundar nessa área:

 Uma base sólida graças a mais de 20 anos de engenharia;

 Um vasto ecossistema de bibliotecas que os desenvolvedores podem

usar para aumentar a velocidade do desenvolvimento;

 Java Virtual Machine, que oferece excelente estabilidade graças ao

grande número de testes unitários;

 IDEs de qualidade (Integrated Development Environments) e uma

coleção de ferramentas de monitoramento e depuração que estão
maduras e prontas para implantação, facilitando a vida dos
desenvolvedores e deixando seus aplicativos livres de bugs;

 Ferramentas comprovadas, como Eclipse, NetBeans ou IntelliJ, que

são integradas com servidores, depuradores e decompiladores (além

17
 Developer Plus

de um sólido ecossistema de plug-ins), que tornam o processo de

desenvolvimento mais rápido;

 Com o framework correto ou modelos de threads que fazem parte dos

mais recentes frameworks Java, é possível aumentar a velocidade de
desenvolvimento;

 Eficiência de computação incrível;

 Grande manutenibilidade de código.

Se você estiver interessado em se tornar um profissional altamente

qualificado, se aprofundar cada vez mais e aumentar o seu conhecimento
nessa área, não deixe de conferir o curso Java Web Full-Stack.

Além das aulas teóricas e práticas, o curso conta com 4 projetos

completos, que são desenvolvidos do zero, mostrando passo a passo e
com detalhes para aprender na prática.

Para conhecer é só CLICAR AQUI.

18
 Developer Plus

8. Apêndice
HTML semântico

HTML semântico é o uso de marcação HTML para reforçar a semântica,

ou o significado, das informações em páginas da Web e aplicativos da
Web, em vez de simplesmente definir sua apresentação ou aparência.

O HTML semântico é processado por navegadores da Web tradicionais e

por muitos outros agentes do usuário. CSS é usado para sugerir sua
apresentação para usuários.

CSS Box Model

Ao dispor um documento, o mecanismo de renderização do navegador

representa cada elemento como uma caixa retangular de acordo com o
padrão CSS basic box model.
O CSS determina o tamanho, a posição e as propriedades (cor, plano de
fundo, tamanho da borda etc.) dessas caixas.

Cada caixa é composta de quatro partes (ou áreas), definidas por suas
respectivas arestas: content edge, padding edge, border edge, e margin
edge.

Pré-processadores CSS

Eles são os principais ingredientes para o desenvolvimento de CSS.

Pré-processadores estendem CSS com variáveis, operadores,
interpolações, funções, mixins e muitos outros ativos utilizáveis.

SASS, LESS e Stylus são os mais conhecidos.

CSS Media Queries

Media Queries no CSS3 observam a capacidade do dispositivo. Podem

ser usadas para verificar muitas coisas, como:

 largura e altura do viewport

 largura e altura do dispositivo
 orientação (o tablet /celular está no modo paisagem ou retrato?)
 resolução

19
 Developer Plus

Usar Media Queries é uma técnica popular para obter uma folha de estilo
personalizada para desktops, laptops, tablets e telefones celulares (como o
iPhone e celulares com Android).

DOM

O Document Object Model (DOM) é uma interface de programação para

documentos HTML e XML. Ele representa a página para que os
programas possam alterar a estrutura, o estilo e o conteúdo do documento.
O DOM representa o documento como nós e objetos. Dessa forma, as
linguagens de programação podem se conectar à página.

JSON

JavaScript Object Notation (JSON) é um formato baseado em texto

padrão para representar dados estruturados com base na sintaxe do objeto
JavaScript. É comumente usado para transmitir dados em aplicativos da
Web (por exemplo, enviar alguns dados do servidor para o cliente, para
que possam ser exibidos em uma página da Web ou vice-versa).

Composição funcional

Composição funcional é o processo de combinar duas ou mais funções

para produzir uma nova função. Compor funções juntas é como encaixar
uma série de tubos para nossos dados fluirem.

Fluxo de controle assíncrono

Fluxo de controle refere-se à especificação da ordem na qual as

instruções individuais, instruções ou chamadas de função de um
programa imperativo são executadas ou avaliadas.

Promises

Promises (especificação ES6) nos dão uma maneira de lidar com o

processamento assíncrono de maneira mais síncrona. Eles representam
um valor que podemos manipular em algum momento no futuro. E,
melhor do que callbacks aqui, Promises nos dão garantias sobre esse
valor futuro.

20
 Developer Plus

Callbacks

Como as funções são objetos de primeira classe, podemos passar uma

função como um argumento em outra função e, posteriormente, executar
essa função passada ou mesmo retorná-la para ser executada
posteriormente.

Essa é a essência do uso de funções de callback no JavaScript.

Modularizar

Bons autores dividem seus livros em capítulos e seções; bons

programadores dividem seus programas em módulos.

Bons módulos, no entanto, são altamente auto-contidos com

funcionalidades distintas, permitindo que sejam embaralhados, removidos
ou adicionados conforme necessário, sem interromper o sistema como um
todo.

Webpack

O Webpack é um bundler de módulo JavaScript de código aberto. Seu

principal objetivo é agregar arquivos JavaScript para uso em um
navegador, mas também é capaz de transformar, agrupar ou empacotar
qualquer recurso ou ativo.

Browserify

O Browserify é uma ferramenta JavaScript de código aberto que permite

aos desenvolvedores escrever módulos no estilo Node.js que são
compilados para uso no navegador. O Browserify permite que você use
require no navegador, da mesma maneira que você usaria no Node.

Gulp

O gulp é um kit de ferramentas JavaScript de código aberto da Fractal

Innovations e da comunidade de código aberto do GitHub, usado como
um sistema de build de streaming no desenvolvimento web de front-end,
útil para automação de tarefas demoradas e repetitivas.

React

Uma biblioteca JavaScript para construir interfaces com o usuário.

21
 Developer Plus

Angular

Angular é um framework JavaScript código aberto mantido pelo Google,

que auxilia na execução de single-page applications.

jQuery

jQuery é uma biblioteca de funções JavaScript que interage com o HTML,

desenvolvida para simplificar os scripts interpretados no navegador do
cliente.

Express

Express é um framework para Node.js inspirado no Sinatra. Ele é

minimalista, flexível e contém um robusto conjunto de recursos para
desenvolver aplicações web, como um sistema de Views intuitivo (MVC),
um robusto sistema de roteamento, um executável para geração de
aplicações e muito mais.

Dados relacionais

Bancos de dados relacionais como MySQL, PostgreSQL e SQLite3

representam e armazenam dados em tabelas e linhas. Eles são baseados
em um ramo da teoria dos conjuntos algébricos conhecido como álgebra
relacional.

SQL

SQL (Structured Query Language) é uma linguagem específica de

domínio usada na programação e projetada para gerenciar dados mantidos
em um sistema de gerenciamento de banco de dados relacional (RDBMS)
ou para processamento de fluxo em um sistema de gerenciamento de
fluxo de dados relacional (RDSMS).

NoSQL

NoSQL é um termo genérico que representa os bancos de dados não

relacionais. Uma classe definida de banco de dados que fornecem um
mecanismo para armazenamento e recuperação de dados que são
modelados de formas diferentes das relações tabulares usadas nos bancos
de dados relacionais.

22
 Developer Plus

MongoDB

O MongoDB é um programa de banco de dados multiplataforma

orientado a documentos. Classificado como um programa de banco de
dados NoSQL, o MongoDB usa documentos semelhantes a JSON com
esquemas. O MongoDB é desenvolvido pela MongoDB Inc. e licenciado
sob a Licença Pública do Lado do Servidor (SSPL).

Armazenamento de dados na memória

Os bancos de dados na memória colocam o conjunto de dados de trabalho

na memória do sistema, seja completamente ou parcialmente, com base
na identificação de tabelas que se beneficiarão mais da velocidade da
DRAM.

Redis

Redis é um open source (licenciado pelo BSD), armazenamento de

estrutura de dados na memória, usado como banco de dados, cache e
message broker.

Memcached

O Memcached é um armazenamento de chave-valor na memória (open

source) para pequenos trechos de dados arbitrários (strings, objetos) de
resultados de chamadas de banco de dados, chamadas de API ou
renderização de página.

Web Storage

A API de Web Storage fornece mecanismos pelos quais os navegadores

podem armazenar pares de chave-valor, de uma maneira muito mais
intuitiva do que usando cookies.

ACID

Em ciência da computação, ACID Atomicity, Consistency, Isolation,

Durability) é um conjunto de propriedades de transações de banco de
dados destinadas a garantir a validade mesmo em caso de erros, falhas de
energia, etc.

23
 Developer Plus

No contexto de bancos de dados, uma seqüência de operações de banco

de dados que satisfaz as propriedades do ACID é chamada de transação.
Por exemplo, uma transferência de fundos é considerada uma transação
(que envolve operações de débito em uma conta e crédito em outra).

ORM

ORM (Object-Relational Mapping) é uma técnica que permite consultar e

manipular dados de um banco de dados usando um paradigma orientado a
objeto. Então você não usa mais o SQL; você interage diretamente com
um objeto na mesma linguagem que está usando no seu aplicativo.

REST

REST (REpresentational State Transfer) é um estilo de arquitetura que

usa chamadas HTTP simples para comunicação entre máquinas, em vez
de opções mais complexas, como CORBA, COM +, RPC ou até mesmo
SOAP.

Usar REST significa que suas chamadas serão baseadas em mensagens e

dependem do padrão HTTP para descrever essas mensagens.

Chrome DevTools

O Chrome DevTools é um conjunto de ferramentas de autoria e

depuração de Web incorporado ao Google Chrome. O DevTools é usado
para iterar, depurar e criar o perfil de um site.

Certificados SSL

Certificados SSL criam uma conexão criptografada e estabelecem

confiança na comunicação.

HTTP/2 e SPDY

O HTTP/2 tornará os aplicativos mais rápidos, mais simples e mais

robustos - uma combinação rara - ao permitir desfocar de muitas das
soluções HTTP/1.1 feitas anteriormente nos aplicativos e abordem essas
preocupações dentro da própria camada de transporte.

O SPDY era um protocolo experimental, desenvolvido no Google e

anunciado em meados de 2009, cujo objetivo principal era tentar reduzir a

24
 Developer Plus

latência de carga de páginas da Web, abordando algumas das limitações

de desempenho conhecidas do HTTP/1.1.

WebSockets

A API WebSocket é uma tecnologia avançada que possibilita a abertura

de uma sessão de comunicação interativa bidirecional entre o navegador
do usuário e um servidor.

Service Workers

Serviço em segundo plano que manipula solicitações de rede. Ideal para

lidar com situações off-line e sincronizações em segundo plano ou
notificações push.

25