Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Download to read offline

Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas após quase 2 anos de desafios

Download to read offline

Palestra DevCamp 2019

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas após quase 2 anos de desafios

  1. 1. Nextel + React Native: Lições aprendidas após quase 2 anos de desafios
  2. 2. Conclusão Introdução Agenda Nextel: README.md React Native: Hello World Perguntas e Respostas
  3. 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. 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. 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. 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. 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. 8. BACI IN TIME
  9. 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. 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. 11. "React Native será 3 vezes mais rápido para desenvolver e 3 vezes mais barato"
  12. 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. 13. RAGNAROK A destruição cataclísmica do cosmos e de tudo que nele há - incluindo os Deuses.
  14. 14. NIFLHEIM Reino da Névoa
  15. 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. 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. 17. Niflheim A aplicação WEB * Imagem ilustrativa * Imagem ilustrativa
  18. 18. Niflheim A aplicação mobile * Imagen ilustrativa * Imagen ilustrativa
  19. 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. 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. 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. 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. 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. 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. 25. BIFROST "Ponte que faz a liga o domínio dos deuses, Asgard, e a Terra, Midgard, terra dos mortais"
  26. 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. 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. 28. Bifrost V1 da Bifrost Thor Pré-Pago - Mobile Bifrost pod 'Thor', 'x.x.x' pod 'Bifrost', 'x.x.x'
  29. 29. Bifrost V2 - Melhorando e evoluindo Thor Pré-Pago - Mobile Bifrost pod 'Thor', 'x.x.x'
  30. 30. 1. pod 'Thor', '0.0.1' 2. import Thor 3. PresentThor.showPrePaid(from: self.rootViewController) Bifrost
  31. 31. "A Bifrost é muito simples de integrar no projeto. É tão simples quanto para remover. =) " 2018 - Barrault, Antoine
  32. 32. Bifrost Fácil integração
  33. 33. Bifrost Fácil integração
  34. 34. Entregas pela Bifrost Solicitação e status de portabilidades
  35. 35. Entregas pela Bifrost Status de portabilidade - Área não logada
  36. 36. Entregas pela Bifrost Cadastro de Débito Automático 89,6% de Task Success
  37. 37. Entregas pela Bifrost Cadastro de Débito Automático
  38. 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. 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. 40. Perguntas e Respostas Vem tranquilo...
  41. 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

Palestra DevCamp 2019

Views

Total views

152

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×