Uma foto minha vestido com o uniforme da Grifinória do Harry Potter

Willian JustenSoftware Engineer

Instrutor na Udemy, escrevo sobre o mundo front end, viagens, vida pessoal e mais.

← Voltar na listagem

24 de fevereiro de 2015 • 15 min de leitura

Como se tornar um desenvolvedor Front End

Aprenda os caminhos para virar um desenvolvedor Front End de qualidade.

Índice

Introdução

Bom, já faz um tempinho que eu não escrevo no blog, mas é por um bom motivo, estou me mudando de empresa e com isso eu estou precisando organizar algumas coisas da minha vida, inclusive uma mudança de cidade.

Algum tempo eu já pensava em fazer um post parecido e como estou precisando também deixar alguns guias para os futuros desenvolvedores que vão entrar no meu lugar, resolvi unir o útil ao agradável e criar esse post. Espero que ajude a quem está começando e para quem já é experiente, que possa acrescentar com outras dicas, dar alguns detalhes de sua experiência, seria bastante legal.

O post será separado em algumas partes, onde irei responder algumas dúvidas comuns, links para estudo, requisitos básicos, enfim, um compilado grandão de informações. A ideia é passar só um pouco de conteúdo para vocês se guiarem, é claro que não vou colocar todos os meus favoritos, senão seria um post gigantesco.

O que faz um desenvolvedor Front End?

O desenvolvedor front end é o profissional responsável por projetar, construir e otimizar as interfaces de um projeto web.

Responsabilidades

  • Trabalhar junto a equipe de design para criar a melhor experiência possível
  • Desenvolver código limpo e bem documentado
  • Seguir os web standards
  • Se preocupar com a performance no client-side
  • Aplicar técnicas de SEO
  • etc...

É claro que as responsabilidades mudam de acordo com a empresa em que você for trabalhar, mas essa é uma base comum na maioria dos lugares.

Qual a importância do Front End?

É claro que a maioria já deve saber a necessidade desse profissional, mas vale ressaltar alguns detalhes:

  • 80% do tempo de carregamento é gasto no frontend
  • Cada vez mais as interfaces vem ficando complexas e detalhadas, fazendo ainda mais necessária a presença de um especialista
  • O visual é a primeira coisa a ser vista, se ele estiver quebrado, o risco do usuário sair e nunca mais voltar é maior
  • etc...

Mercado de trabalho

Gráfico de Frontend Developer

Acho que uma imagem já fala mais que mil palavras né? A busca por desenvolvedores front end só está crescendo, isso permite salários maiores para quem é qualificado de verdade, boas empresas para se trabalhar, etc.

Níveis de conhecimento

Olha, definir níveis de conhecimento, seja para qualquer profissão é algo bastante complicado, porque depende do que você vai se especializar. Eu meio que fiz uma separação mais ou menos de alguns assuntos que julgo necessários para cada nível de desenvolvedor. Terão alguns extras, que são assuntos interessantes, mas não fundamentais para aquele nível. Lembrando que os níveis mais altos compreendem tudo dos níveis anteriores.

Lembre-se: essas informações podem variar bastante de lugar para lugar.

Iniciante Básico

  • HTML (estrutura e tags)
  • CSS (propriedades básicas)
  • JS (pequenas noções, chamadas de scripts prontos)
  • Básico de Photoshop (recortes, cores, fontes)

Intermediário

  • HTML (Semântica e Acessibilidade)
  • CSS (propriedades avançadas do CSS3, Design Responsivo, funcionamento de grids e noção de frameworks)
  • JS (Entendimento da linguagem, noções de orientação a objeto)
  • Ferramenta de Versionamento (Git)
  • Noções de performance
  • SEO (Extra)

Avançado

  • CSS (Entender pre-processadores e suas funcões)
  • JS (Conhecimento forte na linguagem, entender algumas arquiteturas e Testes)
  • NodeJS (Saber como funciona e alguns conhecimentos basicos para automatização e afins)
  • Grunt/Gulp (saber como automatizar processos)
  • Bons conhecimentos de performance
  • Noções de UX/UI (Extra)

