Quem acompanha o blog e nosso canal do YouTube sabe que temos um boilerplate front end, o Basic Front Boilerplate (ou BFB, para os íntimos). Recentemente, lançamos sua nova versão: BFB 2.
A princípio, ele é um boilerplate front-end indicado para para projetos de teste e estudos, mas como você verá, certamente ele não está restrito a estes cenários. ;)
O conteúdo textual deste artigo tem informações completas sobre o BFB 2, mas assista também ao nosso vídeo de lançamento:
O que é o BFB 2
BFB é nosso Basic Front Boilerplate, que lançamos há alguns anos e o estamos evoluindo com o tempo.
Neste contexto, “boilerplate” significa uma base pronta para ser usada ao iniciar um projeto frontend; uma estrutura já pensada e elaborada com features para facilitar o início de um novo projeto.
Então, o BFB 2 é isso: a evolução do boilerplate front-end aqui do dpw para facilitar o início de projetos de teste e estudos (e talvez algo a mais).
O objetivo do BFB, como sugere o próprio nome, é ser um boilerplate básico para projetos front end.
Então, uma de nossas preocupações é manter essa “filosofia” e conservar sua característica de ser “básico” — lembrando que é possível ser básico e robusto ao mesmo tempo.
Features do BFB 2
Nessa atualização major do BFB, optamos por continuar com o Parcel, que é uma da melhores build tools que temos disponível atualmente.
Então, de cara, todas as centenas de features que o Parcel oferece, também já estão presentes no BFB. Só para citar algumas:
- Servidor local. Servidor de desenvolvimento local com opções para HTTPS e proxy de API;
- Hot Reloading. Quando uma alteração é feita, acontece atualização automática do código no navegador sem a necessidade de recarregar a página (suporte a React Fast Refresh e Vue Hot Reloading API);
- Absurdamente Rápido. Arquitetura multi-core que paraleliza todos os trabalhos, uso pesado de cache e lazy dev builds para tudo ser feito em milissegundos;
- Diagnósticos de Erro. Quando ocorrer erros no código ou configuração, ocorre a exibiçcão de belos diagnósticos no terminal e navegador (incluindo apontamento para o local do erro e dicas de como corrigir o problema);
- Otimização para Produção. Tree-shaking e minificação de JavaScript, CSS e HTML, redimensionamento e otimização de imagens, content hashing, code splitting e muito mais.
Por cima dessa base vigorosa, adicionamos features e convenções que tornam o BFB único e ideal para iniciar proejetos front end.
ITCSS
Por padrão, o BFB já conta com uma das melhores arquiteturas CSS: Inverted Triangle CSS (ou ITCSS).
ITCSS é uma arquitetura idealizada para CSS estruturado e escalável que ajuda a organizar o código de uma maneira muito eficiente e profissional.
O objetivo de ITCSS é ser uma Arquitetura boa o suficiente para organizar os arquivos de forma a evitar problemas causados pela Cascata e Especificidade de CSS.
Sass
A implementação de ITCSS é possível através do melhor pré-processador de CSS, Sass.
O Sass meio que dispensa apresentações, então, fica só a observação de que o BFB já usa a nova sintaxe de módulos com @use/@forward.
Ou seja, com o BFB, você tem uma das melhores arquiteturas CSS através do melhor processador em sua sintaxe mais atual.
PostCSS
PostCSS é uma ferramenta para transformar CSS através de plugins. O Parcel já oferece suporte equivalente a algumas funcionalidades dele, mas o PostCSS é útil para transformações CSS mais personalizadas.
Esse suporte significa que no BFB é possível se trabalhar com PostCSS à vontade através da instalação e configuração de plugins.
Por exemplo, o BFB já vem de fábrica com 2 excelentes plugins PostCSS: postcss-pxtorem (conversão automática de px para rem) e postcss-cascade-layers (para usar CSS Cascade Layers hoje).
Somente o postcss-pxtorem está ativado por padrão; caso queira usar CSS Cascade Layers, você deve adicionar no arquivo .postcssrc na raiz do projeto (dentro do nó plugins):
|
1 |
"@csstools/postcss-cascade-layers": true, |
Mas estes são somente os plugins do PostCSS que, atualmente, decidimos colocar no BFB por padrão. É possível adicionar e configurar quaisquer outros que sejam necessários.
Qualidade de código
Um código bem feito deve seguir padrões e convenções; deve ter qualidade e parecer que foi escrito por uma só pessoa. E não seria diferente em nosso boilerplate front end.
Pensando nisso, o BFB implementa formatadores e linters, além de convenções de commit e base de códigos usadas no mundo todo:
- EditorConfig (temos vídeo)
- Prettier
- Stylelint
- webhint
- Conventional Commits
- Versionamento Semântico
- Semantic Release
Quando você for contribuir com o BFB, deve seguir um formato específico de mensagem de commit (Conventional Commits), porque sempre que uma nova versão for lançada, o versionamento (e o changelog de mudanças) é feito automaticamente.
Mas se você não formatar sua mensagem de commit direitinho, não se preocupe, há ferramentas integradas que nem deixarão o commit ser feito caso ele não siga as convenções.
E muito mais…
O BFB tem muitas outras features — “macro” e “micro” –, mas deixaremos um certo suspense para que você explore o código e descubra por si só.
Sempre que julgamos conveniente, colocamos comentários com fontes e referências com explicações adicional e/ou tutoriais sobre as decisões e códigos implementados.
Nosso intuito é, além de fornecer um excelente boilerplate para projetos front end, que quem o use aprenda desenvolvimento web durante o processo.
Conclusão
Tendo como principal função ser um boilerplate front end para projetos de teste e estudos, o BFB também não decepciona em cenários do mundo real.
Esteja você procurando estudar front end, fazer alguns testes ou querendo usar um boilerplate básico, mas robusto, para projetos a sério, considerar o BFB é uma escolha bastante sensata.
Seu projeto contará com tecnologias e convenções modernas, linters, formatadores, possibilidades de expansão, ambiente local rápido e otimizado e um build de muita qualidade.
Acesse o repo do BFB, favorite, faça seu fork e envie suas PRs para continuarmos melhorando esse garotinho!