A poucos meses atrás, Comecei a trabalhar num projecto de desenvolvimento de aplicações web com a duração de um ano, e apercebi-me de quantos desenvolvedores não estão bem conscientes das melhores práticas industriais no desenvolvimento front-end de aplicações web. Até eu não estava ciente de algumas práticas também. Então decidi escrever este artigo para compartilhar o que sei e o que aprendi sobre as melhores práticas a seguir ao desenvolver uma aplicação web.

Este artigo irá focar nas melhores práticas de desenvolvimento front-end porque a qualidade do código front-end é o fator mais decisivo de uma grande aplicação web na minha experiência, mas a maioria dos desenvolvedores falham em seguir essas práticas e desenvolver seus componentes individuais. Se os desenvolvedores front-end não seguirem essas práticas, será realmente difícil gerenciar o código, não haverá consistência no design, e a velocidade da aplicação web também terá um impacto negativo. Seguir estas práticas tornará o código mais limpo e fácil de gerenciar, e aumentará a produtividade de todos os desenvolvedores.

Neste artigo, vou falar sobre as melhores práticas a seguir ao estruturar a arquitetura frontend do projeto, escrever código front-end e se preparar para a implantação. Então vamos começar.

Quando você começar a estruturar o projeto, a primeira coisa é estruturar corretamente a arquitetura do front-end do código. E estas são as melhores práticas que cada desenvolvedor front-end do projeto precisa seguir.

Estruturar o código de estilo

Criar pastas separadas para configurações, base, layout, componentes e páginas, dependendo da sua aplicação web. Use um arquivo tipográfico separado para definir tamanhos e cores para todas as tags de texto HTML (como h1,h2,…) usadas no aplicativo web. As cores devem ser definidas em um arquivo de variáveis e atribuir cores a variáveis com nomes adequados e usar essas variáveis quando as cores precisarem ser aplicadas em todo o web site. Inclua estes arquivos de estilo dentro das pastas criadas similar à imagem abaixo.

Você pode então importar estes arquivos para o arquivo de estilo principal. Se você estiver usando scss na sua aplicação web então o arquivo main.scss seria similar ao código abaixo.

Estruturar o código JS

Basicamente, estruturar seu JavaScript significa dividir seus arquivos e separar seu próprio JavaScript do que vem de outros lugares. Plugins, fornecedores e scripts são as três principais pastas em que podemos dividir os arquivos JS. Plugins incluiriam partes de código úteis que usamos em todos os lugares da aplicação web como plugins jQuery, fornecedores seriam códigos JavaScript de terceiros como Frameworks e Bibliotecas como a Slick Library, e a pasta de scripts incluiria os scripts que escrevemos para nossa lógica de aplicação web.