Competência desejaveis para um desenvolvedor FRONT-END

Tempo de Leitura: 12 Minutos

Hoje, a ideia é abordar uma temática diferente, ouço muitas vezes principalmente de pessoas que querem iniciar na carreira de TI, qual o caminho seguir, o que aprender, e a resposta infelizmente é quase sempre a mesma, que depende da área que o desenvolvedor quer atuar e do perfil, já que a área de TI é muito ampla e resolvi falar um pouco sobre 2 grandes grupos, mais voltados a programadores, as diferenças e competências desejadas para o FRONT-END e para o BACK-END.

O desenvolvimento da Web de hoje é completamente diferente do que era há uns 5 ou 6 anos, existem muitas coisas diferentes que podem facilmente confundir qualquer pessoa que esteja entrar no setor. Foi um dos motivos pelos quais decidi fazer esses artigos e dar a qualquer pessoa uma ideia clara sobre o que deve seguir para desempenhar certas funções no desenvolvimento de aplicações voltadas para a web.

Web Development é um campo em constante mudança, veja a nossa forma de construir sites hoje é completamente diferente de como nós costumávamos fazê-lo a cerca de 10 anos atras, existem hoje uma abundância de ferramentas disponíveis e as novas surgindo todos os dias, na maioria das vezes os desenvolvedores ficam confusos sobre o caminho a seguir. Se observar-mos somente o cenário WEB, temos 4 enormes grupos de profissionais que realizam tarefas diferentes entre si e com competências totalmente diferentes, de um lado os profissionais que fazem a parte visual e em contato com o usuário, e de outro profissionais que desenvolvem o lado do servidor, com funções e competências totalmente diferentes.

Neste post, vou abordar especificamente o lado do FRONT-END que é também dividido em basicamente 2 grupos, os profissionais de marketing e desing e os profissionais de desenvolvimento e programação deste ambiente, no artigo, vamos abordar em específico as competências do desenvolvedor, ou seja, linguagens, padrões, boas práticas e fazer algumas isenções de responsabilidade se você decidir seguir esses roteiros para, finalmente, ter uma análise e dicas sobre como aprender e se tornar um moderno desenvolvedor front-end.

Minha Própria Motivação

Antes de começarmos com o artigo, só para dar uma ideia, quando comecei a carreira em desenvolvimento web, na metade dos anos 1990, era comum ser requerido do profissional funções que hoje são chamadas de fullstack ou seja, que envolvem tanto a área de front como a área de back end, onde, não era incomum as duas funções serem misturadas e não existir separação clara de cada uma delas. O desenvolvimento da Web evoluiu muito e rapidamente, e com isso o número de opções disponíveis se escalou rapidamente, principalmente no frontend, o que foi suficiente para confundir qualquer pessoa.

Sou bastante ativo no desenvolvimento de código, e na comunidade de developers, e a pergunta que não quer calar na área desde essa época é “o que devo aprender para seguir na carreira” e uma ideia sobre este artigo se formou, e resolvi escrever uma lista de ferramentas e recomendações técnicas para desenvolvimento web atual.

Isenção de responsabilidade – Isso tudo pode mudar a qualquer tempo

Antes de começar a seguir com este roteiro, tenha em mente, o objetivo é dar uma ideia sobre o panorama e orientá-lo se você estiver confuso sobre o que aprender, não uma lista de coisas que você deve saber para entrar na área ou requisitos para uma vaga ou nada do gênero, você deve compreender por que uma ou outra ferramenta seria mais adequada para o seu caso. E em segundo lugar, pesquise o seu mercado de trabalho, suas competências e suas necessidades, não ignore o fato de que linguagens de programação e ferramentas podem ser muito dependentes do mercado, e que de um momento para outro, podem ser trocados, portanto faça algumas pesquisas sobre o mercado que você está almejando e até mesmo sobre o perfil da empresa que deseja entrar ou desenvolver-se. Em terceiro lugar, você não precisa saber tudo o que está listado aqui para conseguir seu primeiro emprego.

