Qual perfil de um front-end engineer
A proposta deste artigo é explicar um pouco o papel e o conhecimento necessário para ser denominado Front-end Engineer, visto que não existe uma formação especifica para essa classe de profissional.
Para começar a explicar, apresento o diagrama abaixo de Jesse James Garret’s JJG Elements of UX). O diagrama apresenta as áreas de conhecimentos para cada profissional. Vamos focar somente no UI Developer (Frontend Engineer).
O UI Developer é o perfil mais próximo do Front-end Engineer e ele precisa ter conhecimentos em diversas áreas do produto e engenharia. O que ocorre é que geralmente as empresas tendem a entender que somente precisam conhecer HTML / CSS / JS, o que é um erro, visto que o desenvolvimento de uma interface de usuário exige diversos conhecimentos de engenharia. Na prática, essa confusão é causada por falta de conhecimento da pessoa que está recrutando e da empresa que não tem clareza do que ela precisa de fato.
Empresas que trabalham com SPA (Single Page Application), necessitam de um Front-end Engineer, pois, projetar uma aplicação pensando em arquitetura de componentes, fluxos de dados, e infra-estrutura de desenvolvimento com integração continua são conhecimentos de engenharia. Fora outros conhecimentos não tão aprofundados, necessários para oferecer uma boa experiência para o usuário como: usabilidade, ergonomia, organização das informações, etc.
É importante ressaltar que esse é um profissional para trabalhar em grandes projetos com arquitetura de front-end complexa, é de longe o desenvolvedor necessário para trabalhar em uma Agência Digital, por exemplo.
Pensando nesse problema, elaborei um guia para ajudar a identificar esse profissional.
Como as empresas enxergam o perfil do front-end?
- Pegar um arquivo de Photoshop, imagem ou Wireframe e torná-lo em uma página da web.
- Às vezes criar um design no Photoshop, imagem ou Wireframe.
- Programar JavaScript, que cria animação e faz transições de uma página web.
- Programar HTML e CSS para definir o conteúdo e estilo de uma página web.
Qual o perfil de um front-end?
- A partir de um layout em imagem, definir um conjunto de componentes que representam o conteúdo, marca, recursos, etc.
- Estabelecer um guia para a aplicação Web como convenções, frameworks, requisitos, linguagens visuais e especificações.
- Definir o escopo do aplicativo Web como dispositivos, navegadores, telas e animações.
- Desenvolver uma diretriz de Garantia de Qualidade para garantir a fidelidade da marca, a qualidade do código.
- Estilo de aplicações Web com espaçamentos adequados, tipografia, títulos, fontes, ícones, margens, preenchimentos, grids e assim por diante.
- Estilo de aplicações Web com várias resoluções de imagens, mockups para dispositivos, enquanto cuida de diretrizes de design.
- Código HTML, tendo em conta a semântica, acessibilidade, SEO, schemas e microformats.
- Conectar uma API para recuperar informações de maneira amigável.
- Desenvolver código do lado do cliente para executar animações, transições, lazy load, interações, fluxos de aplicativos, observando otimização progressiva e compatibilidade reversa com versões anteriores.
- Certificar que as conexões de back-end são seguras, através de Cross Origin Resource Sharing (CORS), procedimentos, proteção contra Cross Site Scripting (XSS) e Cross Site Request Forgery (CSRF).
Como identificar um front-end não compatível com esse perfil?
- Abuso de bibliotecas JavaScript, uma vez que eles não sabem realmente como funciona o Javascript (por exemplo, jQuery para tudo).
- Abuso de Plugins Javascript, usando o código de outras pessoas sem ser capaz sequer de lê-lo.
- Adicionar Frameworks CSS nas aplicações (Bootstrap, Fundação, Skeleton) para utilizar apenas 5% do CSS / JS, sem olhar quaisquer requisitos, projetos, ou fazer qualquer tipo de comparação/avaliação.
- Divulgar a ideia de que só porque você adicionou um Framework CSS, um site é “Responsivo”, ou que a responsividade é algum tipo de tempero que você pode simplesmente jogar em uma aplicação web a qualquer momento.
- Falam sobre “Responsive Web Design”, mas sem conhecimento de técnicas do lado do servidor.
- Escreve, CSS sem convenções, pre-processadores, padrões de nomenclatura, boas práticas, e, ao mesmo tempo, escrevendo CSS com muitos seletores qualificados, ids, !important.
- Ignorando performance, vazamentos de memória (não sabem o que é realmente um vazamento de memória), deixando de auditar o seu código ou medi-lo.
- Apresentar um produto sem qualquer tipo de métricas, ou as métricas sendo “Ele funciona no meu computador / Browser / Device”
- Na prática, criando software ignorando 30 anos de Engenharia de Software.
O que o front-end experiente deve saber?
- Resolução de DNS, o uso de redes de fornecimento de conteúdo (CDN), e desempenho de múltiplos Hostnames nas chamadas de recursos.
- Cabeçalhos HTTP (Expires, Cache-Control, If-Modified-Since)
- Todas as regras do Steve Souders (Websites de alto desempenho)
- Como resolver todos os problemas mostrados pelo PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline.
- Quando deixar tarefas para o servidor ou para o browser.
- Uso de cache, técnicas de pre-fetching e post-load.
- Javascript nativo, saber quando fazer algo a partir do zero, procurar o código de outros, e ao mesmo tempo, ser capaz de avaliar os prós e os contras de usá-los.
- Conhecimento e uso de bibliotecas modernas MVC Javascript: AngularJS, EmberJS, ReactJS
- Conhecimento e uso de bibliotecas gráficas: D3, SnapSVG
- Conhecimento e uso de bibliotecas de manipulação do DOM: jQuery, Zepto
- Conhecimento e uso de bibliotecas de lazy loading: RequireJS, CommonJS
- Gerenciadores de tarefas com Grunt ou Gulp
- Gerenciadores de pacotes: Yarn, NPM, Componentjs
- Testes: Protractor, Selenium, QUnit, Jasmine
- Formatos de imagem, benefícios, quando usar cada um e como, técnicas de otimização de imagem e estratégias de carregamento (sprites, técnicas de carregamento lento, limpeza de cache, PNG entrelaçado)
- Conhecimento e uso de padrões CSS, convenções e estratégias modernas (por exemplo, BEM, SMACSS, OOCSS)
- Conhecimento em re-paint e re-flow do browser
- Ciência da Computação do Javascript (memory management, single threaded nature, garbage collector algorithms, timeouts, scoping, hoisting, patterns)
Conclusão
Esse é um guia bastante simplificado, é de longe uma verdade absoluta ou mesmo tende a ser permanente. Levando em conta que esse profissional ainda está se desenvolvendo juntamente com as necessidade do mercado.
E você, o que você acha?