Developer Plus

1

Developer Plus

2

Índice

Sumário

Índice............................................................................................................2Introdução....................................................................................................3O Guia Definitivo..........................................................................................51. HTML/CSS.................................................................................................62. JavaScript................................................................................................. 83. Linguagem de Back-end.........................................................................114. Banco de Dados e Web Storage............................................................ 135. HTTP & REST...........................................................................................146. Arquitetura de Aplicativos Web............................................................157. Java Web Full-Stack............................................................................... 178. Apêndice................................................................................................ 19

Developer Plus

3

IntroduçãoEste é um guia definitivo para as habilidades mais importantesnecessárias para se tornar um desenvolvedor Web Full-Stack hoje.

Desenvolvimento Web Full-Stack, de acordo com a Pesquisa deDesenvolvedores do Stack Overflow, é a ocupação de desenvolvedormais popular atualmente.

Desenvolvedores de back-end estão em segundo lugar por uma grandemargem. Graças a esta pesquisa, sabemos que os desenvolvedoresfull-stack podem trabalhar com 5-6 linguagens e frameworks, enquantooutros especialistas escolhem 4 deles.

Developer Plus

4

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 emdia, mais valioso você se torna.

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

Mas quem são essas pessoas na realidade?

Developer Plus

5

O Guia Definitivo

Um Desenvolvedor Web Full-Stack é alguém que é capaz de trabalhar empartes de front-end e back-end de um aplicativo.

O front-end geralmente se refere à parte de um aplicativo que o usuárioverá ou interagirá, e o back-end é a parte do aplicativo que lida com alógica, as interações do banco de dados, a autenticação do usuário, aconfiguraçã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-endou back-end, mas significa que você é capaz de trabalhar em ambos oslados e entender o que está acontecendo ao construir uma aplicação.

O que realmente importa é sua habilidade e paixão em entender tudo oque 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.

Developer Plus

6

1. HTML/CSS

Praticamente todos os cursos, sejam eles on-line ou presenciais, queensinam 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 eCSS é o que permite que você estilize seu conteúdo.

Os seguintes tópicos relacionados a HTML/CSS aparecem comfrequê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 precisanecessariamente entender como usar um deles em um nível profundo,mas deve entender para que serve e como eles ajudam nodesenvolvimento).

CSS_Media_Queries para segmentar diferentes dispositivos eescrever CSS responsivo.

Bootstrap (um framework para ajudar a projetar e distribuir conteúdoem uma página e enquanto muitos cursos on-line ou escolas seconcentram fortemente no ensino de Bootstrap, na realidade é mais

Developer Plus

7

importante ter um conhecimento profundo dos fundamentos do CSSdo que os recursos e métodos específicos do Bootstrap).

Developer Plus

8

2. JavaScript

A linguagem JavaScript está se tornando mais popular a cada ano e novasbibliotecas, frameworks e ferramentas são constantemente lançadas.

Com base na Pesquisa de desenvolvedores do Stack Overflow, oJavaScript é a linguagem mais popular em desenvolvimento Full-Stack,Front-end e Back-end.

Developer Plus

9

É a única linguagem que é executada de forma nativa no navegador etambém pode ser usada como uma linguagem do lado do servidor (comovocê verá abaixo com o Node.js).

Abaixo estão alguns tópicos que você precisa entender como umDesenvolvedor Full-Stack:

Entender como trabalhar com o DOM. Também saber o que é o JSONe como manipulá-lo.

Recursos importantes da linguagem, como composição_funcional,herança prototipal, closures, delegação de eventos, escopo, funções deordem superior.

Fluxo_de_controle_assíncrono, promises, and callbacks.

Aprender a estruturar corretamente seu código e modularizar partesdele, coisas como webpack, browserify ou ferramentas de build comogulp definitivamente serão úteis.

Developer Plus

10

