Para entender o que é React Native, primeiro precisamos falar sobre o React. De acordo com o Facebook, a empresa por trás do desenvolvimento dessa biblioteca, o React pode ser definido como uma biblioteca Javascript para se construir interfaces, e é exatamente isso que ela faz: proporciona ferramentas e padrões para um desenvolvimento mais ágil e de qualidade.
O React é baseado em três grandes conceitos, que são:
1- Declarativo
Proporciona uma facilidade para se criar interfaces de usuário (UI’s) interativas. Onde você cria pequenas views para cada estado da sua aplicação e o Core do React se encarrega de efetuar atualizações e novas renderizações quando necessário. Esse conceito torna as aplicações React mais fáceis de prever o comportamento e também de “debugar”.
2- Componentes
Desenvolva componentes pequenos e encapsulados que mantêm o seu próprio estado, e os utilize para construir UI’s ricas e complexas. Uma vez que os componentes são escritos em Javascript, você pode tranquilamente trabalhar com dados complexos na sua aplicação sem precisar se preocupar em como eles serão atualizados na DOM.
3- Aprenda uma vez, escreva em qualquer lugar
Como o React é apenas uma biblioteca e não um framework completo,ele pode ser acoplado a projetos existentes para o desenvolvimento de novas features sem a necessidade de reescrever algum código legado. Também pode ser utilizado para renderizações no servidor e desenvolvimento de aplicações multiplataforma com o React Native.
Em si, o React é apenas uma biblioteca para renderização de views, porém foi criado todo um ecossistema em volta do mesmo de forma que possuímos ferramentas para se desenvolver uma aplicação web completa. Para o desenvolvimento dos componentes é utilizada a linguagem de marcação JSX, que se assemelha bastante a um XML, porém com todo o poder do Javascript.
O fato de ser apenas uma biblioteca de renderização proporcionou aos engenheiros do Facebook a habilidade de levar o React para além da Web. A ideia de se utilizar o React e todo o seu ecossistema nas plataformas mobile surgiu em 2013 em um Hackathon interno no próprio Facebook, mas foi mostrada para a comunidade apenas em janeiro de 2015, quando também foi disponibilizado seu código fonte no GitHub.
Em um primeiro momento foi disponibilizado com APIs compatíveis apenas com o iOS, mas não demorou muito tempo para ser compatível com a plataforma Android também. Com a abertura do código fonte, cada dia que passa o framework fica mais compatível e mais fluido com as APIs nativas das plataformas que suporta.
Diversas companhias, assim como o Facebook, apostaram no React Native para o desenvolvimento de suas aplicações. Alguns aplicativos de sucesso que utilizam são:
- Facebook – mais de 1 bilhão de instalações
- Instagram – mais de 1 bilhão de instalações
- Airbnb – mais de 10 milhões de instalações
- Walmart – mais de 10 milhões de instalações
O framework possui diversas funcionalidades que auxiliam tanto no desenvolvimento, quanto na manutenção de uma aplicação em produção. Abaixo estão exemplificadas algumas delas:
Desenvolvimento paralelo: não é necessário recriar sua aplicação do zero para se utilizar o React Native. Ele pode ser facilmente integrado a uma aplicação existente para o desenvolvimento de novas features ou refatoração de features existentes.
Compatibilidade: praticamente todas as bibliotecas JavaScript existentes são compatíveis com o React.
Atualizações de APIs nativas: como você estará utilizando uma abstração das APIs nativas de cada plataforma, não é necessário se preocupar com “breaking changes” nas atualizações de versão do iOS e do Android.
Abstração de linguagem: não é necessário ficar preso ao Objective C/Swift para iOS ou Java/Kotlin para Android. É possível utilizar qualquer linguagem que compile para JavaScript, como: CoffeeScript, TypeScript, Dart, Opal (Ruby to JS), ClojureScript, ElixirScript, dentre outras.
Atualizações remotas: como o código do seu aplicativo é minificado e unificado em um único bundle, para ser interpretado em tempo de execução, é possível enviar atualizações desse bundle sem ter que passar por todo o processo de subir uma nova atualização do aplicativo para as lojas de cada plataforma.
“Hot Reload”: durante o desenvolvimento, não é necessário recompilar a aplicação novamente devido a uma pequena modificação, apenas o bundle é atualizado.
Mas nem só de coisas boas é feito um framework, todos possuem seus lados ruins também. Veja alguns dos problemas do React Native:
Navegação: a implementação de navegação dentro da aplicação é difícil e pouco intuitiva. Existem algumas bibliotecas disponíveis para facilitar o processo, porém não foi alcançada uma fluidez e facilidade como em aplicações totalmente nativas.
Estilos: a princípio é complicado entender o funcionamento dos estilos que são uma mistura de JavaScript com CSS. Posicionar uma view na tela ou aplicar algum estilo customizado pode ser bem doloroso.
Dados binários: lidar com strings, inteiros, listas e dicionários é bem fácil, porém lidar com buffers binários (resultantes de uma chamada de rede, por exemplo) é doloroso e pode ocasionar diversos problemas. Uma solução seria escrever um módulo nativo e utilizar uma abstração do mesmo a partir do React.
Para quem está iniciando o desenvolvimento com o React Native ou pensa em desenvolver uma aplicação, vou dar algumas dicas que podem facilitar bastante o processo:
- Desenvolva e teste a aplicação em Android e iOS ao mesmo tempo. Não espere finalizar em uma plataforma para iniciar a outra, uma vez que alguns componentes e estilos têm comportamentos diferentes nas duas plataformas.
- Utilize um linter de código. Pequenos erros de implementação e qualidade de código podem custar caro quando a aplicação estiver maior e/ou em produção.
- Use e abuse de logs. Com muitos logs durante a renderização dos componentes fica mais fácil identificar quais componentes estão sendo re-renderizados sem necessidade e afetando a performance do aplicativo.
- Não se esqueça dos testes unitários e de integração, uma aplicação bem testada é uma aplicação que vai dar poucos problemas em produção.
- Separe as regras de negócio das views. As vezes é necessária a implementação de regras de negócio diferentes para cada plataforma. Isso pode ser feito dentro do próprio React Native ou utilizando módulos de código nativo em cada plataforma.
Gostou do artigo? Assine nossa newsletter ali em cima no canto direito para receber mais dicas de desenvolvimento, metodologias e tendências escritas pelos profissionais da Cedro.
