Explorando o React Native

React Native é uma das tecnologias que mais me empolgaram nos últimos tempos. Neste post conto pra vocês minha experiência de aprendizado, o que gostei e também o que não gostei tanto.

Também aproveito pra lhes mostrar nosso novo projeto: o “/dev/All Mobile”.

Como cheguei no React Native

Era questão de tempo: se você ouviu o último podcast da itexto, React era uma das tecnologias que já estavam em nosso radar por um tempo. O interessante é que quem estava no radar de fato era o React, não o React Native. Sendo assim começo pelo primeiro.

Começou pelo React

Na itexto quando o assunto é front-end somos uma equipe bastante eclética: sempre aparece um framework que não conhecemos vindo de um sistema legado que precisamos evoluir, o que implica em aprender como este opera, dominar suas entranhas e incluí-lo em nosso cinto de utilidades.

Curiosamente React nunca havia aparecido, mas os clientes sempre comentavam a respeito. E dado que no mercado há hoje essencialmente três frameworks front-end (Angular, Vue.js e React), faltava esta peça em nossa caixa de ferramentas.

Iniciamos então nossa pesquisa para que pudéssemos atender esta demanda quando chegasse. As pesquisas normalmente começam por mim: neste caso fui a pessoa que iniciou o processo de levantamento bibliográfico, implementação das primeiras provas de conceito (POCs) e escrita dos guias internos que guiarão nosso aprendizado (preciso escrever sobre este processo um dia).

O aprendizado do React

Não foi fácil: na realidade foi o framework mais difícil que aprendi até agora. E confesso a vocês que ficou muito mais difícil de aprender devido ao fato de já dominarmos Vue.js e Angular. Minha impressão é que enquanto nestes frameworks mesclamos JavaScript nos templates, no React o oposto é que ocorre: o template HTML entra no JavaScript. E a primeira impressão foi simplesmente péssima.

(determinismo linguístico puro)

A primeira impressão que tinha do React é que o código abaixo parecia uma gambiarra terrível!

É incrível como o preconceito técnico opera. Levei semanas pra conseguir aceitar o JSX (esta sintaxe na qual você incluí o template HTML no JavaScript (ou TypeScript)). Entender que aquelas tags na realidade eram código JavaScript foi algo muito difícil neste primeiro contato. Eu simplesmente não conseguia ler este código. E pra piorar as coisas, tomei o caminho errado no aprendizado.

Meu grande erro foi ter começado pelo tutorial presente no site oficial do React. Se você está começando só tenho um conselho para lhe dar: ignore este tutorial. Você simplesmente vai escrevendo o código que vão te passando e no final tem um jogo da velha. O problema é que finalizado o tutorial, eu até conseguia modificar o código e brincar com ele, mas ainda não entendia como o React funcionava.

Foi quando resolvi prestar atenção nos links que estavam na seção “Principais Conceitos”…

Segue então a dica pra quem está começando. Comece pelo primeiro link do guia “Principais Conceitos” e siga de cima pra baixo. Se você já tiver experiência com outros frameworks, minha sugestão é outra: comece pelo ÚLTIMO link: Pensando do jeito React.

ESTE é o caminho. Ali é que você vai entender a fundo como o JSX funciona (e ele irá imediatamente deixar de lhe parecer estranho, como mágica!), como pensar de fato como componentes, lidar com eventos, entender o conceito de state e todo o resto para que finalmente você possa iniciar suas primeiras provas de conceito.

Com isto implementei minha primeira prova de conceito: essencialmente reescrevi o front-end do /dev/All em React. Aprendi muito ali, mas queria ver outros desenvolvedores programando. Então comprei este curso no Udemy do Maximilian. Valeu cada centavo (foi bem barato, 22 Reais se não me engano), por que vendo outra pessoa codificando com o framework me passou diversas dicas que aceleraram MUITO meu aprendizado, o que me possibilitou criar mais provas de conceito.

Aí o React Native caiu no meu colo

Um cliente muito especial me procurou e disse: “Kico, você pode dar manutenção em um app que fizeram pra nós? Ele é feito em um framework chamado expo…”.

E o que era o tal do Expo? Era o React Native!!!

Meu processo de aprendizado neste caso foi muito mais rápido. Em uma semana já estava produtivo. Segui uma metodologia um pouco diferente: desta vez li toda a documentação do Expo (falarei sobre ele mais à frente) e, na sequência, a do React Native. E aí, sabem o que fiz? Comprei o outro curso do Maximilian de React Native que você pode acessar neste link.

O resto é história, mas antes é importante que ataque um mito aqui.

O mito que pode destruir sua experiência de aprendizado do React Native

