# Basic Front Boilerplate (BFB) > Conheça o BFB: boilerplate front-end com Parcel, arquitetura profissional e zero configuração. Ideal para tutoriais e projetos rápidos com ES6. URL: https://dpw.dev/indicacoes/basic-front-boilerplate-bfb/ Publicado em: 2020-01-06 Categoria: indicacoes Tags: ferramentas Autor: Tárcio Zemel [Vídeo no YouTube](https://www.youtube.com/watch?v=Uoch-xwx1yU) No [canal de YouTube do dpw](https://www.youtube.com/c/dpwoficial), neste ano de 2020 queremos voltar às raízes, colocando mais tutoriais de codificação e dicas de código e indicações em geral -- mesmo correndo o risco de sentir um pouco de vergonha alheia, você pode consultar os vídeos antigos do canal para ver do que estamos falando. Pensando a este respeito, principalmente em como temos percebido que muitas pessoas gostam de ter acesso a códigos de exemplos (por mais simples que sejam), começamos a pensar em uma maneira de tornar essa disponibilização de códigos simples e eficiente. Foi então que nasceu o **Basic Front Boilerplate**, ou, como será mais conhecido, **BFB**. ## O que é o BFB? Existem muitas maneiras de se preparar um repo reutilizável hoje em dia. Inclusive, algumas soluções populares com arquivos de configuração que demandam dezenas de linhas para projetos singelos... Mas, a fim de disponibilizar os códigos de nossos tutoriais de maneira bem simples, criamos um repo no GitHub que servirá de template para nossos tutoriais de código webdev. Este é o [BFB](https://github.com/desenvolvweb/basic-front-boilerplate/). Trata-se de uma estrutura modesta, rodando com um bundler bem levinho, que garantirá que todos possamos nos valer de características de webdev moderno e uma arquitetura mais profissional. Ser pequeno não significa ser desleixado ou mal feito, certo? ## Características do BFB Dentre as diversas possibilidades para montar um repo para este fim, escolhemos o [Parcel](https://parceljs.org/), que é um bundler muuuito rápido, que demanda zero configuração para rodar. Isso mesmo: _zero configuração_! O danadinho é esperto e (até certo ponto) robusto, conseguindo lidar com diversos tipos de demandas de desenvolvimento web moderno -- incluindo automatic transforms, code splitting e HMR. Apesar de o BFB ser focado mais em HTML e CSS, não seria possível deixar de lado o queridinho da rapeize, o JavaScript. Então, também contamos com todas as características de JS moderno que o Parcel oferece. Neste caso, temos como características principais do BFB: - Funciona à base de Parcel - JavaScript moderno (ES6 de braçada) - Arquitetura profissa (nóis que fez) - Ideal para tutoriais e projetos rápidos (sim, já o testamos em campo) Na arquitetura, organizamos com uma versão modificada de [SMACSS](http://smacss.com/), usando convenções de código como [BEM](http://getbem.com/) e [Namespaces CSS](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/), com um mínimo de padronização de códigos usando [EditorConfig](/indicacoes/editorconfig-padronizacao-estilo-codigo/). Isto é, é uma arquitetura moderna, que usa convenções internacionais que temos abordado e ensinado já há algum tempo. ## BFB lvl up! Como uma ferramenta open source de qualidade, a ideia é manter o Basic Front Boilerplate sempre atualizado e consonante às melhores práticas e tecnologias. Assista ao vídeo mostrando a primeira atualização que o BFB recebeu: [Vídeo no YouTube](https://www.youtube.com/watch?v=63fn3G1d7rw) ## A gente se vê pela Web em 2020! Apesar de ainda estarmos nos organizando e não termos uma agenda já definida de tutoriais, não tenha dúvidas sobre nossas intenções de, mais uma vez, oferecer material de webdev de qualidade e aumentar ainda mais nossa participação na comunidade. Inclusive, se você tiver ideias e/ou preferências de tutoriais e conteúdos a serem abordados, suas sugestões serão muito bem vindas. Por favor, comente abaixo. Aconselhamos que [se inscreva no canal YouTube do dpw](https://www.youtube.com/channel/UCdHcHgSrWidiOg-mNFNB1Nw?sub_confirmation=1) para não perder as novidades e a gente se vê pela Web em 2020! --- 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