React Native: Construa aplicações móveis nativas com JavaScript

e assim por diante.

Aqui você encontra a listagem completa dos componentes disponíveis, tanto para iOS quanto para Android.

ES6

Após a criação de um componente precisamos registrá-lo para exibição. Fazemos isso retornando a função com o nome do componente através do AppRegistry, dessa forma:

Se o código acima não ficou óbvio pra você, não se assuste. Por default o React Native permite que trabalhemos com as novas epecificações do EcmaScript 6 (ou 2015, para os íntimos). Uma delas é a sintaxe chamada de arrow functions (familiar para quem já trabalhou com CoffeeScript), que permite uma escrita mais simples baseada em closures.

A versão JavaScript ES5 do código acima seria:

Mas uma vez, é uma questão de preferência e não uma imposição da ferramenta.

Contudo, o que fizemos até aqui não será suficiente para fazer o código rodar. Nós não definimos nenhuma das dependências declaradas na aplicação. Vamos resolver esse problema:

A string entre aspas é a biblioteca que estamos solicitando acesso. Nesta caso, estamos atribuindo seu retorno à variável React que acabamos de criar.

Agora que temos acesso à principal biblioteca do React, vamos declarar as restantes, necessárias para rodar nossa aplicação sem erros. A versão completa do nosso código fica assim:

Se você pressionar CMD + R no teclado já terá uma aplicação rodando sem erros. Mas vamos corrigir mais duas coisinhas pra deixar nosso código ainda mais atraente…

Substitua o código do escopo de declaração pelo seguinte:

Como todas as bibliotecas declaradas depois da react-native fazem parte do seu core, podemos assinalar as três variáveis seguintes ao objeto React. Este é mais um recurso disponível do ES6/ES2015 chamado de destructuring assignment.

Outra coisa que não está muito legal no código é a indentação dos componentes no método return. Vamos envolvê-los em um parênteses para que seja permitido pular de linha e tabular tudo seguindo uma melhor hierarquia visual, dessa forma:

Vale salientar que sem o parênteses essa tabulação não seria possível e iria disparar um erro no simulador.

Vamos ver como ficou o código final agora:

Se você rodar o aplicativo, irá perceber que o mesmo executa sem erros. Mas, numa primeira olhada, parece que não há nada na tela! Se você observar atentamente, irá perceber que o texto está no canto superior esquerdo da tela, sem qualquer tipo de orientação ou margem. Precisamos corrigir isso!

Flexbox

Como estamos lidando exclusivamente com JavaScript, não temos acesso a CSS. Mas para aproximar a experiência de criar aplicativos móveis ao desenvolvimento de uma página web, os responsáveis pelo projeto desenvolveram uma maneira declarativa de estilizar componentes bem similar ao CSS.

Insira a seguinte notação no bloco da View principal (linha 2 do código):

Agora vamos criar uma variável “styles” que recebe o objeto StyleSheet com os seguintes parâmetros:

Antes de executar o código, precisamos incluir o StyleSheet em nosso escopo de inicialização:

Agora sim. Execute o código pelo Xcode e você verá o seguinte resultado:

O texto agora se encontra alinhado no centro da tela e temos uma borda vermelha envolta do container. O que aconteceu aqui?

Bem, nós criamos um objeto container com seis parâmetros: flex, flexDirection, justifyContent, alignItems, borderWidth e borderColor. Os dois últimos são autoexplicativos e similares à aplicação de bordas do CSS. A diferença aqui é que ao invés de declarar border-width, com hífen, declaramos borderWidth, em camelCase (lembrando que estamos lidando com JavaScript e não CSS de verdade). Outra observação importante é que não precisamos atribuir px ao final do valor como fazemos na web, pois aplicativos nativos tem suas resoluções de tela baseada em pontos (pt) e não em pixels.

O React Native utiliza o Flexbox para organização visual dos componentes, o que simplifica, em muito, a construção de layouts. Basicamente, o parâmetro flex: 1 significa que o container ocupa 100% de altura e largura na tela. O parâmetro flexDirection: column significa que os elementos seguirão o fluxo baseado em colunas, que é de cima para baixo. A outra opção seria flexDirection: row, onde os elementos são ordenados da esquerda para a direita. Por default, O fluxo padrão é o de colunas, portanto você pode apagar essa instrução sem nenhum impacto no seu código.