“React é uma coisa, React Native é outra. São coisas completamente diferentes”

Senhor Cruel

Você não vai conseguir aprender React Native se não souber o essencial do React. Os mesmíssimos princípios que aprendi são fundamentais para se aprender React Native. A diferença está, em sua essência, naquilo que é renderizado.

Então não caia nesta: React Native é uma aplicação do React, logo você tem de saber a base.

O que amei no React Native

A solução arquitetural do React Native

Uma das coisas que mais me impressionou no React Native (RN) foi a beleza da solução. É o mesmo React que aprendi para escrever aplicações web, usando o mesmo JSX que aprendi a entender. No entanto a diferença está no quê é renderizado.

Enquanto no React renderizo sempre tags HTML que serão renderizadas pelo navegador, aqui tenho algo diferente porém muito familiar pra quem já programou aplicações desktop em Java usando SWT (alguém lembra disto?). No caso deste toolkit gráfico (SWT), nossas classes que representam componentes visuais quando executadas renderizam widgets nativos do sistema operacional. Em teoria temos interfaces mais próximas do usuário final e também mais responsivas.

No caso do React Native, temos um conjunto de componentes padrão que também são renderizados usando seus relativos nativos. Quando vi a lista dos componentes pela primeira vez fiquei chocado com quão poucos eram, mas conforme fui experimentando ficou nítido que com estas poucas primitivas eu poderia fazer praticamente qualquer coisa.

Entre estes componentes e o sistema operacional nativo existe o que chamam de “JavaScript Bridge”: é o componente arquitetural responsável por fazer este meio de campo e acessar as APIs de baixo nível do sistema nativo. Naturalmente isto irá ter seu custo de desempenho, mas ao menos em teoria temos aqui uma solução multi plataforma que nos oferece um desempenho superior ao do webview.

Essencialmente o código é o mesmo que aquele que vimos no React, porém com outras tags. Ao invés de <div>, temos o <View>, ao invés de <p>, temos <Text> e assim por diante… Sendo assim você escreve código similar ao apresentado a seguir:

O interessante destas abstrações é que apesar delas serem voltadas inicialmente apenas para Android e iOS teoricamente podem ser aplicadas a qualquer plataforma. No link “Out-of-Tree platforms” você pode ver algumas opções bastante interessantes, tais como Windows, macOS, Linux, tvOS… Não são oficialmente suportadas, entretanto é bom saber que elas existem.

Desenvolvedores experientes entretanto reclamam que muitas vezes você precisará mesclar código nativo ao do seu projeto. Ainda não ocorreu conosco, mas quando rolar, tenha certeza, irá ter post aqui contando a experiência.

O “tal do Expo“

Quando você cria um novo projeto com React Native há dois caminhos a seguir:

• Usando o caminho bare bones do próprio React Native.
• Abraçar o Expo, que é o ambiente de desenvolvimento gerenciado – aonde foi meu primeiro contato

Sem sombra de dúvidas o segundo caminho é o melhor pra quem está começando. Expo é uma mãe pra você e resolve diversos problemas:

• Cuida de todo o processo de construção pra você (tanto pra iOS quanto Android). Você não precisa ter o Android Studio ou um Mac pra compilar seu projeto. Tudo é feito de forma remota pra você.
• Fornece uma forma muito rápida e interessante de compartilhar seus protótipos com seus clientes (vamos falar mais sobre isto adiante).
• Gerencia todas as dependências essenciais para o seu projeto, inclusive atualizações do próprio React e bibliotecas fundamentais subjacentes.
• Permite atualizações do seu app “over the air”, ou seja, se sua mudança é pequena, não precisa passar por todo o processo de publicação de uma nova versão na loja. No momento em que o app for iniciado este busca a nova versão no Expo e já atualiza no dispositivo do usuário (coisa linda!).
• Permite o compartilhamento dos seus projetos com outros desenvolvedores de uma forma bastante simples.
• Apresenta um fluxo de trabalho que aumenta significativamente a produtividade do desenvolvedor (estou tendo a mesma sensação que tive quando aprendi Grails mais de 10 anos atrás!).

O fluxo de trabalho com Expo

React Native me ganhou quando comecei a explorar o Expo e o fluxo de trabalho que ele me oferece. Quando estamos trabalhando em uma interface algo que é fundamental é o feedback. Se qualquer alteração em meu código imediatamente é refletida nos dispositivos que uso para validar o desenvolvimento o trabalho simplesmente flui: me sinto mais a vontade para experimentar, corrigir problemas, melhorar meu aplicativo. E o melhor: em menos tempo.

