Programador Front-end (web)

O que faz um programador Front-end (web)?

A forma mais comum de conhecer uma empresa é através do seu site. Lá conseguimos visualizar suas informações e realizar ações (comprar um produto por exemplo).

Entenda o que é uma página web no Flow abaixo:

Páginas ou sistemas web se tornaram praticamente obrigatórios para uma empresa - por isso o mercado precisa cada vez mais de programadores Web ou como também são chamados, programadores Front-end, como vemos na Figura 1.

Páginas e sistemas web

Um programador Front-end/Web cuida da parte visual, ou seja, tudo que o usuário consegue ver e interagir em uma página. A programação Front-end está relacionada com a experiência do usuário final, ou User Experience (UX).

Além do Front-end Web existem outras carreiras que podem ser vistas no flow abaixo:

Assim como acontece na programação mobile, nem tudo é feito no Front-end e por isso uma página web depende da camada back-end para que funcione como desejado (por exemplo exibir os produtos para um usuário).

A camada back-end vai processar e enviar os dados - a responsabilidade da camada front-end é receber estes dados e exibi-los de forma amigável para o usuário.

Como exemplo vamos analisar a página do MercadoLivre.

MercadoLivre

Veja como funciona o site do MercadoLivre no flow abaixo:

Globo.com

Veja como funciona o site do Globo.com no flow abaixo:

Características da programação Front-end (web)

• Envolve conhecimentos referentes a experiência do usuário (UX).
• Está associado a programação da tela, ou seja, a programar o que aparece para o usuário e como ele vai interagir com a página.
• Sempre há vagas para programador Front-end já que é quase obrigatório para uma empresa ter uma página web.
• Envolve programar as ações que o usuário vai fazer na página.
• Se preocupa com a navegação entre as páginas.

Quais tecnologias o programador Front-end utiliza?

Na programação Front-end temos diversas tecnologias, porém três delas se destacam no mercado de trabalho. São elas:

• Angular
• React
• Vue.js

Angular, React e Vue.js são ferramentas - ou seja, eles são usados para que a programação das páginas Web seja feito da forma mais rápida possível.

Além disso, essas três tecnologias têm sido adotadas pelo mercado pelos seguintes motivos:

• Possuem grandes empresas por trás delas - Google (Angular) e Facebook (React) e no caso do Vue.js recebe patrocínio de diversas empresas como o Laravel.
• Deixam a página com ótima performance.
• O resultado se aproxima de um aplicativo mobile.
• A curva de aprendizado é pequena

Carreira Programador Front-end – Pré-requisitos

O Angular, o React e o Vue.js são tecnologias que você vai usar para construir o front-end de aplicações Web. Contudo, você vai precisar de um conhecimento prévio para lidar com essas ferramentas.

Antes de programar em Angular, React ou Vue.js é necessário aprender JavaScript - a linguagem utilizada por essas tecnologias como vemos na Figura 5. No caso do Angular a linguagem TypeScript (que é um JavaScript melhorado) é um conhecimento adicional sugerido.

Plano de estudo passo a passo

Passo 1: Aprender HTML

Aqui você vai aprender a construir a base da página Web definindo quais os elementos ela vai ter (textos, imagens, botões). Toda página Web possui um documento HTML e por isso todo programador Front-end precisa saber HTML.

Aprender a construir a estrutura da página é o primeiro passo, pois é aqui que você vai definir o que será exibido para o usuário, como por exemplo qual será o título da página, os textos, botões, imagens e menu.

Essa parte é super importante já que é através dessa base que as outras tecnologias vão poder cumprir com suas respectivas tarefas.

HTML é o fundamento de tudo. Sem saber HTML você não poderá criar uma página Web.

Passo 2: Aprender CSS

Depois de aprender a estruturar a página será necessário mudar a aparência dela - deixá-la mais amigável para o usuário.

Aprender CSS é necessário para estilizar a página Web. Sem o CSS sua página será apenas um texto organizado que não chamará a atenção do usuário. Veja um exemplo de uma página sem CSS no flow a seguir:

Através do CSS conseguimos mudar as cores do fundo da página e textos, definir tamanhos diferentes para títulos, textos e links, e também como os elementos vão aparecer em diferentes telas.