Master

  • CSS (conceitos avançados de arquitetura - BEM, Organic, Atomic)
  • JS (Total domínio na linguagem, design patterns na palma da mão)
  • NodeJS (saber como criar módulos, chamá-los tanto no front quanto no back)
  • Ter sólida experiência em sistemas front como o MEAN Stack

Gato surpreso

Eita lascou, como aprendo tudo isso?

Estava achando que ser desenvolvedor front end é moleza? Como disse o Nicholas C. Zakas

Um tweet falando sobre como a profissão de frontender é difícil

Cada dia uma nova tecnologia é lançada e precisamos nos manter sempre atualizados, a questão é, como fazer tudo isso? Fiz um post há um tempo atrás falando sobre técnicas de aprendizado, que podem ajudar um pouco nessa longa caminhada.

Vou separar aqui as principais áreas que precisamos estudar, o porquê delas e alguns links para auxiliá-los no estudo.

Inglês

Sim, uma das coisas mais importantes para se tornar um bom desenvolvedor é saber inglês. É claro que eu não estou falando que você precisa ser fluente como um americano legítimo de início, mas saber ler e assistir vídeos vai te ajudar muito, visto que a maioria do material vai estar em inglês, você querendo ou não. Não fique mendigando informações só na sua língua, saia do comodismo e vá aprender inglês, vai por mim, vai ser o melhor investimento que você pode fazer. Sobre como aprender inglês, existem vários métodos, desde os cursos tradicionais até programinhas para te ensinar. Dependendo do seu nível, eu recomendo fortemente um professor particular, pois ele poderá focar exatamente nas suas deficiências e você conseguirá evoluir bem rápido. Aqui vão alguns links legais falando do assunto:

Editores de código

Eles são basicamente o nosso braço direito, é importante escolher um editor que seja confortável para você e agilize o seu workflow. Não entre em guerrinhas de qual é melhor ou pior, instale, use e veja qual te agrada mais. Os iniciantes sempre caem na tentação de perguntar o melhor e bom, cada um vai puxar sardinha para o seu lado.

Sublime Text

Brackets

Vim

Básico do Terminal

Se você quer ser realmente um programador bom, vai ter que largar esse medo e colocar a mão na massa. O terminal se torna ferramenta FUNDAMENTAL para níveis do intermediário ao avançado. Seja para usar seu controle de versão, seja para utilizar ferramentas de automação e outras várias ferramentas.

HTML

A base de tudo, que vai governar a estrutura de todo o sistema. Qualquer desenvolvedor precisa saber ao menos o básico de html, inclusive a galera de backend. Já para galera de frontend, temos que nos atentar a mais detalhes, como: acessibilidade e semântica.

Básico

Semântica

Acessibilidade

CSS

No início era só um modo de deixar as páginas um pouquinhos mais bonitas, hoje já é uma tecnologia que faz milagres, permitindo animações, melhores interações e até mesmo substituir alguns tipos de imagens. Para o desenvolvedor frontend é uma das áreas mais importantes rivalizando com JS, dependendo de onde você deseja se especializar. Para os que preferem mais a parte de UX/UI e design, aqui será onde você deve se aprimorar cada vez mais.

Dica: CSS funciona muito na base de teste e acerte, veja o que cada propriedade faz, brinque com elas até se sentir confortável. Depois disso procure códigos alheios e tente entender o funcionamento e comece a aplicar em seus próprios códigos. Não há nada de errado olhar código alheio, open-source está aí para isso mesmo.

Básico

CSS3

Frameworks / Grids / Responsive

Pré-processadores

Metodologias / Boas Práticas

Inpirações / Tutoriais

Javascript

Basicamente a única real linguagem no client side e que agora já se extende para o server side também. Essa linguagem tem crescido muito e hoje permite fazer praticamente tudo, seja na web e até fora dela. Se você quer ser considerado um desenvolvedor front end completo é bom que tenha essa linguagem como sua melhor amiga. Como um amigo diz:

Desenvolvedor Front End que não sabe javascript é recortador de layout. - Suissa

Tome bastante cuidado ao querer tomar atalhos, como utilizar JQuery para tudo ou já tentar ir direto para Angular, que é modinha.

No início é comum utilizarmos plugins prontos para realizar ações específicas (sliders, lightbox), mas com o tempo vai se fazendo necessário criar soluções únicas e para isso que precisamos entender bem a linguagem.

