React Native e Haul

Uma linha de comando poderosa para React Native

Se você já desenvolveu, ou desenvolve para React Native, já deve ter passado por algumas dores de cabeça com suas depêndencias de desenvolvimento, a maioria relacionada o Metro Bundler (React Native Packager).

Principalmente relacionado ao famoso watchman, que fica observando seus arquivos, para que, em qualquer mudança, alguma ação seja executada.

Você deve ter achado dicas por aí de:

  • Limpe o cache do Metro Bundler (React Native Packager)
  • Limpe o cache do watchman
  • Imploda o node_modules e instale novamente (essa já é bem famosa :P)
  • Em Linux é até reconhecido no FAQ

Mas existe sim, um jeito melhor para isso tudo, e é nesse momento, que eu vou falar sobre o Haul.

Uma nova linha de comando

Haul é uma linha de comando para substituir a que vem padrão no React Native.

Ela foi criada utilizando ferramentas de código aberto, tais como webpack.

Você pode utilizá-la como servidor de desenvolvimento ou empacotar seu projeto para produção.

Alguns destaques do README:

  • Substitui Metro Bundler (React Native Packager) para empacotar seu projeto 📦
  • Acesso total ao ecosistema do webpack, podendo usar loaders e plugins adicionais 🚀
  • Não precisa do watchman 🎉 🎉🎉
  • Melhores mensagens de erro, fácil de entender 🤓
  • Hot Module Reloading 🔥

É uma lista interessante de funcionalidades, principalmente, pelos 2 e 3 pontos.

Adicionando como depêndencia

Assim como no artigo anterior. Não irei falar sobre os requesitos básicos para instalar React Native na sua máquina. Para isso, eu recomendo você ir na documentação oficial e seguir o Getting Started.

Vamos iniciar um novo projeto:

E em seguida iremos adicionar Haul como depêndencia:

Aqui vem um detalhe, se você estiver usando React Native em versões >= 0.43, você precisará seguir as etapas:

  • Alterar o arquivo android/app/build.gradle
  • Procure pela declaração:
  • Altere o array adicionando o seguinte valor:

Iniciando com a linha de comando

Agora, vamos iniciar o Haul:

Ele irá fazer uma pergunta para você digitar o nome do npm script que você deseja que ele crie, o padrão é haul.

Isso irá adicionar todas as configurações necessárias para o Haul funcionar no seu projeto e também, irá adicionar um arquivo webpack.haul.js na raíz do seu projeto.

Agora, você já pode executar:

E você verá algo como:

Para esse exemplo, iremos utilizar:

  • Selecionamos: ios - Serves iOS bundle

Isso irá iniciar o weback e disponibilizar o bundle para o seu aplicativo React Native rodar no simulador do iOS.

Agora, em outra aba, podemos:

Mais comandos e opções

Você pode dar uma olhada na documentação oficial, que é bem detalhada:

Outras vantagens

Alguns detalhes bacanas que não estão na documentação:

  • Redução no uso de memória e CPU (com o watchman, quando eu uso um MBA, a ventoinha vai para o espaço)
  • Otimizações e melhorias no motor do webpack, serão refletidas aqui
  • É mantido por um grupo de pessoas incríveis e é uma das ferramentas que turbina a Callstack.io.

Finalizando

Ao deletar o arquivo .watchmanconfig, ficamos com uma estrutura final parecida com:

Com isso, melhoramos o consumo de memória do seu projeto, abrimos porta para todas a vantagens do ecosistema do webpack e também, temos um ganho na experiência do desenvolvimento.

Quer contribuir? Acesse o repositório oficial ou dê um ping no Twitter Callstack Engineers.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store