Saber como usar pelo menos um framework popular (muitos cursos seconcentrarão em ensinar uma biblioteca ou framework como React ouAngular, mas na realidade é muito mais importante ter umacompreensão profunda da linguagem JavaScript e não se concentrartanto nas características específicas do framework. Uma vez que vocêtenha uma boa compreensão do JavaScript, escolher um frameworkque fique no topo não será muito difícil de qualquer maneira).

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

Alguns conhecimentos em teste de frameworks e por que eles sãoimportantes (alguns podem até afirmar que esse tópico deve seropcional).

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

Developer Plus

11

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 quelida com coisas como operações de bancos de dados, autenticação deusuários e lógica de aplicativos.

Todos os cursos geralmente se concentram em uma linguagem deback-end específica e, na realidade, não importa o quanto você aprendede 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 quallinguagem de back-end é a melhor para aprender. Por isso, abaixo, segueuma lista com algumas combinações populares.

Uma nota importante: o que você decidir aprender, basta seguir eaprender o máximo que puder sobre ela - há vagas disponíveis para todasas linguagens listadas abaixo.

Node.js: Essa é uma ótima opção, pois o próprio Node.js é umambiente JavaScript, o que significa que você não precisa aprenderuma nova linguagem. Esta é uma grande razão pela qual muitoscursos escolhem ensinar Node.js. O framework mais popular quevocê provavelmente poderia aprender para ajudá-lo nodesenvolvimento de aplicativos Web é o Express.

Ruby: Alguns frameworks populares para desenvolvimento em Rubysão Rails e Sinatra. Muitos cursos ensinam Ruby como uma primeiralinguagem de back-end.

Developer Plus

12

Python: Alguns frameworks populares para desenvolvimento emPython são Django e Flask.

Java: Muitas empresas usam o Java como back-end e é umalinguagem muito requisitada.

PHP: PHP já não é muito ensinado em cursos nos dias de hoje, masassim como com Java, ainda é muito requisitado e é uma pedraangular da web hoje.

Developer Plus

13

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á-losposteriormente.

Você deve ter um bom conhecimento sobre os seguintes tópicosrelacionados 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 deback-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 nonavegador.

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

Developer Plus

14

5. HTTP & REST

O HTTP é um protocolo de aplicativo sem estado na Internet - é o quepermite aos clientes se comunicarem com servidores (por exemplo, seucódigo JavaScript pode fazer uma solicitação AJAX para algum códigode 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 HTTPe aos aplicativos da web.

Práticas recomendadas para projetar uma API RESTful. Solicitaçõesde 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).

Developer Plus

15

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 dadosem seu banco de dados, onde executar determinadas tarefascomputacionais (lado do cliente vs lado do servidor) e muito mais.

Há práticas recomendadas sobre as quais você pode ler on-line, mas amelhor 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 umaaplicação grande e complexa.

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

Developer Plus

16

Veja abaixo algumas coisas que podem ajudá-lo a aprender comoarquitetar 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ê carreguefacilmente seu código e tenha um aplicativo instalado e funcionandocom muito pouca configuração ou manutenção de servidor, e a AWSoferece dezenas de produtos e serviços para ajudar comarmazenamento, processamento de vídeo, balanceamento de carga emuito mais.

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

Saber o que uma arquitetura de aplicativo Web deve incluir, queenvolve: 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 compessoas, consultar bases de código de projetos populares no GitHub eaprender o máximo que puder com desenvolvedores seniores.

Developer Plus

17

7. Java Web Full-Stack

Por ser multiplataforma e bastante completa, a plataforma Java ganhoumuitos mercados diferentes - da Web ao Desktop, passando por mobile eIoT. Mas o grande mercado Java hoje ainda é o back-end em sistemasWeb.

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 podemusar para aumentar a velocidade do desenvolvimento;

Java Virtual Machine, que oferece excelente estabilidade graças aogrande número de testes unitários;

IDEs de qualidade (Integrated Development Environments) e umacoleção de ferramentas de monitoramento e depuração que estãomaduras e prontas para implantação, facilitando a vida dosdesenvolvedores e deixando seus aplicativos livres de bugs;