O roteiro pode parecer enorme, mas não deixe que ele assuste você, se for muito iniciante na carreira, a ideia é ir evoluindo na medida de que você começa a amadurecer no mercado de trabalho, e moldar-se as necessidades reais da empresa em que trabalha, ou mesmo, tentar abordar tudo, por alto, para ter noção do que você eventualmente usará no decorrer da sua vida profissional. Você pode aprender o mínimo e continuar aprendendo o resto enquanto começa a construir.

Fase 1 – Criando Seu Primeiro Trabalho (acadêmico ou profissional)

Se você é um iniciante e está apenas começando no desenvolvimento web front-end, basta aprender os itens listados abaixo e você poderá se autodenominar um desenvolvedor web e encontrar um emprego no mercado, que vai ajuda-lo a moldar-se as demais necessidades, ou mesmo fazendo serviços como freelance ou por um projeto específico de trabalho ou de um site. Passe algum tempo estudando ou entendendo bem os itens listados, tenha um domínio sólido sobre todos eles e pratique muito. Faça muitos e muitos projetos, publique-os no GitHub e divulgue seu trabalho.

Idéias e Conceitos

O objetivo desta fase, é fazer você se familiarizar com o seu ambiente de trabalho, realmente criando algo funcional, que te faça entender as demais ferramentas que você precisa aprender, neste ponto, você deve se focar em conhecer a rotina de trabalho, as competências desejadas são, conhecer o que é uma linguagem de marcação como a HTML, sua estrutura, como ela é usada, o porque de cada marcação, e como outras ferramentas como o CSS iteragem com ela, para criar a formatação e mudar a aparência ou os aspectos. Também escolher uma linguagem de script como JavaScript para entender como é feita a iteração com o HTML, permitindo que ele tenha reações.

Neste ponto, tente fazer algo, que te permita ter uma lista de ferramentas, para saber o que você vai carregar junto com você, como um editor de HTML ou editor de código, que permita você editar os arquivos HTML e JAVASCRIPT, e o que suas mudanças impactam na forma como o navegador reage. Também é interessante, aprender como funcionam os versionadores de código, e as ferramentas específicas para a publicação do conteúdo, e que permitam você a ter o controle de suas tarefas, como aplicativos de lista de tarefas, gerenciadores do seu tempo, que te permitam entender exatamente como será seu dia de trabalho real.

As tarefas básicas são, tente criar uma aplicação simples, como um simples cronometro que funciona tanto na tela do computador, como na do celular, e que permita que o usuário possa ter botões para pausar/reiniciar, resetar. Não se preocupe com os aspectos visuais, somente com essa funcionalidade básica. Publique ele no GitHub e se você tiver como publica-lo coloque-o em uma página online de portfólio, lembre-se, use uma ferramenta de edição, use um gerenciador de tempo e uma lista de tarefas, pode parecer desnecessário, mais isso vai ajuda-lo a entender o seu fluxo de trabalho. Depois de fazer isso, aprenda sobre os sistemas de controle de versão, aprenda o uso básico do Git e crie seu perfil no GitHub

Fase 2 – Escreva um CSS melhor

Depois de entender o básico, passe para a próxima etapa e aprenda como escrever o código e personaliza-lo visualmente falando com um CSS sustentável, usando estruturas CSS, e opções que permitam estender esse aplicativo, incorporando-o a outra aplicação maior, como uso de frameworks para o CSS, lembre-se de novamente gerar a lista de tarefas, e seguir um cronograma de trabalho, publicando a sua versão atual. Seu roteiro deve ser semelhante a:

Adicionar o bootstrap ao projetos acima usando npm ou yarn
Converta o projeto que você fez, para usar o padrão de nomes BEM no CSS, utilize o SASS para escrever o CSS o que permite estilizar o seu arquivo de estilização. Automatize a conversão de SASS para CSS usando um script NPM

