Como construir aplicações React rapidamente com o Bun

Como construir aplicações React rapidamente com o Bun
AdsTerra, Junte-se ao AdsTerra

Sua instalação de pacote npm está lenta? Ou você quer experimentar um novo ambiente de tempo de execução (runtime)? Bun é o novo tempo de execução (runtime) Javascript que afirma ser melhor que o Node.js. Este artigo testará isso e verá como podemos melhorar nossas aplicações React com este novo tempo de execução.

Introdução

Neste tutorial, faremos um teste com o Bun. Aprenderemos sobre o Bun, o que o torna tão rápido, e tentaremos criar uma aplicação React usando-o, testando a velocidade das instalações. Por fim, teremos uma noção de como é usar o Bun como um gerenciador de pacotes. Vamos começar!

O que é Bun

Bun é um novo tempo de execução (runtime) JavaScript que busca fornecer um ambiente fácil, rápido e moderno para trabalhar. Se você está se perguntando o que é o tempo de execução (runtime) JavaScript, é um ambiente que permite executar seu código JavaScript e fornecer recursos e bibliotecas úteis para ajudá-lo em seu processo de desenvolvimento.

Ao contrário do Node.js, o Bun tem como objetivo fornecer um ambiente mais moderno e simples para executar código JavaScript, com foco em simplicidade, desempenho e segurança. Por outro lado, o objetivo do Deno é oferecer um ambiente moderno e seguro para executar código TypeScript e JavaScript sem usar um gerenciador de pacotes.

Em geral, a escolha de um tempo de execução (runtime) JavaScript depende das necessidades e requisitos específicos do projeto. Por exemplo, se você precisa construir uma aplicação do lado do servidor, pode escolher o Node.js. Se você precisa de um ambiente seguro para executar código JavaScript sem um gerenciador de pacotes, pode escolher o Deno. Se você precisa de um ambiente simples e rápido para executar código JavaScript, considere o Bun.

O que torna o Bun tão rápido?

Aqui estão algumas razões pelas quais o tempo de execução (runtime) Bun é tão rápido:

  1. Leveza: o Bun é um tempo de execução (runtime) leve, o que significa que possui uma base de código menor e requer menos recursos, permitindo que ele tenha um desempenho melhor em velocidade e uso de memória do que outros tempos de execução (runtimes).
  2. Código de baixo nível: o tempo de execução (runtime) Bun é escrito em Zig, uma linguagem de programação de baixo nível que é relativamente nova em comparação com C ou Rust.
  3. Desempenho: o Bun não usa o motor v8. Em vez disso, usa o núcleo Javascript do Webkit, que geralmente é considerado mais rápido.
  4. Compactação: o Bun possui um empacotador nativo para substituir ferramentas como o Webpack e um transpilador nativo, para que você possa escrever código Typescript sem precisar configurar nada. O Bun possui um executor de testes, assim como o Jest. As variáveis de ambiente são carregadas automaticamente; você não precisa instalar o dotenv em cada projeto.

Instalando o tempo de execução (runtime) Bun

Para instalar o Bun nativamente em sua máquina Mac, Windows ou Linux, execute este comando:

curl -fsSL https://bun.sh/install | bash

Para usuários do macOS, execute isso depois:

exec /bin/zsh

Usando o Bun com React

Nesta seção, vamos ver como configurar uma aplicação React usando o Bun.

Primeiro, você precisa verificar se tem o tempo de execução (runtime) Bun instalado. Para fazer isso, digite o comando:

bun --version

A versão do Bun em seu sistema será exibida no terminal. Se precisar de ajuda, você pode instalar o Bun em seu sistema na seção anterior ou verificar a documentação para obter o guia de instalação em sua máquina.

No seu terminal, execute o seguinte:

bun --help

Este comando produz algumas informações úteis.

Informações úteis no terminal sobre o Bun

Por exemplo, o comando create acima nos permite criar um novo projeto React. Execute o comando:

bun create

Esse comando exibirá algumas opções de templates para criar um novo projeto:

Opções ao rodar o comando bun create no terminal

A partir da imagem acima, você pode ver alguns comandos úteis que podem ser usados para construir um novo projeto, e pode ver o comando React na lista. Agora execute:

bun create react your-app-name-here
cd app

Você pode executar uma compilação de desenvolvimento para sua aplicação executando este comando:

bun dev

Ou uma compilação de produção executando:

bun build

Usando Bun como gerenciador de pacotes

De acordo com a página oficial do Bun no GitHub, o comando "bun install" mostrou ser capaz de instalar pacotes de 20x a 100x mais rápido do que o "npm install", e no macOS, você pode obter até 4x a 80x mais rápido do que o "npm install".

O comando "bun install" é usado para instalar pacotes. Para usar o comando "bun install", você precisa ter o Bun instalado em seu sistema e ter um projeto configurado. A sintaxe do comando "bun install" é:

bun install

E remover e adicionar pacotes com os seguintes comandos:

bun remove <package_name>

bun add <package_name>

O <package_name> é o nome do pacote que você deseja instalar. O comando Bun install baixará o pacote especificado e suas dependências e os tornará disponíveis para uso em seu projeto. Por exemplo:

bun install lodash

Testando a velocidade do Bun

Nós abordamos a instalação do Bun e suas características únicas. Vamos testar a velocidade de criação de um novo aplicativo React usando Bun versus usando create-react-app. Vamos começar nosso teste com Bun.

Navegue até a pasta do seu projeto em seu terminal e execute o comando:

bun create react [your-app-name]

Tempo de criação do app ao executar bun create react

Levou 9.71 segundos

Vamos tentar isso com create-react-app e ver o que obtemos. Navegue até a pasta do seu projeto em seu terminal e execute este comando:

npx create-react-app <app-name>

Tempo de criação do app ao executar npx create-react-app

Levou 17 segundos para o create-react-app criar um projeto.

Para investigações adicionais, você pode visitar este repositório do GitHub contendo muitos testes de benchmark que você pode realizar no Bun.

Conclusão

Neste tutorial, aprendemos sobre o tempo de execução (runtime) do Bun, como instalá-lo e usá-lo com o React. Portanto, divirta-se usando o Bun em seu próximo projeto e desfrute deste novo tempo de execução extremamente rápido.

AdsTerra, Junte-se ao AdsTerra