O Vitor Britto também fez outro incrível post falando sobre livros de JS.

Controle de Versão

Quantas vezes você já se pegou fazendo 1000 backups só para não perder certas versões dos arquivos? E se isso pudesse ser feito de uma forma mais fácil e ainda permitisse muito mais? Para isso temos ferramentas de controle de versão, sendo o Git e o SVN os mais famosos. Se você quiser brincar com o github, o git será a pedida.

A maioria das empresas utiliza um desses dois para poder organizar melhor seu código, além de poder versionar, o git permite um controle dos colaboradores, controle de flow, separação em branches e muito mais.

Básico

Intermediário/Avançado

SEO

Search Engine Optimization ou SEO é um conjunto de estratégias e métodos para melhorar o posicionamento de páginas da internet nos mecanismos de buscas, como o Google e Bing.

E qual a importância disso? Estar bem posicionado nos mecanismos de busca lhe permite ganhar mais acessos e com isso divulgar mais o seu produto.

Nem todo desenvolvedor Front End precisa ser o mestre de tudo em SEO, podemos deixar isso para especialistas, mas algumas informações básicas é importante também.

Performance

Como disse no início do artigo, uma das responsabilidades do desenvolvedor front end é cuidar da performance da aplicação, visto que 80% do carregamento está envolvido diretamente com o client side. Sendo assim, se você quiser se destacar entre os desenvolvedores, foque bastante em performance, os resultados são muito satisfatórios e recompensadores.

O Davidson Fellipe fez uma awesome só disso e bom, ela está tão completa, mas tão completa, que basta o link dela, para você achar todo o resto. Segue aqui esse ótimo compilado.

Automação de Tarefas

Durante o percurso de frontend, principalmente na parte de performance você irá ver que muitas tarefas se tornam bastante repetitivas, como compilar o css, minificar javascript e etc. Para facilitar essas tarefas, temos essas ferramentas de automação. Existem várias, mas dentre as puramente Javascript e que se tem mais utilizado na área de Front End, temos o Grunt e o Gulp.

Mantenha-se Atualizado

Como já deve ter visto, a área de Front End é uma das que mais se movimenta. Do dia para a noite podem nascer 20 ferramentas novas para você conhecer e aprender. Para você não perder nada de novo que está acontecendo, aconselho muito a seguir as pessoas certas, assinar weeklys e seguir blogs da área. Vou colocar aqui só alguns, porque só dessa parte temos muita coisa!

Pessoas para seguir

Weeklys

Blogs

Eventos

Nada melhor que um bom networking para te ajudar a conhecer mais coisas. E nada melhor que os eventos para isso, além de palestras ótimas, sempre acaba conhecendo alguém para te ajudar no futuro.

Falando nisso, vai rolar o GDG DevFest em BH, se quiser que eu vá, vote aqui

Dicas

Para quem está começando é sempre um pouquinho complicado saber por onde começar, como fazer e o que fazer. Aqui vão algumas dicas que o Vitor Britto deu uma vez na Timeline dele e que eu concordo 110%.

  • Não adianta querer saber tudo em um curto espaço de tempo. Mas saiba que você pode aprender muito com o passar do tempo e se estiver disposto a aprender.
  • Vai com calma, estude no seu tempo, aprecie um tempo de estudo, mas também seu lazer. O mundo não vai acabar se você não conseguir estudar tudo que quer.
  • Se afobar para querer o aprendizado a todo custo é uma péssima ideia. Aprenda na medida do possível, respeitando o seu limite e praticando sempre que puder.
  • Pegue as coisas que você gosta, separe, estude a base daquilo e faça pequenos experimentos, porque a prática leva a perfeição. E se puder, passe adiante o que aprendeu, que será ainda mais recompensado. -Na programação: a leitura vale prata e a prática vale ouro.

Conclusão

É claro que existem outros links, outras coisas para aprender e outros métodos, nossa área é bastante grande. Mas espero que isso já lhe auxilie um pouco nessa longa jornada que é se tornar um desenvolvedor front end.

Para os mais experientes, faltou alguma coisa muito importante que esqueci de falar? Explica aí embaixo nos comentários ou manda um Pull Request, críticas são sempre boas, principalmente para ajudar a quem está começando.

Fontes