Por fim, temos a instrução justifyContent: center e alignItems: center. O primeiro é responsável por alinhar o conteúdo de forma vertical (eixo y), enquanto o último serve para alinhar de forma horizontal (eixo x). Além de center, também existem outros valores como flex-start e flex-end. Tente utilizá-los para ver o que acontece no seu layout…

Se ainda restou alguma dúvida, este post escrito pelo Diego Eis pode te ajudar a entender.

E se eu quiser uma borda arredondada envolta do texto e não no container? Também gostaria de mudar a cor do texto, centralizá-lo e inserir um padding envolta do mesmo. Simples…

Executando o código:

Agora que você já está familiarizado com o “modo React” de criar aplicações, vamos tentar entender rapidamente o que acontece por baixo dos panos…

JavaScriptCore

Se você já ouviu falar sobre React, já ouviu sobre Virtual DOM. Essa é uma forma genial de abstração que os engenheiros do facebook desenvolveram para trazer melhorias na performance de aplicações web, uma vez que um DOM Virtual fica em memória e apenas modificações significativas em sua estrutura são novamente renderizadas na tela, sem necessidade de percorrer toda a árvore novamente.

Em algum momento eles pensaram: “E se, utilizando essa abordagem, pudéssemos também abstrair uma camada qualquer diferente do DOM para conseguir resultados similares em relação à performance?…”

Até então, o único componente presente no iOS e no Android que viabiliza a execução de código JavaScript de modo nativo são seus browsers internos, conhecidos como WebViews. Com base nesse cenário, vários frameworks surgiram nos últimos anos com a proposta de utilizar a camada de código nativa apenas para disparar uma aplicação com código escrito em HTML, CSS e JavaScript no próprio Browser (sem a barra de endereços, obviamente). Como o container responsável pelo ciclo de vida da aplicação é nativo, isso possibilita que essas aplicações sejam desenvolvidas e distribuídas através das lojas oficiais, como a App Store e Google Play, sem maiores problemas. Esse movimento originou o termo atualmente conhecido como Aplicativos Híbridos. Embora essa abordagem provou-se vitoriosa em alguns cenários, ainda consiste em uma página web que simula uma aplicação escrita de forma nativa, o que, algumas vezes, peca em questão de performance e experiência.

Em React Native continuamos escrevendo um aplicativo em JavaScript, mas que não exibe uma página web como resultado. Ao invés disso, o nosso código executa uma instância do chamado JavaScriptCore responsável por renderizar componentes verdadeiramente nativos dentro do nosso app. Por exemplo, se você abrir o arquivo /ios/MyFirstProject/AppDelegate.m no Xcode, vai encontrar sempre o seguinte conteúdo, independente da quantidade de código que tiver escrito no seu editor de texto:

O segredo está nessa classe RCTRootView. Ela é uma classe criada pelo próprio framework, responsável por apresentar os elementos da classe UIKit com base no código que escrevemos em JS. Ou seja, o controle do comportamento do nosso app é feito em JavaScript, mas em nenhum momento ocorre compilação desse código para Objective-C, binário ou coisa do tipo. Por isso conseguimos ver atualizações em tempo real em nossa aplicação, uma vez que nenhum código em Objective-C é escrito, apenas código JavaScript. Não tem nada pra re-compilar! Genial.

Como essa “passagem de bastão” entre o código JavaScript e Objective-C é feita está fora do escopo desse post, mas caso tenha curiosidade de saber onde vai parar o código que escrevemos, basta acessar a url https://localhost:8081/index.ios.bundle?platform=ios& dev=true enquanto a aplicação estiver no ar. Você irá perceber nosso código em meio à um monte de outros gerados pelo framework.

Explorando as APIs e componentes nativos

Uma das coisas mais legais – e vantajosas – de se trabalhar com o React Native é a possibilidade de utilizar os componentes e APIs nativos da plataforma. Indiscutivelmente, é um recurso que oferece uma experiência mais atrativa para o usuário e que torna dispensável a utilização de serviços de terceiros como o Apache Cordova, por exemplo. O React Native também trabalha em uma thread separada da thread principal, o que faz com que sua aplicação mantenha a alta performance sem sacrificar a capacidade do seu smartphone (o que é incrível!).

Para começar a ilustrar esses pontos, vamos modificar o nosso código para exibir um alerta nativo do iOS quando um botão for clicado.

Capturando eventos e fornecendo feedback visual

Assim como todos os demais componentes, o React Native criou um específico para recuperar o evento de touch (ou tap) na tela do device. Seu nome é , que nada mais é do que um wrapper invisível responsável por fazer algum outro componente responder ao toque do usuário e, em seguida, conectá-lo a algum evento/método:

No código acima temos um exemplo de como podemos fazer uso desse componente. Perceba que dentro dele temos uma outra que abriga um componente com um texto indicativo. O recebe uma função de nome someFunction quando o evento onPress for acionado. Outra coisa bacana do componente é que o mesmo fornece feedback visual do momento em que o usuário pressiona e solta o botão. Por default, o React Native aplica um efeito de overlay ao componente sem que precisemos fazer nada. Awesome!

O também responde à outros eventos, como onPressIn, onPressOut e onLongPress, para atender às demais necessidades de interação com o usuário.

Vamos agora mexer no nosso código e substituir a função someFunction do evento onPress do nosso botão por um alert dialog nativo da plataforma. O código do alerta é muito simples, conforme abaixo:

Nosso alerta é simples e recebe apenas dois parâmetros: O título e a descrição que serão exibidos para o usuário. Vamos juntar tudo e ver como fica o nosso código final (git checkout step3):

Pressione CMD + R no teclado e veja o resultado do que criamos no seu emulador com poucas linhas de código:

Props & State

Tudo o que fizemos até o momento foi ótimo, mas não é o suficiente para manter uma aplicação em funcionamento. E se eu quisesse alterar o valor do texto que aparece na tela de forma dinâmica, com base em um input do usuário? Podemos fazer isso facilmente utilizando o conceito de state, que nada mais é do que gerenciar um componente e aplicar alterações em seu valor durante seu ciclo de vida.

Para que isso seja possível, precisaremos de três coisas novas em nosso código:

• Um método que defina o estado inicial do meu componente;
• Um componente nativo que receba inputs do usuário na tela;
• Um método responsável por modificar o valor desse meu componente.

Primeiramente, vamos criar o estado inicial do meu componente:

Em seguida, um componente para receber inputs do usuário:

E, por fim, a função com o método responsável por atualizar o estado da minha View sempre que o valor do meu componente for modificado:

Vamos ver como tudo isso fica no nosso código (git checkout step4).

Agora nosso label reflete o valor que digitamos em nosso input, veja:

Caso queira simular o teclado do device, basta ir na barra de ferramentas do emulador e procurar a opção Hardware -> Keyboard -> Toggle Software Keyboard. Ao habilitar essa opção, o teclado nativo do device será exibido sempre que um input for solicitado.

Se você tem o costume de utilizar aplicativos no iPhone já deve ter reparado que o comportamento de transição de telas é ligeiramente diferente daquilo que observamos na web. Ao invés de exibir uma outra página qualquer como resultado de alguma ação (como clique em um link ou uma busca) no iOS nós trabalhamos com um componente chamado UINavigationController que gerencia essa transição de forma hierárquica. Obviamente já temos à nossa disposição um componente para lidar com isso, chamado NavigatorIOS.

Dito isso, a primeira coisa que precisamos fazer é mudar o componente root da nossa aplicação que, ao invés de apontar para Tableless, agora irá apontar para a classe MainNav, conforme abaixo:

Agora vamos criar a classe MainNav que irá funcionar como um container que fará referência à tela Tableless que estávamos trabalhando anteriormente, dessa forma:

Perfeito. Agora vamos criar uma outra tela que será responsável por exibir o texto que iremos digitar em nossa View principal. Irei chamar essa tela de NextScreen:

Perceba a instrução {this.props.inputText} dentro do componente . Ele será o responsável por apresentar o valor digitado no nosso input. Mas para que isso ocorra, precisamos de um novo evento em nosso que guarde esse valor e o conduza até a próxima tela que acabamos de criar. Já que não temos um botão pra disparar esse método, que tal chamá-lo logo após pressionar o Return do teclado? Existe um evento chamado onEndEditing que faz justamente isso:

Referenciamos a função de nome callNextScreen que recupera o texto que digitamos através do evento de nome event.nativeEvent.text. Vamos criar essa função:

Perceba que nós chamamos a função push do navigator que faz parte do atributo props da nossa tela NextScreen. Uma outra novidade é o parâmetro passProps que recebe um objeto com chave e valor de nome inputText, responsável por guardar o texto que digitamos e conduzi-lo à próxima tela. Vamos ver como ficou o código final (git checkout step5):

O resultado:

Faça um teste no seu device e observe o quão suave são as animações. Uma vez na tela seguinte, você pode retornar para a anterior com um simples gesto de deslizar os dedos da esquerda para a direita (o famoso swipe gesture). Você consegue até mesmo simular uma transição similar em html com overflow, mas não será a mesma coisa. Esse é o verdadeiro ganho de trabalhar com componentes 100% nativos: As transições em 60fps (60 frames por segundo).

Por fim, você foi apresentado aos dois principais conceitos do React: props, utilizado quando queremos compartilhar valores entre componentes e state, quando desejamos monitorar o estado de um componente e suas alterações (geralmente ocasionado por algum evento de usuário).

Modularidade

Você tem consciência da bagunça que nosso código pode se tornar se prosseguirmos com a escrita de toda a lógica em um mesmo arquivo, né? Mas uma das vantagens da plataforma é justamente a modularização, uma vez que cada componente pode estar isolado em arquivos diferentes, gerenciando seus próprios estados de forma individual. Fazemos isso através do module.exports do Node, presente na especificação do CommonJS.

Para ilustrar como isso pode ser feito, vamos separar nossa seção de estilos no arquivo style.js e requisitar seu acesso no arquivo index.ios.js (git checkout step6).

Conteúdo de style.js:

E no arquivo index.ios.js:

Seguindo esse conceito, sua aplicação fica muito mais legível, principalmente se utilizarmos o Nesting de componentes (não abordado nesse tutorial).

Como exercício, tente fazer o mesmo com os demais componentes que criamos.

Android

Uma das vantagens oferecidas pelo framework é poder criar aplicações agnósticas, que compartilham a mesma base de código. Neste caso, você poderia ter os arquivos index.ios.js e index.android.js apontando para uma classe “root”, responsável por executar o código com base no sistema utilizado pelo usuário: iOS ou Android. Isso é possível se você fizer uso de componentes que não são específicos de cada plataforma, como View, Image, ListView, MapView, Modal, TouchableHighlight, Text, etc.

Outra possibilidade, em aplicações mais complexas, é de compartilhar a mesma lógica entre ambas as plataformas com a diferença de utilizar componentes específicos para cada uma delas. A vantagem seria proporcionar a melhor experiência nativa possível para o usuário. Como exemplo, temos os componentes DrawerLayoutAndroid, ProgressBarAndroid, ToolbarAndroid, etc.

Um futuro móvel para o JavaScript

Hoje em dia o desenvolvedor JavaScript vive um momento fantástico, pois além de contar com frameworks como Ionic, que tem o intuito de explorar o desenvolvimento híbrido através de tecnologias web, agora temos o React Native à nossa disposição, com o intuito de conduzir o JavaScript ao ambiente nativo. No entanto, diferente do conhecido termo imortalizado pelo Java “Write once, run anywhere“, o framework defende o “Learn once, write anywhere“, o que significa que cada plataforma tem seu próprio visual, estrutura e recursos únicos. E que você, como engenheiro de software, deve ser capaz de construir aplicações para qualquer que seja a plataforma – sem necessariamente aprender uma gama de novas tecnologias – mas sempre respeitando o ecossistema nativo de cada uma delas. Isso é fantástico!

