React Native - The Basic

A ideia desse artigo é trazer alguns pontos básicos sobre React Native, e para isso vamos passar por alguns tópicos dando um overview e respondendo as seguintes questões:

1. O que é React Native ?
2. Por que React Native ?
3. Show me what you got!
4. Requisitos para começar ?
5. O que esperar ?

O que é React Native ?

React Native é um framework baseado no já aclamado React, desenvolvido pela equipe do Facebook, que possibilita o desenvolvimento de aplicações mobile, tanto para Android como para IOS, utilizando apenas Javascript.

A ideia do React Native é bem parecido com o React, porém existem algumas diferenças, por exemplo:

• Não utilizamos componentes HTML, existem os componentes próprios para mobile;
• As aplicações de estilos não são feitas através de CSS, existe uma outra maneira para criar os estilos;
• e entre outras.

E qual a vantagem de usar React Native sendo que já existem outros frameworks que fazem isso ?

Existem muitos frameworks que empacotam aplicações web em uma espécie de browser, como o Cordova, PhoneGap, Ionic, etc… porém o React Native é diferente, pois todo o código desenvolvido é convertido para a linguagem nativa do sistema operacional. Além de termos um código nativo rodando, conseguimos usar mais features do device de forma melhor, mais nativa e com mais facilidade.

Dentro desse tópico podemos citar que, em React Native desenvolvemos escrevendo com JavaScript de ponta a ponta, desde o título da página, o seu estilo(eu sei, pode parecer estranho escrever CSS em JavaScript mas não é, em RN não é muito comum usar CSS puro), até a sua lógica e tudo mais. E para ajudar nosso desenvolvimento usamos uma extensão do JavaScript chamada JSX, que nos facilita escrever nossos componentes de uma forma mais amigável, muito similar a HTML.

Detalhe, se fossemos fazer isso pra web, conseguimos reutilizar o código e somente mudar alguns detalhes:

Isso falando de código de interface, mas temos código que de fato somente iriamos copiar e colar de uma plataforma pra outra que iria funcionar numa boa. Um pequeno exemplo de diferenças de componentes entre React web e React Native:

E como o React Native transforma esse código JavaScript para código nativo Java/Kotlin ou Swift/Objective-C)? A resposta é Bridge, no português brazilian, Ponte. A ideia é que a bridge seja a responsável por realizar uma comunicação bidirecional e assíncrona entre o código JavaScript e código nativo. A brigde é como o coração do React Native, e o mais legal é que ambos mundos (JavaScript e nativo) são escritos em tecnologias diferentes, mas, eles são capazes de se comunicar. Resumidamente, por trás das cena acontece:

1. No JavaScript(React Native), vamos escrever um componente, por exemplo, Botão branco com o texto "Click Me" e a cor preta de tamanho 16(claro que escrevemos isso em código);
2. Essa informação vai ser transformada em um JSON;
3. A Bridge recebe esse JSON e manda a mensagem para o nativo;
4. O pedido é feito para o nativo;
5. O nativo atende o pedido e renderiza o que foi solicitado.

Por que React Native ?

• Um dev pra ambas plataformas;
• Custo de desenvolvimento;
• Compartilhamento de código;
• Experiência do usuário fluída;
• Carregamentos em geral mais rápidos;
• Melhor integração entre funções do celular como câmera, geolocation, etc;
• Segurança superior;
• Melhor performance em geral;
• Por ser multiplataforma, podemos desenvolver aplicações com React Native utilizando qualquer sistema operacional (Windows, macOS ou Linux).

Precisa de mais ?

Com isso, podemos concluir que antigamente iriamos precisar de um desenvolvedor Android e outro IOS programando em Objetive-C ou Swift pra desenvolver um único app, tornando o projeto lento, custando muito mais e mesmo assim podemos ter diferença de tratamento de interface, dados, e etc, já com React Native fazemos tudo isso em um só código, e além disso podemos reutilizar o código de um app para diversos outros apps, coisa que com código Android ou IOS não iriamos conseguir tão fácil.

