React Native: Webview ou realmente nativo?

Começamos a utilizar React Native aqui na Nutripad há aproximadamente 2 meses e estamos super satisfeitos com a nossa performance no desenvolvimento das nossas mobile apps. Se você não leu nosso primeiro artigo, aqui está o link: Como desenvolvemos um app novo em apenas 16 dias.

Enquanto estávamos desenvolvendo nosso primeiro app, como uma forma de experimento, nos questionamos bastante sobre o quão "nativo" era o React Native. Como um amigo diz: “Se for nativo, é nativo”, porém era necessário investigar.

É muito importante saber como uma tecnologia funciona por "debaixo dos panos" antes de entregar algo para produção.

Começamos uma caçada na busca de estudar o código fonte do React Native e procurar alguns artigos e palestras do início do framework para tentar entender como funcionava, queríamos ter certeza que no final das contas não era uma "WebView melhorada".

Como o React Native funciona

Para a nossa alegria o React Native não é WebView. Irei fazer uma breve explicação sobre como funciona baseado no Android, mas a arquitetura do iOS é bem parecida.

O core do React Native é uma ponte que permite chamadas nativas ao seu JS e chamadas do seu JS ao nativo. No Android é incluído uma JS VM, a JavaScriptCore, no iOS a JavaScriptCore é parte do sistema. Então no mais resumido possível:

React Native é JS rodando em uma VM e controlando a UI nativa

É importante notar que sua aplicação começa no ambiente nativo, e o nativo então faz chamadas através da ponte e inicia sua app JS.

Sobre as views, há controladores nativos para cada componente nativo que você utilizar. Suponha que você quer mostrar um texto na tela ou um "Switch", há chamadas nativas para renderizar ambos.

<Text /> => new TextView(getContenxt())
<Switch /> => new Switch(getContext())

React Native é tão nativo que você pode criar seus próprios componentes utilizando: Swift, ObjC ou Java ou utilizar componentes de bibliotecas que não foram feitos pensando no React Native, tudo acontece através desta ponte de comunicação entre o seu JS e o ambiente nativo.

Então meu código não é "convertido" para a linguagem nativa?

Não, seu código não é convertido/compilado/processado (ou como queira chamar) para a linguagem nativa do dispositivo. Eu costumo dizer que o React Native é 99% nativo e aquele 1% é VM.

Sim, existe um tempo de comunicação entre a JS VM e o ambiente nativo, porém os desenvolvedores do React Native tem focado bastante na performance desta comunicação, em um artigo de 2015 sobre React Native, um dos criadores explica que um evento de "Touch Event" desde o toque até o processamento final deve acontecer em apenas 16ms. Hoje a performance já está bem melhor.

Com isso, podemos ter certeza que não existe WebView quando falamos de React Native, a não ser o componente WebView disponível para você utilizar rsrs.

Nos próximos artigos, tentaremos mostrar alguns benefícios de utilizar React Native na prática.

Segue alguns links interessantes:

Under the hood of React Native: http://www.reactnative.com/under-the-hood-of-react-native/

React Native no github: https://github.com/facebook/react-native

Encontre um nutricionista: https://www.nutripad.com.br/nutricionistas

Como desenvolvemos um app novo em apenas 16 dias: https://medium.com/nutripad/como-desenvolvemos-um-app-novo-em-apenas-16-dias-6f8e9c1d0e06#.jnyre6wfa