# BFB 2: seu próximo boilerplate front end > Conheça o BFB 2: seu próximo boilerplate front-end moderno. Parcel, ITCSS e hot reloading para base profissional com zero configuração. Comece rápido! URL: https://dpw.dev/indicacoes/bfb2-boilerplate-front-end/ Publicado em: 2022-06-03 Categoria: indicacoes Tags: ferramentas Autor: Tárcio Zemel Quem acompanha o blog e [nosso canal do YouTube](https://www.youtube.com/c/dpwoficial) 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: [Vídeo no YouTube](https://www.youtube.com/watch?v=qf1Qa6CLwaU) ## 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**](https://parceljs.org/), 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 ![Esquema do Triângulo Invertido da arquitetura ITCSS (que também faz parte do nosso boilerplate front end).](/images/blog/bfb2-boilerplate-front-end/itcss-300x247.webp) 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 ![Logo do pré-processador CSS Sass.](/images/blog/bfb2-boilerplate-front-end/sass-logo.webp) A implementação de ITCSS é possível através do melhor pré-processador de CSS, **[Sass](https://sass-lang.com/)**. 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 ![Logo PostCSS.](/images/blog/bfb2-boilerplate-front-end/postcss-300x300.webp) [**PostCSS**](https://postcss.org/) é 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](https://www.npmjs.com/package/postcss-pxtorem) (conversão automática de `px` para `rem`) e [postcss-cascade-layers](https://www.npmjs.com/package/@csstools/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`): ``` "@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](https://editorconfig.org/) ([temos vídeo](https://youtu.be/bU3qLfszKZ4)) - [Prettier](https://prettier.io/) - [Stylelint](https://stylelint.io/) - [webhint](https://webhint.io/) - [Conventional Commits](https://www.conventionalcommits.org/pt-br/v1.0.0/) - [Versionamento Semântico](https://semver.org/lang/pt-BR/) - [Semantic Release](https://github.com/semantic-release/semantic-release) Quando você for [contribuir com o BFB](https://github.com/desenvolvweb/basic-front-boilerplate/), 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! --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml