Colocar um projeto em produção, muitas vezes, é algo bem complicado. Para ajudar, podemos seguir algumas etapas, sendo o processo build um dos mais importantes. Como ele é possível “compactar” todos os arquivos, deixando-os menores, com o intuito de melhorar o desempenho.
Há várias formas e ferramentas para fazer isso, sendo o webpack o mais usado. No entanto, conforme o seu projeto cresce, o build vai ficando maior e mais lento. Então, para solucionar esse problema, surgiu o Snowpack. Nesse artigo, vou explicar o que é o Snowpack e fazer um exemplo prático para observar como ele funciona com o React.
Como o Snowpack funciona?
Snowpack se declara como a ferramenta de bundle mais rápida que existe, mas como ela faz isso? Simples, ela pega toda a aplicação criada salva em cache e sempre que você modifica um arquivo no seu Editor, ele faz o build apenas do arquivo em questão. Ou seja, se você tem em tela 1 componente, mas modificou um que não está sendo exibido diretamente, somente o arquivo modificado vai sofrer um build, gerando assim um ganho de desempenho muito superior a qualquer outro.
Já o Webpack funciona de uma forma bem diferente. Sempre que salvamos um arquivo, todo o projeto é “refeito”, resultando em um processo mais demorado.
Primeiros Passos
Primeiramente, vamos usar um comando para criar o projeto e configurar o Snowpack. Outro ponto positivo do Snowpack é que, por padrão, ele suporta projetos em React. Ou seja, ele compreende perfeitamente arquivos jsx (ou tsx), resultando em então é uma preocupação a menos. Para prosseguir basta usar o seguinte comando:
npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimalNele criamos um template padrão e em branco do React.
O próximo passo é baixar o React e o ReactDOM, usando o seguinte comando:
npm install react react-dom --saveDetalhes Iniciais
Se olharmos o nosso arquivo index.html, vamos ter algo do tipo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Starter Snowpack App" />
<link rel="stylesheet" type="text/css" href="/index.css" />
<title>Starter Snowpack App</title>
</head>
<body>
<h1>Welcome to Snowpack!</h1>
<script type="module" src="/index.js"></script>
</body>
</html>Aqui temos basicamente uma página HTML, como qualquer outra, mas com o pequeno detalhe na tag script
<script type="module" src="/index.js"></script>Estamos definindo a forma como o JavaScript vai funcionar, no caso do Snowpack é a partir do sistemas de módulos do JavaScript. Logo depois, estamos apontando para o arquivo index.js, que servirá de arquivo de entrada para o projeto.
Snowpack na prática
Agora vamos entrar no mundo do React e fazer toda a configuração manual de um projeto. Vamos lá!
Primeiramente, vou criar uma pasta chamada src na raiz do projeto e jogar o index.js lá.
IMPORTANTE! Devemos modificar o caminho que está presente dentro do index.html. Sem isso o projeto não irá funcionar.
<script type="module" src="src/index.js"></script>Agora vamos modificar a extensão do arquivo index.js para index.jsx, deixando o projeto mais receptível ao React.
Dentro dele vamos importar o React e o ReactDOM, duas dependências necessárias para o React funcionar corretamente.
import React from 'react'
import ReactDOM from 'react-dom'Depois, vamos criar o primeiro “Componente” em tela, com o seguinte código:
ReactDOM.render(<h1>Olá Mundo</h1>, document.getElementById('root'));Porém, se formos no navegador, será retornado um erro. Como resolvê-lo?
A solução é simples! Como não definimos um id específico dentro do nosso index.html para renderizar os nosso componentes, dentro dele devemos deixar assim:
<body>
<div id="root"></div>
<script type="module" src="src/index.js"></script>
</body>Dessa forma, o erro vai sumir e projeto será renderizado corretamente.
Primeiro Componente
Por questões de organização, vamos criar mais uma pasta dentro de src chamada components. Nela colocaremos todos os componentes que usaremos dentro desse mini projeto. Logo em seguida, criaremos um arquivo chamado App.jsx, que vai suportar o nosso componente.
Dentro de App.jsx daremos a seguinte estrutura para ele:
import React from 'react'
import './App.css';
const App = () => {
return(
<div>
<h1>Olá Mundo</h1>
</div>
)
}
export default AppDentro do index.jsx vamos importar o App e colocar para ser renderizado em tela a partir do render:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'));Nada será alterado na tela, pois é a mesma mensagem. No entanto, agora já estamos utilizando um componente React para ser renderizado diretamente em tela.
Estilizando Componentes
Por fim, vamos trazer um pouco de estilo para o Snowpack. Basta criar um arquivo css referente ao componente. Vou usar os seguintes estilos:
h1 {
color: whitesmoke;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.container {
margin: auto;
width: 50%;
background-color: black;
padding: 10px;
border-radius: 20px;
text-align: center;
}Depois vamos realizar o import desse estilo dentro do nosso componente:
import './App.css';E agora vamos definir onde a nossa classe será aplicada e utilizá-la:
<div className="container">
<h1>Olá Mundo</h1>
</div>Tendo como resultado final:
Considerações Finais
Feito isso, podemos perceber como o Snowpack funciona e como podemos usá-lo. Creio que agora você tem uma ideia do quão simples e rápido é o desenvolvimento com o Snowpack, pois não precisamos de praticamente nenhuma configuração adicional para que funcione corretamente.
É claro que o universo do Snowpack é bem maior, como plugins por exemplo; podemos trazer mais conteúdos sobre essa belezinha em um próximo post!
Bons estudos e até a próxima!