Ferramentas comprovadas, como Eclipse, NetBeans ou IntelliJ, quesão integradas com servidores, depuradores e decompiladores (além

Developer Plus

18

de um sólido ecossistema de plug-ins), que tornam o processo dedesenvolvimento mais rápido;

Com o framework correto ou modelos de threads que fazem parte dosmais recentes frameworks Java, é possível aumentar a velocidade dedesenvolvimento;

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

Grande manutenibilidade de código.

Se você estiver interessado em se tornar um profissional altamentequalificado, se aprofundar cada vez mais e aumentar o seu conhecimentonessa á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 projetoscompletos, que são desenvolvidos do zero, mostrando passo a passo ecom detalhes para aprender na prática.

Para conhecer é só CLICAR AQUI.

Developer Plus

19

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 daWeb, em vez de simplesmente definir sua apresentação ou aparência.

O HTML semântico é processado por navegadores da Web tradicionais epor muitos outros agentes do usuário. CSS é usado para sugerir suaapresentação para usuários.

CSS Box Model

Ao dispor um documento, o mecanismo de renderização do navegadorrepresenta cada elemento como uma caixa retangular de acordo com opadrão CSS basic box model.O CSS determina o tamanho, a posição e as propriedades (cor, plano defundo, tamanho da borda etc.) dessas caixas.

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

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. Podemser 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

Developer Plus

20

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

DOM

O Document Object Model (DOM) é uma interface de programação paradocumentos HTML e XML. Ele representa a página para que osprogramas possam alterar a estrutura, o estilo e o conteúdo do documento.O DOM representa o documento como nós e objetos. Dessa forma, aslinguagens de programação podem se conectar à página.

JSON

