Série: Desenvolvedor web. Parte 2: Front-end vs Back-end

E ai ? Quer entrar no mercado de TI ou só aprender por hobby mas está perdido e não sabe nem o que procurar para começar, leia este post que vou tentar te dar um rumo!

• Série: Desenvolvedor web. Parte 1: As principais profissões
• Série: Desenvolvedor web. Parte 2: Front-end vs Back-end

Bom, vamos lá!

Antes de mais nada é preciso saber que na área de TI assim como em outras diversas áreas existem diversas profissões e que uma mesma profissão pode executar trabalhos diferentes conforme a empresa a qual você presta serviço/oferece sua mão de obra. Neste artigo vou abordar especialmente as profissões de desenvolvimento, como desenvolvedor web, analista de desenvolvimento, programador, back end, front end, e qualquer outro nome que essa mesma tarefa possa ter.

A maioria das empresas leva em consideração mais sua experiência na área do que sua formação acadêmica, por isso o curso que você fez ou faz na faculdade, sendo ele de TI ou área correlatas, não fará muita diferença para um desenvolvedor. Eu mesmo abandonei a faculdade de ADS, não me formei e sempre trabalhei na área. Não estou falando para você fazer o mesmo, mas não se prenda muito a faculdade, aprendemos bem mais por fora dela do que nela na área de desenvolvimento, afinal a faculdade não é só para desenvolvedores/programadores e precisa preparar o profissional para a vida e para outras profissões também. (Por isso que os cursos tem muitas vezes matérias que você não percebe a ligação com a carreira profissional, mas são exigidos pelo MEC ou pelo mercado).

Se você está entrando nesta área pelo retorno financeiro, tome muito cuidado, pessoas que ganham bem são pessoas que gostam e exercem bem suas atividades. Entrar em qualquer área por dinheiro geralmente é um erro, fazer algo que não gosta pode desmotivar e frustar até o ponto que você desista daquilo. 

Trabalhe em algo que você realmente goste, e nunca mais vai gostar de alguma coisa!

Escolha um trabalho que você ame e não terás que trabalhar um único dia em sua vida. – Confúcio

O que é front end e back-end ? 

No desenvolvimento web, separamos as partes do sistema em back end, front end, e infraestrutura. Além de outras partes que podem ou não existir eventualmente, conforme o tipo e porte do sistema/empresa.

Front end

O front end é a parte do sistema web que o usuário final vê, isto é, a interface gráfica do sistema web. E essa parte é geralmente feita por um desenvolvedor front end, com ou sem o apoio de um UX ou por um full stack (que é quem faz mais de uma parte, “full”).

Cabe ao “front ender” (ou “front end”, ou só “front”) os conhecimentos necessários para construir uma tela que seja no mínimo responsiva e leve a melhor experiência ao usuário, sem consumir recursos demasiados do navegador, internet e computador de cada usuário.

Geralmente um front end tem os conhecimentos da stack básica da web, que são: HTML, CSS e JS. Grande parte acaba tendo conhecimento de uma linguagem de back end também, principalmente aqueles que trabalham como freelancer/autônomo, ou são fullstack. Estes geralmente conhecem PHP ou o próprio JS (via NodeJS ou Deno) para criação do back end. Não é obrigatório um front ender conhecer uma tecnologia de back, porém conhecimento nunca é demais e pode garantir melhores oportunidades a essa pessoa.

Além desses conhecimentos, um front também deve conhecer as bibliotecas (ou em inglês, libraries, ou abreviado como libs) e frameworks. Recomenda-se que o front ender saiba pelo uma biblioteca JS e um framework UI. 

Bibliotecas populares em 2020:

• React
• Angular
• Vue
• jQuery (ainda é bastante usada em sistemas legados, não se fazendo necessário o conhecimento para novos projetos, hoje o JS nativo do navegador, junto com as CSS3 já fazem praticamente tudo que antigamente era necessário o jQuery).

Frameworks CSS / UI Kits

• Bootstrap
• Materialize
• Bulma
• Foundation
• Semantic

Mais a frente iremos falar sobre o que é uma biblioteca (lib) e um framework (FW) caso não saiba ainda!

Além desses conhecimentos, conhecer técnicas de UI/UX, usabilidade, SEO (Search Engine Optimization), paleta de cores, teste A/B, pré-processadores CSS, arquitetura CSS, conceitos de SPA (Single Page Application) & PWA (Progressive Web Apps) seriam interessantes.

Back end

Back end como já devem estar assimilando, é a parte do sistema que realiza o processamento e grande parte da lógica e regra de negócio ficam lá. É no back end que ocorre a conexão com o(s) banco(s) de dados, envio de e-mails, processamento de pagamentos, envio de dados para outros usuários ou sistemas. É a parte que o usuário não pode e não deve ver. Lembrando que tudo que está no front o usuário consegue alterar, intencionalmente ou não, levando a uma brecha de segurança! Por isso é importante fazer validações no back end, mesmo que elas já existam no front end. No front só valide para melhor a experiência do usuário e evitar idas ao back end sem necessidade.