Quando uso o Expo com meu ambiente de desenvolvimento já configurado (e a configuração é banal: basta instalar o Expo) meu fluxo de trabalho consiste em dois passos: alterar meu código fonte e ver o resultado nos meus dispositivos ou emuladores. Sim, é só isto.

O Expo é composto essencialmente por três componentes:

• A ferramenta de linha de comando (npm install -g expo-cli) que você aprendeu a instalar entre estes parênteses.
• O app cliente que você instalará em seu celular ou emuladores (Expo irá instalar isto no emulador de forma transparente para você).
• O site expo.io no qual você poderá publicar seus projetos e gerenciar seus processos de build.

Criando o projeto

Com o expo instalado, execute este comando: “expo init [nome do seu projeto]”. Será exposto um assistente no qual você deverá escolher seu template, tal como exposto na imagem a seguir.

Reparou que é possível usar TypeScript? Ainda prefiro usar JavaScript com o React Native, mas é interessante saber desta possibilidade. Bom, voltando ao nosso “nano guia”, selecione o que mais lhe apetece. Pronto, projeto criado.

Executando o projeto

Vá pra pasta que contém seu projeto e execute um dos comandos a seguir: “npm start” ou “expo start”. Irá abrir o navegador padrão expondo a seguinte interface para você.

Será iniciado um servidor. Observe que há um QR code ali. Caso seus emuladores já estejam iniciados, clicando em “Run on Android emulator” ou “Run on IOS simulator” irá instalar o app do Expo no emulador e, na sequência, iniciará o seu projeto neste cliente.

Use e abuse do app do Expo

Já instalou o Expo Client no seu celular (link pra Android e iOS)? Instale. Agora pegue sua câmera e aponte para o QR code que viu acima. Boom! O app é carregado no seu celular. Agora toda alteração que você fizer irá automaticamente ser refletida no seu dispositivo.

Compartilhe seu app usando o Expo Client

Notou que no print acima existe um link chamado “Publish or republish project”? Então: clicando ali você irá publicar seu app no site expo.io. E aí basta que seus clientes tenham o cliente instalado em seu celular para abrir seu projeto. Será disponibilizado a você um link. Apenas envie-o para seus clientes e eles poderão interagir com seu projeto.

O Expo client irá baixar o código fonte e executá-lo no celular de quem tiver seu link. Aproveitando, quer testar meu beta do /dev/All mobile? Se você tiver Android, clique neste link.

Quer ver como é a URL? Aqui: https://expo.io/@kicolobo/devallmobile

Maravilhoso! Agora seus clientes podem testar seu app sem precisarem passar por todo aquele ciclo de publicação na App Store. Se você usa Android, sua vida tá ganha. Se usa iPhone… a coisa é mais triste por que há limitações. Essencialmente apenas o dono do app pode executá-lo pelo Expo client. :(

Publicando seu app nas lojas com Expo

O Expo cuida disto pra você também. Se você executar o comando “expo build (android:ios)”. Seu projeto será pré-compilado em seu computador e na sequência submetido para o site expo.io, aonde será devidamente compilado e construído na sequência.

Mas nem tudos são flores. Se você tem uma conta gratuita do serviço pode levar um bom tempo para executar sua compilação (já tive de esperar pelo menos uma hora). Entretanto, quando sua compilação estiver pronta, você poderá baixar o pacote e iniciar o processo de publicação nas lojas.

O expo também irá cuidar de todo o processo de assinatura digital dos seus apps, atividade esta que pode ser bem chatinha (especialmente no caso do iOS).

Limitações do Expo

Tava bom demais pra ser verdade, né? É! A primeira limitação é o tempo de construção do seu projeto. No caso do Expo ele sempre é construído na infraestrutura deles, não localmente no seu computador. É até possível se livrar disto, mas você teria de executar o processo de “eject”, isto é, abandonar o Expo e começar a andar por conta própria, executando diversas atividades que o Expo executa automaticamente de forma manual.

Além disto o Expo não tem acesso a todas as APIs nativas que o React Native “puro” tem. Aliás, a própria equipe do Expo deixa bem claro estas limitações. Leia atentamente este link antes de iniciar seu projeto. Talvez alguma destas limitações torne o Expo uma péssima escolha para você.

Se livrando do Expo

Ok, seu app cresceu e agora você começou a topar com as limitações do Expo. O que você faz? Reescreve do zero? Nope: você “ejeta” seu app. É possível jogar o Expo fora. Executando o comando “expo eject” você transforma seu projeto Expo em um projeto React Native padrão.

Agora você não tem mais as limitações do Expo, mas está por conta própria. Saiu da casa dos pais, agora você é um adulto e provavelmente sentirá saudades da infância em breve. :)