Mas ai você me pergunta, e se eu quiser mostrar meu app pra Android de uma forma e IOS de outra forma, consigo ? Claro, sem problemas, não só podemos fazer isso também tranquilamente como fazemos no dia a dia.

Show what you got!

• Instagram;
• Facebook Ads Manager;
• Tesla;
• Skype;
• Pinterest;
• Bloomberg;
• SalesForce;
• Walmart;
• Discord;
• Uber eats;
• AirBnB;
• Nubank;
• Banco do Brasil;

A melhor resposta pra tudo é mostrar resultados, e nada melhor do mostrar coisas que se provaram com o tempo, certo ? Esses são alguns dos apps que utilizam a tecnologia hoje, e como a ferramenta foi criada pelo Facebook e mantida até hoje por eles, isso passa muita segurança pra nos sentimos a vontade de montar nossa aplicação, além disso temos uma comunidade enorme com muita biblioteca a nossa disposição, muitos eventos, muitas pessoas que realmente sabem o que estão fazendo e estão dispostos a ajudar, seja através de eventos, Slack, bibliotecas, StackOverflow, Github, etc.

Requisitos para começar ?

Um conhecimento médio em JavaScript acredito que seja o básico, claro que olhar um componente Hello World escrito com JSX pode não parecer muito complicado, mas precisamos entender que React tem uma stack imensa de diversas outra bibliotecas e framework que se conectam, e também no mundo React Native, é importante conhecer um pouco de como devices funcionam, como gerar um pacote e subir para as lojas Apple Store e Play Store, é importante conhecer sobre componentização, estados e propriedades, flexbox layout, etc.

Resumindo, se você quer montar uma aplicação básica em React Native, eu começaria por aqui:

• JavaScript, ter um bom conhecimento e entender muito bem o que está acontecendo por trás das cenas;
• Componentização, nessa stack do mundo React, trabalhos muito com esse conceito, que nada mais é do que tem um pedaço de código separado onde podemos reutilizar em diversos outros lugares e até mesmo em outras aplicações;
• Estado e propriedades, essa parte talvez já seja um pouco mais complicado, porém se você quer ter uma aplicação onde vai cuidar de dados e talvez uma chamada em uma API, essa parte é essencial, e pensando nessa stack temos algumas ferramentas mais utilizadas como, Context API, Redux, Redux Saga, Thunk, Recoil;
• Fluxo de dados(data flow), entender que diferente do Angular, React trabalha com os dados de uma maneira unidirecional, isso significa que os dados vão somente em uma mão, e não igual ao Angular que trabalha com two way data biding(bidirecional).
• Imutabilidade, precisamos trabalhar com dados imutáveis para garantir uma melhor consistência dos dados e evitar side effect e entre outros pontos. Temos algumas libs para nos ajudar nisso também, como por exemplo, immutable.js, immer, e entre outras, porém conseguimos trabalhar sem nenhuma lib sem problemas.
• ES6, temos muitas coisas que acontece no mundo React que usam funcionalidades da "nova" versão do JavaScript que é muito importante entendermos;
• Build/entrega às stores, é importante conseguir gerar um pacote do seu aplicativo e distribuir nas lojas;
• Programação funcional, não é um requisito, mas pra mim acredito que seja bem importante, nos dias de hoje esse estilo de programação vem sendo muito usada, podemos ver que traz muito benefícios, exemplo, Higher-Order Functions, HOC(Higher-Order Component), etc…;
• Flexbox, nada mais é do que um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento, e como vamos trabalhar diretamente com UI é muito importante temos esse conhecimento;

O que esperar do futuro ?

