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?

1. Pegar um arquivo de Photoshop, imagem ou Wireframe e torná-lo em uma página da web.
2. Às vezes criar um design no Photoshop, imagem ou Wireframe.
3. Programar JavaScript, que cria animação e faz transições de uma página web.
4. Programar HTML e CSS para definir o conteúdo e estilo de uma página web.

Qual o perfil de um front-end?

1. A partir de um layout em imagem, definir um conjunto de componentes que representam o conteúdo, marca, recursos, etc.
2. Estabelecer um guia para a aplicação Web como convenções, frameworks, requisitos, linguagens visuais e especificações.
3. Definir o escopo do aplicativo Web como dispositivos, navegadores, telas e animações.
4. Desenvolver uma diretriz de Garantia de Qualidade para garantir a fidelidade da marca, a qualidade do código.
5. Estilo de aplicações Web com espaçamentos adequados, tipografia, títulos, fontes, ícones, margens, preenchimentos, grids e assim por diante.
6. Estilo de aplicações Web com várias resoluções de imagens, mockups para dispositivos, enquanto cuida de diretrizes de design.
7. Código HTML, tendo em conta a semântica, acessibilidade, SEO, schemas e microformats.
8. Conectar uma API para recuperar informações de maneira amigável.
9. 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.
10. 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?

1. Abuso de bibliotecas JavaScript, uma vez que eles não sabem realmente como funciona o Javascript (por exemplo, jQuery para tudo).
2. Abuso de Plugins Javascript, usando o código de outras pessoas sem ser capaz sequer de lê-lo.
3. 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.
4. 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.
5. Falam sobre “Responsive Web Design”, mas sem conhecimento de técnicas do lado do servidor.
6. 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.
7. 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.
8. Apresentar um produto sem qualquer tipo de métricas, ou as métricas sendo “Ele funciona no meu computador / Browser / Device”
9. Na prática, criando software ignorando 30 anos de Engenharia de Software.

O que o front-end experiente deve saber?

1. Resolução de DNS, o uso de redes de fornecimento de conteúdo (CDN), e desempenho de múltiplos Hostnames nas chamadas de recursos.
2. Cabeçalhos HTTP (Expires, Cache-Control, If-Modified-Since)
3. Todas as regras do Steve Souders (Websites de alto desempenho)
4. Como resolver todos os problemas mostrados pelo PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline.
5. Quando deixar tarefas para o servidor ou para o browser.
6. Uso de cache, técnicas de pre-fetching e post-load.
7. 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.
8. Conhecimento e uso de bibliotecas modernas MVC Javascript: AngularJS, EmberJS, ReactJS
9. Conhecimento e uso de bibliotecas gráficas: D3, SnapSVG
10. Conhecimento e uso de bibliotecas de manipulação do DOM: jQuery, Zepto
11. Conhecimento e uso de bibliotecas de lazy loading: RequireJS, CommonJS
12. Gerenciadores de tarefas com Grunt ou Gulp
13. Gerenciadores de pacotes: Yarn, NPM, Componentjs
14. Testes: Protractor, Selenium, QUnit, Jasmine
15. 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)
16. Conhecimento e uso de padrões CSS, convenções e estratégias modernas (por exemplo, BEM, SMACSS, OOCSS)
17. Conhecimento em re-paint e re-flow do browser
18. 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?