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.
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
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.
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.
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.
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
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