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.
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 :)