Front-End tools: Entendendo como tudo funciona
Introdução
Trabalho com Front-End desde 2019 (como desenvolvedor desde 2017) e um dos assuntos que muita gente (inclusive eu, por um bom tempo) acaba não dando tanta atenção é tentar entender como funciona o build das nossas aplicações Front-End. Você já parou para pensar como ferramentas como create-react-app (deprecated), vite e nextjs conseguem transformar o código que você construiu, modularizado e com TypeScript, em algo que o browser consegue entender? Sim, todas essas ferramentas oferecem um comando de build que pega sua aplicação e a converte para um código compatível com diferentes ambientes e navegadores. Minha ideia é montar uma série de posts sobre ferramentas essenciais que surgiram ao longo dos últimos anos para resolver problemas comuns em aplicações Front-End. A ideia não é apenas mostrar para que servem e como configurá-las, mas sim entrar em detalhes sobre o funcionamento interno dessas ferramentas.
Abaixo, os assuntos que serão abordados:
Transpiladores | Estudo de caso: Babel
Nesse primeiro artigo, falarei um pouco sobre a evolução do JavaScript e como resolvemos o seguinte problema: como podemos escrever código moderno em JavaScript/TypeScript sem nos preocuparmos com a compatibilidade em diferentes ambientes e browsers? Inicialmente, mostrarei como o Babel funciona na prática. Entenderemos conceitos de plugins, presets e outros recursos dessa ferramenta. Após isso, vamos nos aprofundar no funcionamento dessa ferramenta, entendendo as etapas do processo de transpilação e também como funciona uma estrutura de dados bem legal chamada AST (Abstract Syntax Tree). ASTs são muito importantes e usadas em outras ferramentas como eslint, TypeScript, entre outros. No fim, falarei sobre outras ferramentas que têm o mesmo propósito, mas que estão ganhando o mercado devido à sua performance durante a execução.
O que você vai aprender?
- Como o Babel funciona
- Conceitos gerais de compiladores
- O que são polyfills
- Talvez criar um mini plugin do Babel
Bundlers | Estudo de caso: Webpack
Neste tópico, vamos realmente entrar nas ferramentas que cuidam do processo de build da nossa aplicação. Inclusive, vou precisar de mais de um artigo para abordar tudo. Vamos começar de forma prática, entendendo como o webpack funciona e como ele pode se integrar com um transpilador como o Babel. Falaremos sobre loaders, plugins e outros recursos do webpack. Após entender como funciona, vamos tentar fazer nossa própria versão minimalista de um module bundler baseado no webpack. Depois disso, entraremos em alguns tópicos relacionados a performance, como cache, minificação, code splitting, entre outros. Para finalizar, falaremos de outras ferramentas como rollup, vite, etc.
O que você vai aprender?
- O que são module bundlers e como eles funcionam internamente
- Como webpack funciona
- Tree shaking, code splitting e outras estratégias de otimização
- Talvez construir uma versão minimalista de um module bundler
Outras ferramentas | Sugestões
Estou aberto a sugestões. A ideia dessa lista de artigos não é fazer comparação de ferramentas, mas sim explicar os conceitos por trás delas. O objetivo é ganharmos mais confiança ao mexer em qualquer ferramenta do ecossistema.
Esses artigos serão baseados na minha experiência e em estudos recentes que estou fazendo sobre o funcionamento interno dessas ferramentas. Tem sido uma jornada muito interessante e espero compartilhar esse conhecimento de forma clara e útil para todos.