Vamos falar de produtividade no desenvolvimento front-end?

Nos últimos meses resolvi aceitar um desafio profissional parecido e diferente ao mesmo tempo, é parecido porque aceitei voltar a encarar o desenvolvimento e manutenção de um produto, e, diferente porque resolvemos adotar de medidas que nos gerassem uma maior produtividade para conseguir fazer entregas mais rápidas e com melhor qualidade.

Algumas decisões em questão de gerencia de projeto foram tomadas já pensadas em permitir que o projeto receba mudanças e ainda consiga efetuar entregas periódicas.

A adoção do Scrum para desenvolvimento de produtos é uma, na minha visão, das melhores decisões, permitindo que mudanças sejam implementadas ao decorrer do projeto e ainda ajuda que os erros sejam captados mais rápidos e corrigidos.

Para falar das decisões técnicas, resolvi me dedicar, neste artigo, apenas à aquelas que afetam a vida do desenvolvedor front-end, pois são as que são aplicadas ao meu cotidiano.

Com o objetivo de padronizar o projeto, existiu a necessidade da criação de um Styleguide, este contendo todos os componentes usados durante o site e com o código de exemplo que pode ser aplicado em qualquer página, sendo que, este deve ser seguido para não fugir do padrão e manter a consistência do projeto.

Antes de explicar em detalhes como funciona o Styleguide, vamos a algumas decisões mais técnicas e o porque delas:

• SASS: A importância de um processador pode não parecer, em primeiro momento, a mais eficiente, porém, quando se está em um projeto grande, a produtividade aumenta e muito. Um dos principais ganhos ao se utilizar do SASS é a possibilidade de se usar variáveis, e, junto delas, fazer cálculos, utilizar mixins e algumas outras características.
• Gulp: No primeiro momento, antes da adoção de um framework, um gerenciador de tarefas para se utilizar de alguns recursos como templates, live reload, compilação do sass e minificação dos arquivos nos permite ganhar uma agilidade no desenvolvimento e centralizar muitas atividades que, normalmente ou seriam feitas manualmente ou com a utilização de múltiplos recursos.
• File Include: Esta biblioteca do Gulp nos permitiu criar templates que podem ser inseridos nas páginas e manter a padronização do nosso código sem a ajuda de um framework.
• BEM: Esta é uma convenção para nomenclatura de classes e id’s do código, o que permite que todos os desenvolvedores sigam a mesma lógica na criação do código, ajudando que, quando entrar um novo integrante na equipe, o custo para entender o que já foi construído seja menor e a semântica seja mantida.
• Bootstrap 3: Um dos maiores frameworks CSS que existem na atualidade, porém, para que ele atendesse as nossas necessidades, muitas coisas foram alteradas, como, por exemplo, o número de colunas. Porém, a lógica dos nomes de classes foi mantida a do Bootstrap, sendo assim, você pode utilizar as colunas, botões e todos os componentes como a versão original, mas, o resultado final, sofre algumas adaptações. A escolha também da versão 3 foi feita porque, a versão 4, que até o momento se encontra em alfa, utiliza de flexbox, e, como o suporte de nosso projeto inclui o Internet Explorer 9, não foi possível a adoção desta versão.

Depois de entender um pouco as decisões técnicas fica mais fácil de entender o porque isso ajuda a manter um Styleguide e uma consistência durante toda a construção do projeto.

Em nosso styleguide é possível encontrar todos os padrões de fontes e cores que podem ser utilizados em todo o projeto, e, se algo diferente disso aparecer, não está certo e deve ser revisto. Veja um exemplo:

<h1 class=”font_large_title--bold color_primary--darken”>Large Title</h1>

O mesmo serve para os componentes, por exemplo, em todo lugar que existir um button, o código deve ser o mesmo, sendo assim, o tamanho, espaçamento e cor sempre será consistente em todo o site e o seu usuário não ficará perdido quando encontrar o componente em qualquer página do seu projeto. Veja um exemplo:

<button class=”btn btn--large btn--primary”>Click me</button>

Com a utilização de template é possível manter a padronização dos elementos que se repetem na página, um dos exemplos mais clássicos é o rodapé, você pode criar em um arquivo separado e depois apenas incluir nas páginas internas, veja um exemplo da inclusão considerando o file include:

@@include(‘footer.html’);

Uma escolha da equipe também é a construção de todo o código em inglês, exceto o conteúdo que o usuário visualiza, sendo assim, todas as classes e id’s, como exemplo, devem ser escritas em inglês, inclusive, todos os exemplos neste artigo já seguem este padrão.

É claro que problemas podem existir em todos os projetos e em todas as etapas dele, inclusive problemas de relacionamento entre a equipe, porém, o que procurei abordar aqui foram maneiras de auxiliar no ganho de produtividade de desenvolvimento do projeto.

Espero que este artigo ajude a quem estiver procurando métodos de desenvolver um projeto com mais qualidade e em menos tempo. Que todos consigam entregar seus projetos com SUCESSO.