JavaScript Object Notation (JSON) é um formato baseado em textopadrão para representar dados estruturados com base na sintaxe do objetoJavaScript. É comumente usado para transmitir dados em aplicativos daWeb (por exemplo, enviar alguns dados do servidor para o cliente, paraque 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çõespara produzir uma nova função. Compor funções juntas é como encaixaruma série de tubos para nossos dados fluirem.

Fluxo de controle assíncrono

Fluxo de controle refere-se à especificação da ordem na qual asinstruções individuais, instruções ou chamadas de função de umprograma imperativo são executadas ou avaliadas.

Promises

Promises (especificação ES6) nos dão uma maneira de lidar com oprocessamento assíncrono de maneira mais síncrona. Eles representamum valor que podemos manipular em algum momento no futuro. E,melhor do que callbacks aqui, Promises nos dão garantias sobre essevalor futuro.

Developer Plus

21

Callbacks

Como as funções são objetos de primeira classe, podemos passar umafunção como um argumento em outra função e, posteriormente, executaressa função passada ou mesmo retorná-la para ser executadaposteriormente.

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; bonsprogramadores dividem seus programas em módulos.

Bons módulos, no entanto, são altamente auto-contidos comfuncionalidades distintas, permitindo que sejam embaralhados, removidosou adicionados conforme necessário, sem interromper o sistema como umtodo.

Webpack

O Webpack é um bundler de módulo JavaScript de código aberto. Seuprincipal objetivo é agregar arquivos JavaScript para uso em umnavegador, mas também é capaz de transformar, agrupar ou empacotarqualquer recurso ou ativo.

Browserify

O Browserify é uma ferramenta JavaScript de código aberto que permiteaos desenvolvedores escrever módulos no estilo Node.js que sãocompilados para uso no navegador. O Browserify permite que você userequire no navegador, da mesma maneira que você usaria no Node.

Gulp

O gulp é um kit de ferramentas JavaScript de código aberto da FractalInnovations e da comunidade de código aberto do GitHub, usado comoum 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.

Developer Plus

22

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 docliente.

Express

Express é um framework para Node.js inspirado no Sinatra. Ele éminimalista, flexível e contém um robusto conjunto de recursos paradesenvolver aplicações web, como um sistema de Views intuitivo (MVC),um robusto sistema de roteamento, um executável para geração deaplicações e muito mais.

Dados relacionais

Bancos de dados relacionais como MySQL, PostgreSQL e SQLite3representam e armazenam dados em tabelas e linhas. Eles são baseadosem um ramo da teoria dos conjuntos algébricos conhecido como álgebrarelacional.

SQL

SQL (Structured Query Language) é uma linguagem específica dedomínio usada na programação e projetada para gerenciar dados mantidosem um sistema de gerenciamento de banco de dados relacional (RDBMS)ou para processamento de fluxo em um sistema de gerenciamento defluxo de dados relacional (RDSMS).

NoSQL

NoSQL é um termo genérico que representa os bancos de dados nãorelacionais. Uma classe definida de banco de dados que fornecem ummecanismo para armazenamento e recuperação de dados que sãomodelados de formas diferentes das relações tabulares usadas nos bancosde dados relacionais.

Developer Plus

23

MongoDB

O MongoDB é um programa de banco de dados multiplataformaorientado a documentos. Classificado como um programa de banco dedados NoSQL, o MongoDB usa documentos semelhantes a JSON comesquemas. O MongoDB é desenvolvido pela MongoDB Inc. e licenciadosob 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 trabalhona memória do sistema, seja completamente ou parcialmente, com basena identificação de tabelas que se beneficiarão mais da velocidade daDRAM.

Redis

Redis é um open source (licenciado pelo BSD), armazenamento deestrutura de dados na memória, usado como banco de dados, cache emessage broker.

Memcached

O Memcached é um armazenamento de chave-valor na memória (opensource) para pequenos trechos de dados arbitrários (strings, objetos) deresultados de chamadas de banco de dados, chamadas de API ourenderização de página.

Web Storage

A API de Web Storage fornece mecanismos pelos quais os navegadorespodem armazenar pares de chave-valor, de uma maneira muito maisintuitiva 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 dedados destinadas a garantir a validade mesmo em caso de erros, falhas deenergia, etc.

Developer Plus

24

No contexto de bancos de dados, uma seqüência de operações de bancode 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 emanipular dados de um banco de dados usando um paradigma orientado aobjeto. Então você não usa mais o SQL; você interage diretamente comum objeto na mesma linguagem que está usando no seu aplicativo.

REST

REST (REpresentational State Transfer) é um estilo de arquitetura queusa chamadas HTTP simples para comunicação entre máquinas, em vezde opções mais complexas, como CORBA, COM +, RPC ou até mesmoSOAP.

Usar REST significa que suas chamadas serão baseadas em mensagens edependem do padrão HTTP para descrever essas mensagens.

Chrome DevTools

O Chrome DevTools é um conjunto de ferramentas de autoria edepuração de Web incorporado ao Google Chrome. O DevTools é usadopara iterar, depurar e criar o perfil de um site.

Certificados SSL

Certificados SSL criam uma conexão criptografada e estabelecemconfiança na comunicação.

HTTP/2 e SPDY

O HTTP/2 tornará os aplicativos mais rápidos, mais simples e maisrobustos - uma combinação rara - ao permitir desfocar de muitas dassoluções HTTP/1.1 feitas anteriormente nos aplicativos e abordem essaspreocupações dentro da própria camada de transporte.

O SPDY era um protocolo experimental, desenvolvido no Google eanunciado em meados de 2009, cujo objetivo principal era tentar reduzir a

Developer Plus

25

latência de carga de páginas da Web, abordando algumas das limitaçõesde desempenho conhecidas do HTTP/1.1.

WebSockets

A API WebSocket é uma tecnologia avançada que possibilita a aberturade uma sessão de comunicação interativa bidirecional entre o navegadordo usuário e um servidor.

Service Workers

Serviço em segundo plano que manipula solicitações de rede. Ideal paralidar com situações off-line e sincronizações em segundo plano ounotificações push.