O triste é que este é um caminho sem volta. Você pode sair do Expo, mas não pode (ainda) voltar a este. Leve isto em consideração. Sinceramente, vejo o Expo como o caminho inicial a ser seguido na prototipação, e o processo de “eject” como um caminho possível pro seu projeto.

Entretanto, dado que a esmagadora maioria dos projetos é muito simples, acredito que o Expo irá lhe atender por um bom tempo (talvez pra sempre).

E o que não acho tão legal no React Native?

Formulários

Na realidade esta é minha crítica ao React: não temos o binding bi-direcional aqui tal como temos no Angular e Vue. Ao invés disto temos um modelo reativo mesmo: o componente pai deve enviar seu estado para os outros componentes filhos e assim sucessivamente (em condições ideais de temperatura e pressão).

No caso do React Native este não será um grande problema, mesmo por que não é interessante formulários complexos em aplicações móveis, mas esta é uma limitação que pode te chatear. Mas não fique triste, você ainda pode usar a biblioteca Formik, que ajuda mas não resolve totalmente o problema.

Sobre o binding bi-direcional. Faz todo o sentido com o tempo conforme você entende a lógica por trás do React em si, entretanto no início é muito difícil de se acostumar.

Lentidão para iniciar

Em alguns momentos experimentei uma certa lentidão na inicialização dos meus apps. Entretanto já sei como lidar com esta situações, o que será assunto para um post futuro.

React Redux

Vai, podem atirar pedras em mim. As mesmas críticas que tenho ao Vuex tenho ao Redux. Se você não conhece, o Redux (assim como Vuex) resolvem o problema do estado compartilhado entre componentes.

Se você quer ter um estado compartilhado entre mais de um componente a solução mais elegante é usando estas bibliotecas. Problema: não são fáceis de pegar o jeito. Leva um tempo até você entender como de fato funcionam.

Outro problema ocorre conforme as aplicações crescem de tamanho e complexidade: você precisa ficar muito esperto para não criar um “monstro redux” aí. Pode aumentar significativamente a complexidade do seu projeto, especialmente se alguém tiver a infeliz ideia de colocar lógicas complexas nos reducers…

JavaScript – mas nem é um problema tão grande assim

A ausência de tipagem forte do JavaScript pode ser um problema. Já fiz algumas experiências com TypeScript, que em teoria resolveria a questão, mas ainda não obtive resultados que me satisfaçam plenamente. Essencialmente falta documentação: é mais fácil seguir o caminho JavaScript com React.

E pra finalizar, nosso novo projeto: /dev/All mobile!

Em nosso processo de aprendizado documentamos diversas dificuldades que desenvolvedores podem ter ao darem seus primeiros passos com React Native. Sendo assim resolvemos lançar o proejto “/dev/All mobile”. Como o próprio nome já diz, trata-se de um cliente móvel para o nosso amado /dev/All.

Estamos essencialmente reimplementando todas as funcionalidades do front-end existente hoje. A diferença é que vocês poderão acompanhar o seu desenvolvimento. Enquanto termino este post aguardo a liberação da versão beta que já está publicada no Google Play Store (versão para iOS virá na sequência, não fiquem tristes!).

O primeiro release é super simples: você conseguirá essencialmente executar as seguintes funções:

• Ver os últimos posts encontrados por nosso crawler.
• Buscar por posts antigos.
• Ver detalhes sobre os blogs e sites que publicaram os posts.
• Compartilhar estes posts com seus amigos (o compartilhamento mobile é muito melhor que aquele presente no front-end oficial).

Com o tempo e a saída de novos releases, a ideia é ensinar a vocês como executar atividades mais complexas, tais como:

• Persistência de dados localmente.
• Como gerenciar notificações.
• Dicas de segurança.
• Execução em segundo plano.
• E, claro, as entranhas do React Native que irão surgindo com o passar do tempo.
• Como aplicar estilos a seus componentes.
• Como lidar com a navegação (e evitar sérios problemas).
• Entender de uma vez por todas como usar o React Redux (e persistir este estado).

Enquanto não divulgo aqui os links para as lojas, você já pode experimentar o primeiro release deste beta agora. Para tal basta ter o Expo Cli instalado em seu celular e acessar este link: https://expo.io/@kicolobo/devallmobile

E a trilha que segue

Este é meu segundo post sobre React neste blog. Tenho aprendido muito e tenham certeza de que muitos outros posts virão pra cá nas próximas semanas e meses. Gostaria de saber a experiência de vocês com estas ferramentas. Já usaram? O que acharam?