Sem o CSS você vai conseguir criar uma página Web, porém ela não será muito atraente para o usuário.

Passo 3: Aprender os fundamentos: Algoritmo e lógica de programação

Aqui você vai aprender os fundamentos da programação. Esse é um passo fundamental: todo programador precisa ter essa base de lógica e algoritmo.

Depois de aprender HTML e CSS você vai precisar aprender a linguagem de programação JavaScript. Contudo, antes de estudar uma linguagem de programação, você precisa ter um pré-requisito que é a lógica de programação.

É na fase de lógica onde você vai aprender a escrever comportamentos para a página. Veja um exemplo no flow abaixo:

É na matéria de lógica onde você aprende as ferramentas básicas para ser capaz de entender como o computador (no nosso caso o navegador) interpreta os comportamentos solicitados a ele.

Passo 4: Aprender a linguagem de programação JavaScript

Depois de adquirir os conhecimentos de algoritmo, agora você precisa ganhar fluência em uma linguagem de programação - na carreira Front-end isso significa aprender a linguagem JavaScript.

Aprender uma linguagem de programação, assim como algoritmo, também é um passo fundamental na sua carreira programador.

Isso acontece, pois, a programação é feita através de uma linguagem que o navegador (assim como o computador ou celular) consegue entender - ou seja, o navegador não entende uma linguagem ‘semântica’, como falar em português, por exemplo. Precisamos passar as instruções de algoritmo para o navegador através de uma linguagem que ele entende - no caso, a linguagem JavaScript.

Em outras palavras, quando aprendemos uma linguagem de programação estamos traduzindo os algoritmos em uma linguagem própria para a máquina - que pode ser o navegador, o computador ou o celular. Por exemplo, na matéria algoritmo, quando desejamos escrever uma mensagem na tela, usamos o código abaixo:

Traduzindo isso para a linguagem JavaScript, por exemplo, temos:

Sem conhecer a linguagem JavaScript você não vai conseguir trabalhar com o Angular, React ou Vue.js, que são as ferramentas utilizadas para construir aplicações web front-end.

Passo sugerido para o programador Angular: Aprender a linguagem de programação TypeScript

TypeScript é uma melhoria da linguagem JavaScript e por isso foi adotado pelo Angular sendo então comum o seu uso.

Depois que você aprender JavaScript, dominar o TypeScript será muito fácil - pois as linguagens são muito parecidas. O único motivo pelo qual essa linguagem faz parte do seu plano de estudo é porque o Angular utiliza TypeScript, ao invés de JavaScript.

Então eu posso pular o JavaScript e aprender somente TypeScript?

Em teoria, sim. Mas na prática faz muito mais sentido você aprender JavaScript, pois dessa forma TypeScript será um aprendizado praticamente natural para você.

Passo 5: Dominar o Angular, o React ou o Vue.js

O Angular, React e o Vue.js são ferramentas, ou seja, soluções rápidas e performáticas para criar uma página Web. Quando você for buscar vagas para trabalhar como programador Front-end, na prática verá que a maioria das ofertas do mercado será buscando programadores Angular, React ou Vue.js.

Isso acontece porque é através destas ferramentas aonde você vai de fato construir as aplicações front-end - O JavaScript, HTML e CSS são pré-requisitos para utilizar as ferramentas Angular, React ou Vue.js.

Basicamente o Angular, React e o Vue.js determinam quando uma página deve aparecer na tela e o que vai acontecer quando o usuário interagir com a página - por exemplo clicando em um botão, navegando de uma página para outra, preenchendo dados de um formulário etc.

Como aplicar o plano de estudo na DevMedia?

Acompanhar o plano de estudo na DevMedia é simples: basta acessar o menu Tecnologias e escolher o tópico que você está estudando no momento.

Veja um exemplo no flow abaixo:

Lembrando que após estudar HTML e CSS você já está apto a criar suas primeiras páginas front-end! Veja no flow abaixo como isso pode ser feito na plataforma DevMedia através dos Projetos Passo a Passo.

Importante! E se você tiver dúvidas?

É natural que durante sua evolução no plano de estudo você tenha dúvidas. Nossa missão é acompanhar você durante sua evolução e torná-lo um programador Front-end - é o que fazemos desde sempre.

Teremos muito orgulho de contar com você na plataforma!

Aguardamos você :)