Aplicações Escaláveis com React e React Native
Como escalar o desenvolvimento de aplicativos web e mobile de forma eficiente utilizando React e React Native
React é uma incrível biblioteca Javascript criada pelo Facebook e Instagram, com foco na criação de interfaces de usuários, ela domina a camada de Views de aplicações modernas para web, mobile e desktop nas melhores empresas do mundo.
PROTIP: O React torna simples o desenvolvimento de interfaces interativas que podem eficientemente serem atualizadas para cada alteração de estado.
Utilizando uma programação declarativa o React t0rna o código mais previsível e fácil de ser depurado (debug).
Já o React Native é a versão do React que suporta o desenvolvimento mobile multiplataforma.
Segundo o Facebook, o React Native é bem parecido com o React, porém ao invés de utilizar componentes web ele utiliza componentes nativos para a criação dos blocos de construção dos aplicativos.
PROTIP: O React / React Native não faz nenhuma suposição sobre a arquitetura atual de suas aplicações. O React é considerado por muitos como a View do MVC e pode ser utilizado em conjunto qualquer tecnologia de Back-end seja Java, Ruby, Python ou Node.js.
Recentemente boa parte do novo aplicativo do Airbnb foi desenvolvido utilizando o React Native.
O Caso do Wix demonstra como é fácil escalar o desenvolvimento de aplicativos, eles fizeram a migração do desenvolvimento nativo em seus aplicativos ios e android para React Native e conseguiram atingir uma velocidade de desenvolvimento superior a 300%.
PROTIP: No React Native é possível reaproveitar cerca de até 90% do código escrito entre plataformas iOS e Android.
É Alguma Mágica ?
Não, não é uma mágica, o React não é perfeito, exatamente da mesma forma que o Angularjs ou Vue também não são.
Para criar aplicações escaláveis com React e React Native se faz necessário o uso de alguma biblioteca de gerenciamento de estado como Flux, Redux, Mobx, Effex, ou até frameworks como o Relay.
Na Getty/IO utilizamos o Redux em conjunto com Immutablejs.
PROTIP: O Redux é basicamente um container de estado que leva as melhores partes da arquitetura Flux para uma conclusão lógica e eficiente. Seu objetivo é fazer com que as mudanças de estado sejam mais previsíveis.
Apesar de ser muito utilizado com React, o Redux também pode ser utilizado com outras bibliotecas. Ex: Angular, Ember ou Dart.
Dessa forma, o Redux oferece um padrão sustentável para desenvolver aplicativos complexos e de larga escala, seja Web ou Mobile.
PROTIP: Você pode verificar os três princípios do Redux.
Criando Produtos em Tempo Recorde
Para criar produtos em tempo record, decidimos construir uma arquitetura de referência para novos projetos com as tecnologias React e React Native.
Esta arquitetura leva em conta o uso enterprise, crescimento exponencial do aplicativo, performance, escalabilidade, testabilidade, interoperabilidade e usabilidade.
Principais Tecnologias:
Estrutura de Projeto
De acordo com nossa experiência existem várias formas de organizar um projeto Javascript, cada forma possui suas vantagens e desvantagens.
Entendemos que o código deve ser limpo e que deve fornecer suporte para a adição de novas funcionalidades sem que o código existente seja comprometido. Todo código deve seguir um blueprint de implementação para garantir que todos entendam o que foi escrito.
PROTIP: Na maioria dos tutoriais e cursos React e React Native disponíveis, são apresentadas técnica simples de organização e que geralmente não são utilizadas em projetos de grande porte.
Levando isso em conta definimos uma estrutura de projeto para o uso enterprise, já organizada por módulos e que maximiza a reusabilidade de componentes.
.
├── android
├── ios
├── fastlane
├── package.json
├── src
│ ├── Root.js - Main App Component
│ ├── Routes.js - Routes
│ ├── assets
│ ├── components - Reusable Components
│ │ ├── home
│ │ │ ├── __tests__
│ │ │ │ ├── Card.spec.js
│ │ │ │ └── EventItem.spec.js
│ │ │ ├── Card.js
│ │ │ └── EventItem.js
│ │ ├── ...
│ │ └── shared
│ ├── config
│ │ ├── constants.js - Constants and Configs
│ ├── modules
│ │ ├── home
│ │ │ ├── actions
│ │ │ │ ├── index.js - Action Creators
│ │ │ │ └── types.js - Action Types
│ │ │ ├── components
│ │ │ │ └── HomeScreen.js - Redux Container
│ │ │ └── reducers
│ │ │ ├── index.js - Redux Module
│ │ │ └── reducers.js - Redux Module Reducers
│ │ ├── events
│ │ ├── navigation
│ │ ├── ...
│ ├── store
│ │ ├── store.js
│ │ └── reducers.js
│ ├── styles
│ │ └── main.js
│ └── utils
│ ├── date-utils.js
│ ├── string-utils.js
│ ├── storage-utils.js
│ └── responsive-utils.js
├── test
│ ├── components
│ └── modules
│ ├── home
│ │ ├── actions
│ │ │ ├── home.action.spec.js
│ │ │ └── home.actionTypes.spec.js
│ │ ├── reducers
│ │ │ └── home.reducers.spec.js
│ │ └── components
│ │ ├── HomeScreen.spec.js
│ ├── navigation
│ ├── events
│ ├── login
│ └── survey
└── yarn.lockNesta estrutura é possível observar que os containers estão separados por módulos e que os componentes reutilizáveis são totalmente independentes, cada um possuindo seu conjunto de testes especializados.
Para cada módulo também definimos um conjunto de testes para Actions, Types, Reducers e Componentes.
Os Releases Semanais
Para coletar feedback dos usuários constantemente, definimos o lançamento de releases semanais onde são envolvidos usuários chave do aplicativo ou até algum cliente em potencial.
No início de cada semana definimos uma meta para o time e a partir desta meta organizamos as tarefas do sprint. Todo sprint termina na Sexta-feira e neste dia criamos um build para cada plataforma.
O Release web fica disponível em um ambiente de homologação e o mobile enviamos via Fabric.io, Testflight e Beta Testers.
Os Resultados
Desenvolvemos e utilizamos estes processos e tecnologias durante todo ano de 2016 e parte de 2015. Até agora os resultados têm sido surpreendentes.
Cada vez que criamos um novo aplicativo, a arquitetura de referência recebe inúmeras otimizações que foram colhidas como feedback dos projetos anteriores.
Nossa produtividade no desenvolvimento de aplicativos aumentou consideravelmente já que agora reaproveitamos cerca de 90% do código entre plataformas. Com esta implementação de referência do Redux toda lógica de negócio é modular e desacoplada do front-end.
Aplicativos que antes precisavam de seis meses para serem desenvolvidos em 2 plataformas, agora podem ser criados em um terço do tempo.
Com o uso do React e Redux, conseguimos também equalizar o código entre os desenvolvedores, todo código é feito utilizando os mesmos blueprints e caso algo diferente apareça, o nosso lint irá reclamar no ciclo de integração contínua.
Connect
Juntos, imaginamos e criamos aplicações web e mobile que escalam automaticamente e estão sempre disponíveis a partir de qualquer dispositivo em qualquer lugar.
Realizamos treinamentos especializados em arquitetura e qualidade de software, implantamos sistemas de integração/entrega contínua (CI/CD) para web e mobile e também reinventamos e revisamos a arquitetura de sistemas complexos utilizando as mesmas tecnologias e processos que atendem milhões de usuários no mundo.
Se você tem problemas como os descritos neste artigo, envie uma mensagem para hello@getty.io, nós podemos te ajudar.
