Nextel adotou o React Native para desenvolver aplicativos móveis, mas enfrentou desafios de desempenho e manutenção. Eles criaram a Bifrost para integrar código React Native em aplicativos nativos e facilitar a entrega de recursos aos usuários de forma híbrida. A apresentação discute as lições aprendidas após quase 2 anos usando essas tecnologias.

1. Nextel + React Native:
Lições aprendidas após quase
2 anos de desafios

2. Conclusão
Introdução
Agenda
Nextel: README.md
React Native: Hello World
Perguntas e Respostas

3. 29 anos - Guarulhos - SP
Bacharel em Ciência da Computação e
Mestrando em Física e Astronomia, pela
Universidade do Vale do Paraíba
(UNIVAP).
Com início em 2012, minha carreira como
desenvolvedor para plataforma da maçã
foi bastante diversificada em
experiências, desenvolvi apps para os
mercados de eventos, automotivo,
infantil e varejo.
Hoje atuo como líder técnico do time de
mobile da Nextel, onde estou desde 2017.
Principais hobbies são Astronomia,
Ciência, Hackathons, Swift e Tênis de
Mesa.
Felipe Antonio
Cardoso
Líder Técnico iOS
Mini Bio

4. Gabriel Pacheco
Coordenador
Técnico Front
29 anos - São Paulo - SP
Casado com Gabriela Pacheco
Pai da Nina
Sou viciado em pesca e tem como
hobbies tocar alguns instrumentos e
cantar
Bacharel em Ciência da Computação pelo
Mackenzie
Formação profissional bem Nutella,
comparada com outros profissionais da
minha idade, trabalhando sempre no
mundo Mobile.
Em 2012-2013 tive um aplicativo de
localização dos ônibus de São Paulo
chamado Onde está meu ônibus?
Mini Bio

5. Temos uma herança de inovações revolucionárias, exemplificadas na
tecnologia Push-to-Talk, que nos leva a continuar a alimentar nosso
espírito empreendedor e a desafiar os padrões do setor.
Nextel
Início da era Nextel

6. Nextel
Sermos a empresa de telecomunicações mais admirada e de mais
confiança, reconhecidos pela excelência no atendimento, na
inovação e contribuição para com as comunidades em que
operamos.
Nossa visão

7. Nextel - Apps
Melhores notas nas lojas entre todas as telecoms do Brasil
Meu Nextel iOS - 4.6
Meu Nextel Android - 4.5
Happy iOS - 4.7
Happy Android - 4.0

8. BACI IN TIME

9. Nextel A.R.N. (Antes do React Native)
● 4 aplicativos de atendimento aos planos nas lojas
● Equipes de desenvolvedores nativos de alto desempenho
○ 7 desenvolvedores iOS
○ 4 desenvolvedores Android
● Aplicativo Happy com arquitetura e desempenho 5 ★
● Aplicativo Meu Nextel à todo vapor em refactors
Cenário no desenvolvimento de apps em 2017

10. Nextel A.R.N. (Antes do React Native)
2018 - Novos direcionamentos
● Equilibrar investimentos e retorno
● Objetivo de unificar produtos/code bases
● Manter a qualidade dos nosso aplicativos
● Sustentar o crescimento/evolução

11. "React Native será 3
vezes mais rápido para
desenvolver e 3 vezes
mais barato"

12. React Native: Como começamos
Formação da equipe e conteúdo de estudo
● 3 Desenvolvedores iOS.
● 2 Desenvolvedores REACT WEB.
● Paradigma dev. WEB.
● Javascript.
● REDUX.
● Componentização
● Navegação no aplicativo.
● Objetivo: Pré-Pago Nextel.

13. RAGNAROK
A destruição cataclísmica do cosmos e de tudo que nele há - incluindo os Deuses.

14. NIFLHEIM
Reino da Névoa

15. NIFLHEIM
"É terceiro e último nível, o domínio dos mortos. É um local gelado, onde a noite não tem
fim e para onde os homens de mau caráter são enviados após a morte."

16. Niflheim
Niflheim
Pré-Pago
Componentes Visuais
Camada de Rede
Lógica de Negócio
● Início: Fevereiro de 2018.
● Projeto iniciado a partir do projeto
"Hello World" do React-Native,
integrando React-Native-Web.
● Tempo investido: 4 mêses.
● Boa curva de aprendizado e
adaptação ao novo ecossistema.

17. Niflheim
A aplicação WEB
* Imagem ilustrativa * Imagem ilustrativa

18. Niflheim
A aplicação mobile
* Imagen ilustrativa * Imagen ilustrativa

19. Niflheim
Niflheim
Pré-Pago
Componentes Visuais
Camada de Rede
Lógica de Negócio
● Código específico para Mobile e
outro para Web, em algumas
situações.
● A experiência de manter o projeto
web junto do projeto mobile não
estava sendo muito boa.
● Os fluxos que desenvolvemos
poderiam ser modularizados de
alguma forma.
Analise após o MVP - Mínimo Produto Viável