Para se trabalhar com back end é ideal que se conheça o básico pelo menos de front end, saber como o front se comporta e vai consumir seu código é importante para criar algo da melhor forma possível.

Diferente do front end que temos uma stack de 3 tecnologias obrigatórias, o HTML, CSS e o JS, no back end não existe uma padronização, e praticamente qualquer linguagem de programação pode atuar no back end. Cabe a um desenvolvedor que quer seguir nesta área escolher a que mais gostar! Vou citar algumas e alguns fatos sobre elas para ajudar nessa escolha. Basicamente, no back end, o que pode ser feito com uma linguagem pode ser feito com qualquer outra, apenas mudando o paradigma ou a implementação.

Não acreditem em nenhum vídeo, artigo ou comentário falando que linguagem X ou Y vai morrer, isso na verdade são pessoas tentando direcionar você para outra linguagem que ela gosta ou tem uma afeição, ou pura ignorância do mercado mesmo. 

• PHP
• JS
• C#
• Java
• Rust
• Python
• Ruby
• Elixir
• Go
• Kotlin
• Clojure
• F#
• VB.NET
• Erlang
• C++
• C
• …

Partindo do principio que você sabe 0 de qualquer linguagem de programação, você vai levar em média de 6 meses a 2 anos para estar apto a conseguir uma vaga de emprego com alguma delas.

Você só precisa saber de uma delas para conseguir a vaga de back end (diferente do front que você precisa da stack completa, mas por outro lado, a pilha/stack do front é capaz de aprender sem problema de 3 meses a 1 ano).

PHP e JS (sim, o mesmo JS do front end, mas no back end, e também no mobile e desktop, graças ao NodeJS e ao Deno) são as que tem a curva de aprendizado menor. Grande parte da internet, a maioria na verdade, é feita utilizando essas duas tecnologias no back end. Sendo assim são as que tem mais vagas no mercado em geral.

Já as linguagens como Java e C#, são linguagens usadas mais no mundo corporativo, grandes empresas, e-commerces, bancos, financeiras, industria. 

Salário

No que se refere a remuneração, basicamente as 2 profissões acabam pagando relativamente o mesmo valor. Você em qualquer empresa será pago por aquilo que você agrega, então se você trabalha em uma agência de publicidade ou uma empresa de e-commerce por exemplo, o apelo visual é geralmente maior, neste caso é bem capaz que você encontre vaga de front-end com melhores remunerações, já em uma empresa que cria sistemas corporativos, ou sistemas com grande demanda de acesso/consumo, como sistemas bancários, sistemas corporativos como ERP, WMS, TMS, CRM é mais provável encontrar mais oferta para back-enders. Lembrando que isso não é uma regra, apenas um padrão observado ao longo dos anos da atual situação do mercado, não existe garantia nenhuma que esse cenário permaneça pela eternidade.

O que estudar para começar ?

Para começar como desenvolvedor web, seja front-end, back-end, ou mesmo full stack, é importante conhecer a stack básica da web, que é composta pelo trio: HTML, CSS e JS.

Recomendo a seguinte ordem de aprendizagem:

1. HTML – HyperText Markup Language – A linguagem universal dos navegadores. Sem ela você não cria um sistema web com interface gráfica. Atualmente estamos na era do HTML5, mas pode chamar apenas de HTML, não é necessário especificar a versão.
   1. Funcionamento básico
   2. Protocolo HTTP
   3. Tags e atributos de tags
   4. O que é UI e UX
   5. Semântica
   6. SEO
2. CSS – Cascade Style Sheats – São as definições de estilo que permitem você personalizar a aparência das suas tags HTML.
   1. Seletores
   2. Atributos
   3. Media queries
   4. Pseudo classes e pseudo atributos
   5. Grid system
   6. Flex box
   7. BEM (Block Element Modifier)
   8. Pré compiladores (SASS, LESS)
3. JS – JavaScript – É atualmente a única linguagem de script/programação suportada por todos os navegadores que seguem o padrão de mercado. Em alguns navegadores já é possível usar WebAssembly e outros suportam algumas outras funcionalidades, que em breve tendem a desaparecer como o Flash e os Applets em Java (não confundir JavaScript com Java, são coisas totalmente diferentes!). O JS é o responsável por dar vida a uma página web no lado do cliente (navegador) e realizar interações e alguns efeitos visuais que o CSS sozinho não seja capaz.
   1. DOM – Document Object Model
   2. Tipos de dados primitivos (string, integer, boolean)
   3. Variáveis
   4. Escopo de variáveis (var, const, let) 
   5. Estruturas condicionais (if, else)
   6. Estruturas de repetição (for, while)
   7. Array & Objetos
   8. JSON (JavaScript Object Notation)
   9. Funções
   10. Prototype
   11. Eventos
   12. Requisições assíncronas – AJAX (xmlhttp & fetch)
   13. Promises
   14. Cookies, Local Storage & Session Storage
   15. WebSockets