Essa segunda fase, vai faze-lo entender a necessidade real de usar um padrão, que possa ser entendido por outras pessoas, outros desenvolvedores, isso vai te fazer entender o conceito de reusabilidade, de independência e como o seu trabalho vai ser parte de algo maior, algo que pode ser composto por um enorme leque de funcionalidades. Sem dúvida, essa segunda etapa é que vai ser um grande diferencial na sua carreira profissional, portanto, deve ser a etapa que mais atenção aos detalhes você deve ter.

As tarefas, são extender seu cronometro, por exemplo adicionando a funcionalidade de relógio a ele, para que possa ser reutilizado em diversos projetos, atendendo aos recursos mais usuais de integração e gerenciamento das dependências, afim de poder executar inteiramente em qualquer aplicação.

Fase 3 – Aumentando Recursos e Evoluindo

Esta fase levará algum tempo e é nela que seu foco no desenvolvimento de front-end moderno vai ser focado, estes são os recursos que vão ocupar a maior parte do seu tempo como desenvolvedor, e eleva-lo a um patamar intermediário, que permite a você dominar facilmente qualquer nova ferramenta que esteja surgindo no mercado. Vá em frente e aprenda mais sobre o JavaScript, com uso de frameworks e conceitos mais avançados. Aprenda o que é Webpack, entenda os diferentes conceitos e por que ele é necessário, entenda os conceitos de babel, por que o usamos e aprenda como se integrar com o webpack e, por último, aprenda como seu código se porta ao usar ESLint, para refatorar e analisar seu código, fazendo-o seguir as melhores práticas.

Todos os itens listados nesta fase giram em torno do webpack, e no deploy e compartilhamento da sua aplicação, depois de concluir, você vai passar a entender não só as aplicabilidades do FRONTEND na web, mais também em outras plataformas como computadores, dispositivos mobile e diferentes versões da sua aplicação em diversos formatos diferentes.

Tarefas
Crie um pacote npm do seu aplicativo, que deve ser utilizável no navegador, empacote-o com o webpack, use o babel para transpilá-lo e use ESLint para linting. Use SASS para CSS, adicione bootstrap para estilos, use BEM, crie um build de produção otimizado e implante-o.

Fase 4 – Crie Aplicativos de front-end modernos

O próximo passo é aprender sobre alguns frameworks de front-end. Existem várias opções, mas as mais comumente usadas atualmente são React, Angular e Vue. Por indicação pessoal, prefira react, depois dê uma olhada no redux e depois aprenda sobre CSS em JS, dê uma olhada nos componentes estilizados e nos módulos CSS, se desejar.

Depois de aprender a reagir, vá em frente e leia sobre os aplicativos da Web progressivos dê uma olhada na lista de verificação do PWA, leia sobre Service Workers, medição de desempenho, uso de lighthouse e observe as diferentes APIs de navegadores que você pode usar a seu favor, por exemplo, Armazenamento, localização, notificações, orientação do dispositivo e pagamentos. Leia também sobre o modelo RAIL e o padrão PRPL.

Pratique o que aprendeu, desenvolva a aplicação para se integrar a uma API, trazendo as ultimas novidades do tweeter ou facebook, crie uma grade de notícias e clima como a grade do trello. Implemente uma funcionalidade de alerta a cada slice de tempo de 25 minutos, para que funcione como um pomodoro, e que no intervalo de 5 minutos mostre as ultimas atualizações das redes sociais.

Fase 5 – Testes Automatizados

Aprenda a escrever testes automatizados para seus aplicativos, isso vai lhe poupar muitas dores de cabeça no futuro e vai colocá-lo em uma posição melhor quando estiver procurando por um emprego. Antes de mais nada, vá em frente e aprenda quais são os diferentes tipos de teste, diferentes conceitos como mocking, stubs, etc. Depois, aprenda Jest, Enzyme e Cypress de uma maneira respectiva e aprenda a calcular a cobertura dos testes.

