19/01/2021

Programação

Desenvolvedor front-end: O que você precisa saber para começar?

• 7 min de leitura

Você e um iniciante na área de front-end? Nesse post eu vou te explicar todas as etapas de um desenvolvimento front-end!

Seguindo um roadmap front-end developer

O que e front-end?

Front-end e a parte visual de um site ou sistema, e a onde a gente consegue interagir com o usuário.

Geralmente, um desenvolvedor front-end ele e responsável por codificar uma nova interface, utilizando linguagens como: HTML, CSS e Javascript.

Mas nos dias de hoje um desenvolvedor front-end não estão mais limitados só na web, eles podem também trabalhar na parte de navegação de um site, nos layouts e até na aparência de diferente nos dispositivos moveis (responsividade).

Mas agora vamos ao que interessa!

Abaixo está uma imagem que demostra as possibilidades que você pode seguir. Essa imagem foi feito por Kamran Ahmed. Depois de ler esse post não se esqueça de dar uma estrela no repositório para apoiar trabalho dele!

Dica da lores: Essa imagem vai te dar muitos insights, sobre qual área e a melhor para você! Não leve como verdade absoluta, absorva aquilo que você mais se identifica pois você compreendera uma ferramenta mais adequada para alguns casos do que a outra. Então Leia esse mapa e comece a codar e boa sorte!

Bastante coisa né? Mas fica calmo que conforme você vai estudando tudo vai se encaixando.

Internet e como funciona?

Hoje e muito importante conhecer o básico de internet e entender como ela funciona por baixo dos panos.

A Internet é uma rede global de computadores conectados uns aos outros que se comunicam por meio de um conjunto padronizado de protocolos.

E necessário você entender sobre:

Protocolos HTTP.
Domínios.
Navegadores, como funciona e a diferença de cada.
Hospedagem.
DNS.

Básico: HTML, CSS e JS

Geralmente grande parte dos desenvolvedores front-end usam essas 3 linguagens, para codificar sites, estilos, estrutura de um site:

HTML (base de tudo)
CSS (estilo)
Javascirpt (Para interação)

Habilidade de desenvolvimento geral

Agora vou listar algumas habilidades que você vai precisar na sua carreira front-end!

Aprenda os comandos básicos do GitHub, compartilhe seus códigos com a comunidade.
Aprenda sobre os protocolos HTTP e Fundamentos básicos de API REST (GET, POST, PUT, DELETE...)
Aprenda usar o Google, StackOverflow.
Utilize bom terminal (bash, zsh)
Estude sobre estrutura de dados
Estude padrões de projeto

Estilo: Pré-processador e arquitetura CSS

Um pré-processador CSS é um programa que permite gerar CSS a partir da sintaxe exclusiva do próprio pré-processador. Pré-processadores podem tornar o código CSS mais organizado, sendo eles:

Familiarize-se com as ferramentas

Para se tornar um bom desenvolvedor front-end, você deve se dedicar como em qualquer área da sua vida, devera se dedicar a ferramentas de depuração, testes de unidade, testar aprender uma tecnologia de front-end como React, Vue, Angular, etc.

Todos os navegadores vêm com ferramentas para dar apoio ao desenvolvedor. E essas ferramentas permite que você teste e ajuste suas páginas no proprio navegador, de maneira específicas para como o navegador está interpretando seu código.

Algumas ferramentas úteis:

npm
yarn

Alguns executores de tarefas que indico:

Linter e formatadores que indico:

Frameworks CSS

Um framework css abstrai o design da web comuns e torna o design mais fáceis para o desenvolvedor implementar.

Frameworks

São pacotes que contêm códigos pré-escritos, eles forcem estrutura e uma base para construir enquanto permite flexibilidade com o design final.

Frameworks mais utilizados:

Quer saber a fundo a diferença entre React ou vue? Clica aqui → React ou Vue qual devo escolher para meu projeto?

Testando seu aplicativo

O objetivo do testes no front-end é testar as funcionalidades gerais para garantir que a camada de apresentação esteja livre de defeito com as atualizações sucessivas.

Caso você tenha escolhido react para o seu projeto, aprenda a criar testes nesse post! De como Criar testes no front-end com ReactJs.

Teste de ponta a ponta

No teste E2E, o desenvolvedor testa todo o aplicativo junto e testa-o como um usuário faria.

Basicamente, aqui o desenvolvedor testa o fluxo de trabalho do aplicativo do início ao fim. O objetivo é replicar cenários reais de usuários para que o sistema possa ser validado quanto à integração e integridade dos dados.

A seguir estão algumas ferramentas:

Teste de integração

Os testes de integração garantem que várias partes do aplicativo funcionem juntas. É um dos testes cruciais e mais importantes.

Renderização do lado do servidor

A renderização do lado do servidor (SSR) é a capacidade de um aplicativo de contribuir exibindo a página da web no servidor em vez de renderizá-la no navegador.

Gerador de site estático

Um gerador de site estático é uma ferramenta de publicação, que é essencialmente um conjunto de ferramentas para construir sites estáticos com base em um conjunto de arquivos de entrada.

Aplicativo móvel

Bem, aqui o front end interage diretamente com o usuário, incluindo elementos de design, como wireframes, maquetes, cache e sincronização de banco de dados. Ele oferece uma experiência de usuário tranquila em vários tamanhos e orientações de tela.

Aplicativo Desktop

Mesmo que celulares e tablets tenham a vantagem de serem úteis, você simplesmente não pode ignorar os aplicativos para PC e desktop. Porque ainda existem muitos usuários que preferem o PC a melhor opção para explorar os aplicativos e sites

Continue aprendendo

Então, depois de ler este guia, você pode dar o pontapé inicial em sua jornada como desenvolvedor front-end da web com certeza. Embora o aprendizado seja a única chave para o sucesso. Para isso, você tem que praticar e aprender de forma consistente. Boa sorte nos estudos!