Buscar
  • p-ferreira

Desenvolvimento com React e React Native - #MyDevXP





Já faz algum tempo que ouço a comunidade e o mercado falando ativamente sobre a tal biblioteca JS do Facebook, o React. A biblioteca também é conhecida por ser uma das principais adversárias do Angular, e por eu ter sido sempre do #teamAngular, nunca tive muito interesse sobre estudar a tal biblioteca concorrente.



Porém, contudo, entretanto, a comunidade de react cresce cada dia mais, em todos os lugares.


Já com essa pulga atrás da orelha e após ver que o react ficou em segundo lugar por "Biblioteca mais amada/desejada" da Developer Survey Results 2018 do stack overflow, resolvi virar a casaca pra descobrir se a grama do vizinho é realmente mais verde.


Após alguns meses estudando e testando a tecnologia, pude tirar minhas próprias conclusões.



Sobre o React


O react é uma biblioteca do Facebook focada em criação de UIs reativas, visando simplificar o processo de desenho de views e de alteração de estado da aplicação, sendo baseada em componentes para a composição de interfaces complexas.


Ao contrário do angular, que é um framework robusto praticamente independente, o React vem mais como uma solução em formato de biblioteca, sendo necessário se integrar com outras bibliotecas a parte que fazem parte de seu ecosistema (e.g. Redux, React Navigation, etc...)


Baseado no gerenciamento de estado de componentes e na utilização de JSX, o react traz uma perspectiva diferente no desenvolvimento de SPA's e soluções de front-end , diferenciando-se do Angular, que utiliza-se de um padrão mais normativo e tipificado (vide integração direta com TypeScript) de soluções.


A curva de aprendizagem para um desenvolvedor Angular se tornar um desenvolvedor react não é muito grande, entretanto, ela existe e não é tão pequena como a migração de Angular para Vue.Js por exemplo.


O react traz soluções bem diferentes e elegantes para controle do fluxo das informações do front, como por exemplo a utilização de um pattern muito interessante para este tipo de aplicação, o Flux, que geralmente é aplicado pela biblioteca Redux. Dentre todas as novas óticas trazidas pelo react no desenvolvimento de front, o Flux+Redux foi de longe a que mais me interessou. Acredito que o estudo deste conjunto vale a pena pois mesmo que não haja nenhuma intenção de migração para a biblioteca, seu estudo é muito rico e agrega um conhecimento arquitetônico muito interessante para este tipo de solução.


Vale a pena ressaltar que dentro da minha experiência, o react de longe é o framework que mais explora o ECMAScript 6, usando e abusando de todas as features modernas adicionadas ao bom e velho JavaScript.


Entre outras tecnologias no ecosistema react, a que mais se destaca é o React Native.



Sobre o React Native


O react native é uma plataforma que lhe permite construir aplicações mobile multiplataforma utilizando apenas JavaScript, compartilhando o mesmo paradigma (e parcialmente a mesma sintaxe) que o React.Js. O produto final oferecido pelo react native é um aplicativo nativo que compartilha dos mesmos componentes nativos do sistema operacional do celular. Ao invés de utilizar Swift ou Java, você utiliza JavaScript para alinhar estes elementos, diferenciando-se assim de outras ferramentas de desenvolvimento mobile que oferecem como produto final web apps (e.g. Ionic).


A ferramenta vem sendo amplamente utilizada por grandes empresas como Facebook e Instagram (lógicamente), Skype, Uber, Pinterest, Wix, Discord, SoundCloud, entre outros grandes players do mercado mobile.

Como prova prática de conceito da ferramenta, eu e outros membros do #teamEngenhos resolvemos criar um aplicativo social simples,  porém rápido  e eficaz, no prazo de uma semana. O aplicativo chamado Cidade Verde pode ser encontrado na Playstore e no GitHub.


Antes de falar sobre a minha experiência com a ferramenta, quero levantar alguns pontos sobre experiências passadas com desenvolvimento mobile.




Sobre outras plataformas de desenvolvimento mobile



Sempre gostei da ideia de desenvolver aplicativos desatrelados a computadores de mesa, aplicativos móveis que andam para aonde você for. Na minha jornada profissional, tive a oportunidade de trabalhar com uma gama de ferramentas diferentes para desenvolvimento de apps, entre elas:

  • Windows CE (sim, ainda existe gente que usa isso em pleno século XXI)

  • Java

  • Objective C

  • Ionic

  • Unity

  • Xamarin

E agora o React Native. Devo admitir que tive grandes frustrações em todas as plataformas que listei anteriormente, passando por todos os tipos de dores (falta de documentação, limitação de biblioteca, troubleshooting incoerente, complexidade para gerar conteúdo não complexo, incompatibilidade com ferramentas nativas, montagem de ambiente morosa, impossibilidade de replicação de código para outra plataforma, etc...).