Para as tarefas, escreva testes de unidade, integração e funcionais para os aplicativos que você criou até agora.

Fase 6 – Verificação de Tipo Estático

Os verificadores de tipo permitem que você torne seu código mais sustentável à medida que ele cresce, aumenta a agilidade na refatoração, fornece melhor suporte nos IDEs e é a melhor forma de documentação que você pode ter. Existem principalmente Flow e TypeScript neste ponto, no entanto, TypeScript vem ganhando muito espaço.

Quando terminar de aprender o TypeScript, vá em frente e converta qualquer um de seus aplicativos JavaScript existentes para usar o TypeScript.

Fase 7 – Renderização do lado do servidor

Os aplicativos renderizados pelo servidor permitem obter melhor desempenho e SEO aprimorado em comparação com os aplicativos renderizados pelo cliente. Embora não seja um requisito, ele definitivamente o ajudaria a criar melhores aplicativos de front-end. Existem diferentes opções disponíveis, com base na estrutura de frontend de sua escolha e o mais atual é o Next.js, o que torna o SSR muito mais fácil.

Para as tarefas, converta quaisquer aplicativos que você fez acima para serem renderizados no lado do servidor usando Next.js

Fase 8 – Para o Futuro e Além…

Desculpe o trocadilho, mais é bem por ai, neste ultimo estágio de seu aprendizado, tudo o que é mostrado é opcional e não é realmente necessário para você, mas se quiser experimentá-los, vá em frente e dê uma olhada. Observe que, por uma questão de brevidade, não explorei todas as possibilidades, e se você chegou a este nível, provavelmente já trabalha na área e sabe toda a pilha tecnológica que você quer e que você precisa.

Pode haver coisas faltando no mei da lista, mas isso é tudo o que você precisa para qualquer função de “Desenvolvedor de front-end”, lembre-se de que a chave é praticar o máximo que puder e que pode parecer muito assustador no início, mais por serem tecnologias evoluídas de um ponto comum, toda a pilha é basicamente dependente de um passo anterior para o próximo e você sentirá que a curva de aprendizado diminui com o tempo, isso é normal e você sente que está ficando cada vez melhor.

Não se esqueça de pedir ajuda se você estiver travado em algum ponto, você ficará surpreso com quantas pessoas estão dispostas a ajudar, e o quanto a comunidade de desenvolvedores neste ponto é bem receptiva, principalmente se você demonstrar que já está tentando e esta travado em um erro.

Ficar sempre atendo aos novos surgimentos, é também uma necessidade não só para as tendências do front-end como para qualquer trabalho na área de TI, e a cada dia que passa o mercado vem exigindo mais aprimoramento de cada profissional, como disse no inicio, antes era comum a profissão de desenvolvedor, hoje essa profissão ganhou dezenas de especializações, e mais atualmente, essas especializações estão se dividindo e se especializando ainda mais, veja o exemplo hoje já temos vagas de front-end especialista em um modelo de negócios como Aplicativos Móveis, sites, desktop. Profissionais especializados em marketing vem cada vez mais trabalhando junto com desenvolvedores e a tendência não para de cada vez mais encontrar profissionais altamente especializados em um ou em outro segmento.

Lembre-se, da mesma maneira que um Médico Cardiologista, tem que conhecer detalhes do funcionamento cardíaco dos pacientes, ou que um Advogado Criminalista deve conhecer todo o código penal, um desenvolvedor front-end deve conhecer toda a pilha tecnológica do seu segmento. Porém, o médico cardiologista, também tem conhecimentos de clinica, e o advogado criminalista tem conhecimentos gerais do funcionamento das leis e do direito, isso se aplica ao profissional de desenvolvimento, que deve ter conhecimentos gerais sobre outras áreas que não as de sua especialidade.