Fora esse gráfico aqui em cima, até o momento que estou escrevendo esse artigo temos 11.340 pessoas na comunidade da React Brasil no Slack, temos muitas uma comunidade imensa, muitas bibliotecas e projetos sendo criado todos os dias, o Facebook lançando novas versões, e também desde 2015 o código do framework foi colocado no Github e temos milhares de desenvolvedores engajados para contribuir. Além disso, o React Native está ainda na versão 0.63, nem chegamos numa versão que podemos considerar estável/beta de fato, e já estamos aqui. Além disso, com React conseguimos desenvolver pra web com ReactJs, para TV com React-Tv e até mesmo usando um framework como Electron conseguimos usar o React para desenvolver para desktop, geladeira, Carro, Casa, etc. Então deu pra ver que o React ainda está engatinhando e já estamos nesse patamar, o que eu tiro de conclusão disso é que temos muito pela a frente.

Flutter chegou ai ? Sim. E é uma boa ferramenta também. Flutter permite a criação de aplicações para iOS e Android através da mesma base de código baseada no Dart, linguagem criada pela Google. Porém, o resultado é idêntico a um aplicativo nativo, já que o código Dart é compilado para código nativo em tempo de compilação (ao contrário do React Native, que faz esse processo em tempo de execução). Mas podemos ver que o React Native não perdeu nenhum pouco de força, pelo ao contrário, só tenho visto cada vez mais a comunidade crescendo e a plataforma evoluindo, React tem um ponto muito interessante a seu favor que é a flexibilidade de compartilhar código entre plataforma web e mobile, fora a linha de aprendizado do React é MUITO mais fácil do que Flutter, que usa a linguagem Dart. Além do mais, as coisas estão muito mais dinâmicas hoje em dia, tudo sendo digitalizado, então temos muito espaço no mercado.

Summarize

React Native é uma biblioteca que nos permite escrever aplicativos nativo pra Android e IOS, tendo somente um código para ambas plataformas e tudo isso com JavaScript e uma extensão JS chamada JSX, e além disso conseguimos ter uma reutilização de código enorme até mesmo pra plataformas distintas como web e mobile.

Quando pensamos no por que usar React Native temos diversos benefícios como, um desenvolvedor para ambas plataformas, onde com isso temos um custo e tempo reduzido, experiência e performance excelente próxima e em alguns casos até melhor do que somente nativa, multiplataforma, melhor integração com funcionalidades nativa do device, e diversos outros benefícios.

Quando nos questionarmos se realmente vale a pena React Native, só precisamos olhar para o que já existe hoje, o que funciona muito bem e que vem se provando com o tempo, principalmente sendo um big case de sucesso utilizado por milhões de pessoas diariamente onde podemos nos espelhar e seguir de exemplo, como o caso do Facebook e Instagram, fora toda a lista enorme de players utilizando a biblioteca. Além do mais temos o Facebook por trás dando suporte e criando novas features e melhorar para a biblioteca.

Os requisitos é um ponto de vista pessoal que vejo para alguém entrar nesse mundo, mas não significa que uma pessoa que nunca teve contado ou que não saiba os pontos que falei acima não seja capaz, por isso React é muito bem acolhido por toda comunidade, pois sua linha de aprendizado e a facilidade de desenvolver é muito boa, porém não podemos deixar de citar que se você pretende montar uma aplicação com grande escalabilidade e madura, acredito que seja muito importante entender pelo menos muito bem o JavaScript, e alguns pontos como componentização, como trabalhar com dados e estado da aplicação trabalhando com dados imutáveis e evitando side-effects, entender que no mundo React trabalhamos com one way data bind onde isso nos permite trabalhar com um fluxo de dados unidirecional, e entre outros pontos.

E o que tudo indica, React e React Native estão no caminho certo, evoluindo como biblioteca, crescendo seu market share, e cada vez mais pessoas aderindo a tecnologia e vendo o potencial e a facilidade que nos traz.

No resumo é isso, espero que tenha curtido esse artigo e qualquer dúvida só mandar uma mensagem ou deixar um comentário.

LinkedIn: http://linkedin.com/in/joseygor

Github: https://github.com/joseygordev