Assim como eu, conheci na minha jornada vários outros desenvolvedores que também compartilhavam da dor principal do mercado: não existe nenhuma plataforma altamente robusta e estável para o desenvolvimento mobile sem passar por alguma das dores que citei anteriormente. E o react native é essa ferramenta maravilhosa altamente estável, completa e robusta que veio para revolucionar seus concorrentes? Sinto te decepcionar, mas não. Mas da minha experiência, foi de longe a melhor ferramenta dentre todas as outras.

Sobre minha experiência com o React Native


De início, no Getting Started da aplicação, temos duas opções para iniciar o desenvolvimento. O comum, que exige a integração com ferramentas nativas (Android Studio, JDKs e XCode) e o começo rápido utilizando uma ferramenta chamada Expo, que abstrai praticamente toda a parte da configuração inicial. Falarei mais sobre o Expo no final do artigo.


Como queria conhecer a ferramenta mais a fundo, fui pelo caminho mais difícil, escolhendo assim me integrar com as JDKs e o Android Studio. A documentação é bem clara, e apesar de ser um pouco chato perder um tempinho com essas configurações iniciais, não existem complicações no processo.


A adaptação do react.js para o react native foi bem fluída, tendo uma curva de aprendizado muito pequena. A ideia de manutenibilidade de estado e componentização permanecem as mesmas, diferenciando-se apenas por novos componentes (o que era de se esperar, já que são plataformas diferentes). A estilização dos componentes é baseada no flexBox (CSS) e é quase que natural para desenvolvedores com experiência web. Dentre a estruturação voltamos a usar o JSX e de lógica o bom e velho JS.


A facilidade para criar e customizar aplicações amigáveis com o react native é impressionante, assim como sua performance e usabilidade. A ferramenta também é muito bem documentada, e possui uma gama de bibliotecas para criar a aplicação adequada para a sua necessidade. Mas nem tudo são flores. Como disse anteriormente, o react é oferecido mais como biblioteca do que como framework íntegro, e por conta disso é necessário utilizar muitos componentes externos, como React Native Components, React Navigation, Redux, entre outros. Alguns destes componentes do ecossistema ainda não estão maduros o suficiente e por conta disso trazem uma dificuldade ao desenvolvimento fluído na ferramenta. Mas dentre estas ferramentas do ecossistema do react, uma definitivamente me saltou os olhos: o Expo.

EXPO


O expo é um conjunto de ferramentas com bibliotecas e serviços que podem ser usadas com eficácia para o desenvolvimento de aplicações nativas.


O expo é o outro tipo de inicialização do projeto descrito no Getting Started da documentação do react-native e o começo do desenvolvimento de um HelloWorld usando o expo se baseia basicamente em baixar o aplicativo da expo na loja de aplicativos (Play Store ou App Store) e em:



























E pronto. Você abre o aplicativo, bate o QRCode que o console gera e o deploy está pronto, sem cabos e sem nada. Um download de aplicativo e 4 linhas de comando e você esta pronto para começar o desenvolvimento da sua app. 4 linhas. 4 L-I-N-H-A-S. APENAS 4 FUCKING LINHAS DE CÓDIGO.





A facilidade que o Expo traz é realmente impressionante, levando em conta que em praticamente todas as outras plataformas é um parto montar o ambiente. Geralmente é necessário que se baixe várias SDKs, IDEs, configurações de variáveis de ambiente, entre várias outras complicações. E se der erro em algo no meio do caminho? O troubleshooting é doloroso e cansativo, aumentando mais ainda o sentimento de frustração de uma aplicação que ainda nem começou a ser desenvolvida.


Com apenas 4 linhas e um app você já está com o ambiente montado. Além dessa grande mão na roda, o expo facilita muito trazendo consigo bibliotecas e serviços que facilitam a comunicação com componentes nativos, como navegadores, mapas, câmera, permissões, etc. É inegável que o Expo é um grande facilitador, principalmente para aplicações simples.


Conclusão 


No final do dia, chego à conclusão que apesar dos pesares, o react e o react native são ótimas ferramentas de desenvolvimento, principalmente no que tange o desenvolvimento mobile. A ferramenta é completa e a prova de erros? Não. Tudo é fácil e maravilhoso e vai ser mamão com açúcar sair do zero para uma aplicação complexa? Também não. Mas são ferramentas bem válidas para se ter na nossa toolbox de dev, não só pelo aquecimento do mercado como principalmente pela agregação da ótica trazida pelo desenvolvimento de aplicações react. 


Qualquer dúvida, opinião, reclamação, etc. só comentar. Até o próximo #MyDevXP ;)

Cena pós créditos

Muito se fala na longínqua terra dos programadores sobre a choosen one que veio para acabar com os dias de react, iniciando assim a guerra tecnológica entre Google X Facebook. A choosen one dessa vez é o Flutter, oferecida pelo Google para facilitar o desenvolvimento mobile. Agora o resto é cena dos próximos episódios .

89 visualizações
  • LinkedIn - Círculo Branco

© 2018 by Engenhos