20. O Lokinho meu
Pré-Pago - Web
Thor
Pré-Pago - Mobile
Fim do Niflheim - Deuses se juntam ao Ragnarok
Jord
Componente Visuais
Odin
Networking - API
Freya
Componentes Visuais
● Separamos os
projetos RN e
React.
● Criamos bibliotecas
para as camadas
visuais e de rede.
● Mais Devs se
juntaram à nós.

21. Jun/2018 - Airbnb: Sunsetting React Native
Um dos maiores cases do uso do React-Native, deixa de usar a tecnologia.
● Airbnb - Failing to Reach Our Goals:
○ Velocidade.
○ Manter a qualidade.
○ Escrever código uma única
vez, ao invés de duas.
○ Melhorar a experiência do
usuário.

22. Jun/2018 - Airbnb: Sunsetting React Native
Um dos maiores cases do uso do React-Native, deixa de usar a tecnologia.
● O que deu certo (13 items):
○ Código multiplataforma.
○ Unified Design Language
System.
○ React.
○ Performance.
○ Redux.
○ Flexbox.

23. Jun/2018 - Airbnb: Sunsetting React Native
Um dos maiores cases do uso do React-Native, deixa de usar a tecnologia.
● O que não deu muito certo (19 items):
○ Imaturidade do RN.
○ Manter um fork do framework.
○ Refactoring.
○ Bibliotecas de código aberto do
React-Native.
○ Monitoramento de Crashes.
○ Tempo de inicialização
○ Acessibilidade

24. O React Native e Nativo na Nextel
React-Native e Nativo em um só app.
● O produto que nossa equipe
desenvolveu até aqui precisaria estar no
app principal da Nextel.
● Nextel começa a adotar o formato de
Squads.
● Oportunidade de desenvolver uma
solução de integração entre o nativo e o
React-Native.
Thor
Pré-Pago - Mobile

25. BIFROST
"Ponte que faz a liga o domínio dos deuses, Asgard,
e a Terra, Midgard, terra dos mortais"

26. Bifrost
O que é a Bifrost?
● Um projeto nativo iOS e Android que usa dos recursos do React para
carregar um App.js, gerado por uma aplicação React-Native, para dentro
de um app nativo.

27. import React
class ReactViewController: UIViewController { //… swift code }
extension ReactViewController: RCTBridgeDelegate {
public override func loadView() {
self.view = RCTRootView(
bridge: RCTBridge.init(delegate: self, launchOptions: [:]),
moduleName: self.moduleName, //Ex: "Thor"
initialProperties: self.props //Any Parameter
)
}
}
Bifrost

28. Bifrost
V1 da Bifrost
Thor
Pré-Pago - Mobile
Bifrost
pod 'Thor', 'x.x.x'
pod 'Bifrost', 'x.x.x'

29. Bifrost
V2 - Melhorando e evoluindo
Thor
Pré-Pago - Mobile
Bifrost
pod 'Thor', 'x.x.x'

30. 1. pod 'Thor', '0.0.1'
2. import Thor
3. PresentThor.showPrePaid(from: self.rootViewController)
Bifrost

31. "A Bifrost é muito simples
de integrar no projeto. É
tão simples quanto para
remover. =) "
2018 - Barrault, Antoine

32. Bifrost
Fácil integração

33. Bifrost
Fácil integração

34. Entregas pela Bifrost
Solicitação e status de portabilidades

35. Entregas pela Bifrost
Status de portabilidade - Área não logada

36. Entregas pela Bifrost
Cadastro de Débito Automático
89,6%
de Task Success

37. Entregas pela Bifrost
Cadastro de Débito Automático

38. Conclusão
+ Existe vida fora do nativo
+ JS + React Web atrai muitos desenvolvedores web para o mundo mobile
+ Compartilhamento de code base (PARCIAL)
+ Performático
- Cenário Híbrido - Debugging complicado
- Cenário Híbrido - Necessidade de uma Bifrost ou até algo assim menos
Plug&Play
- Cenário Híbrido - Necessidade de Skills Nativas para finalizar integração
sobre React Native

39. #FICAADICA
● Definir bem seu produto
● Avaliar melhor solução técnica para maximizar o desenvolvimento
● Equalização do time de acordo com a solução técnica escolhida
● NÃO TER PRECONCEITOS
sobre desenvolvimento de aplicações mobile

40. Perguntas e Respostas
Vem tranquilo...

41. Digital Team
Contatos
Gabriel Pacheco
Felipe Antonio Cardoso
Email: felipe.cardoso@nextel.com.br
Twitter: @FelipeCardoso89
Email: gabriel.pacheco2@nextel.com.br
Twitter: @Pacheco_Gab