Outro ponto que vale ressaltar é a otimização que o framework oferece ao dia a dia de uma equipe, uma vez que ele tem o potencial de acelerar todo o processo – não só de desenvolvimento, mas também de lançamento de um aplicativo. Como exemplo, a Apple possibilita que alterações sejam executadas no “ar” em aplicativos baseados no tal JavaScriptCore sem precisar aguardar pelo exaustivo processo de review deles. Ou seja, mais produtividade e mais clientes felizes!

Embora o React Native seja um framework fantástico no que se propõe a oferecer, ele não é o único. Existem outras ferramentas que permitem o desenvolvimento de aplicativos nativos utilizando JavaScript, como é o caso do já conhecido Titanium e, do mais recente, NativeScript. Mas a grande sacada do React Native é o React em si. Sua natureza declarativa, a metodologia de reutilização de componentes e o foco primário na interface do usuário proporcionam uma experiência, até o momento, inédita para o desenvolvedor web que deseja migrar para o mundo do desenvolvimento móvel.

Em resumo, o React Native merece sua atenção porque…

• **Não remove você do ecossistema da web: **As mesmas ferramentas que usamos para o desenvolvimento web são basicamente as mesmas que utilizaremos para desenvolvimento mobile. Ao invés de depender exclusivamente do Xcode ou Android Studio, um SublimeText, Atom ou Brackets já darão conta do recado pra você. Com se isso não bastasse, você ainda tem a opção de fazer debug do código via Chrome DevTools, através de uma extensão desenvolvida exclusivamente para o React, como se fosse uma aplicação web de verdade!
• **Utiliza Flexbox e CSS: **O Flexbox permite que você estruture sua camada visual de maneira muito simples e intuitiva. Esse é um ponto crítico em aplicações nativas. Tome o AutoLayout do iOS, como exemplo. Lidar com Constraints, Size Classes e outros recursos não são assim tão simples. Sem contar que essa fica sendo uma tarefa exclusiva do Desenvolvedor e não do Designer. Em contrapartida, se você já é um Webdesigner, pode aproveitar seu código CSS diretamente na plataforma – ou solicitar que o Designer gere ele pra você incluir no seu app. Não é o máximo?
• **É extremamente extensível: **Você pode compartilhar o seu código JavaScript com o seu colega de trabalho que desenvolve em Objective-C, Swift ou Java sem maiores problemas. O framework possibilita a integração de módulos nativos, proporcionando um ambiente colaborativo ainda mais rico e transparente. Ou seja, sempre que houver a necessidade de implementar um módulo nativo – ou reaproveitar algum que já tenha sido criado pela sua equipe – basta importá-lo no seu projeto e ele estará disponível. Yes!
• **Utiliza Polyfills para tirar vantagem dos recursos web: **APIs como fetch, geolocation, setTimeout e o próprio flexbox não existem em ambiente nativo, mas existem no Browser! Mais uma vez, a transição entre os ambientes web e nativo fica ainda mais simples de ser feita.
• **Simples gerenciamento das dependências do projeto:**Programadores JavaScript já estão acostumados a utilizar o NPM para gerir dependências e fazer build de suas aplicações. Trazer essa ferramenta para dentro do escopo nativo significa menos uma barreira adicional. Em um simples arquivo package.json você é capaz de organizar todas as suas dependências como se estivesse trabalhando na web, sem a necessidade de aprender ferramentas como Cocoapods para iOS ou Gradle no caso do Android.

Conclusão

O desenvolvimento mobile está mudando com a mesma velocidade da demanda de mercado. Mais e mais ferramentas vêm sendo desenvolvidas com o intuito de prover uma experiência mais rica, tanto para o desenvolvedor quanto para o usuário final. Frameworks como React Native surgem como uma prova de conceito de que existem falhas em ambos os ecossistemas e o que resta fazer é unir o melhor dos dois mundos. O mais importante, no fim das contas, é a tal da estratégia. Se tempo de mercado e produtividade fazem parte do seu vocabulário (ou de sua startup), fique de olho nas mudanças. Elas estão apenas começando…

Enfim… é uma época excelente para ser um desenvolvedor JavaScript. 🙂

Conheça mais sobre o React para web neste post do Davi Ferreira.