Se você está começando no mundo do desenvolvimento front-end e está procurando materiais, pode ficar confuso com a quantidade de nomenclaturas, tais como React, Next, Webpack, NPM, Yarn, Bootstrap e muitas outras. Realmente, há muitas tecnologias envolvidas nesse processo, mas esta página tem como objetivo esclarecer um pouco mais sobre cada uma delas.

Assim como no desenvolvimento de backend, o front-end também está se tornando cada vez mais complexo e exigente. Para criar aplicações maiores e mais poderosas, pode ser necessário utilizar várias bibliotecas e frameworks, assim como no desenvolvimento de backend.

Procura por materiais de Backend? Busque aqui: Guia Backend.

Ferramentas de Build (Build Tool)

As ferramentas de build servem para facilitar a instalação de dependências, comandos necessários para testes, execução ou publicação, por exemplo. As soluções mais utilizadas são:

Outros exemplos apenas a título de curiosidade são o BIT, GRUNT e o GULP.

Empacotador (Module Bundler)

Além do processos de build em si, há algumas ferramentas mais especializadas para as ações de build, execução e publicação, como compactar recursos (como estilos e scripts), disponibilizar recursos estáticos, além de permitir a separação da aplicação em módulos. Algumas das ferramentas utilizas:

Outras ferramentas semelhantes: Browserify, Rollup e o Turbopack.

Comparando com o backend, no caso do mundo Java, não existe esse tipo de ferramenta pois essas ações normalmente são feitas pelo próprio Build Tool (Gradle/Maven).

Frameworks/Bibliotecas de Construção de Interfaces

Somente aqui vemos ferramentas como o React aparecer. Como uma biblioteca de renderização de componentes para a web, ele funciona integrado ao código de forma a permitir a criação e renderização de páginas e partes da página de forma dinâmica e componentizada. Ou seja, podemos ter uma aplicação com NPM+Webpack+React ou YARN+Browserify+React se assim quisermos.

Vamos ver alguns dos frameworks e bibliotecas mais conhecidos:

Você também pode desenvolver utilizando apenas JavaScript (chamado de VanilaJS).

Outras bibliotecas e frameworks

Apenas para ajudar por onde começar, listamos alguns projetos interessantes que valem um estudo:

Componentes e plugins para criação de interfaces:

Entre outros.

Para escrita de Testes:

Ferramentas “tudo-em-um”

Há algumas ferramentas que se propôe a simplificar toda essa complexidade que é a criação e configuração dos projetos de frontend tornando a criação simples e auto-configurada.

Destacamos essas que merecem atenção:

  • Create React App - Forma clássica de obter um projeto React com as configurações necessárias com poucos passos.

  • NextJS - Framework que traz todas as funcionalidades necessárias para uma aplicação React de forma auto-configurada, tanto para renderização no navegador, como código estático, quanto para renderização no servidor, com NodeJS.

  • NuxtJS - Abstração que também foca em simplicidade de configuração para aplicações VueJs.

Conclusão

Espero que este material tenha te ajudado a entender um pouco mais sobre as ferramentas e siglas utilizadas no Frontend. Deixe seu comentário com sugestões ou contando sua experiência estudando Frontend :)

Outros materiais

Para outros materiais de Frontend, acesse aqui: Tag Frontend