O documento apresenta React Native, uma biblioteca Javascript para desenvolvimento de aplicativos móveis multiplataforma. Apresenta as vantagens de ter experiência nativa para o usuário e experiência web para o desenvolvedor. Detalha como a Globo.com utiliza React Native para desenvolver aplicativos para iOS e Android de forma compartilhada.

1. ReactNative
Experiência Nativa para o usuário
Experiência Web para o desenvolvedor

2. emilianoeloi@gmail.com
Desenvolvedordesde2005/iOS2014
2anosnaglobo.com
Native
Emiliano
Barbosa
Florianópolis Maio 2017

3. globo.com
Pessoas talentosas criam as suas próprias oportunidades e essa é a
sua chance de ser quem você é. Sabemos que você nasceu pra isso!
http://talentos.globo.com

4. agenda
• O que é React Native?
• Módulos Nativos
• React Native na globo.com

5. Que diabos é
React Native?

6. reactnative
oqueé?
• “Rapid cross-platform mobile development”

7. reactnative
• “A React Native App is a Real Mobile App”

8. reactnative
outros

9. Uai, é web ou não é?

10. • “A Javascript library for building user interfaces”
reactjs
https://facebook.github.io/react/

11. arquitetura

12. Posso usar?

13. https://www.thoughtworks.com/pt/radar/languages-and-frameworks
technologyRadar Nov'16
thoughtWorks

14. reactnative
showcase
https://facebook.github.io/
react-native/showcase.html
https://github.com/
ReactNativeNews/React-Native-
Apps

15. E eu com isso?

16. reactnative
módulosnativos
http://moduscreate.com/leverage-existing-ios-views-react-native-app/
• “Real native code to access access to the full power of
platform”

17. #import "React/RCTBridgeModule.h"
@interface OutputVolume : NSObject<RCTBridgeModule>
@end
@implementation OutputVolume
RCT_EXPORT_MODULE()
@end
módulonativo
bridgemodule

18. RCT_EXPORT_METHOD(get) {
float v = [AVAudioSession
sharedInstance].outputVolume;
RCTLogInfo(@"Volume level: %f", v);
}
import { NativeModules } from 'react-native';
const OV = NativeModules.OutputVolume;
OV.get();
módulonativo
método

19. módulonativo
macros
• Métodos com argumentos
• Métodos com callback
• Métodos com Promises
• Threading (GCD)
• Injeção de Dependências
• Envio de Eventos (eventDispatcher)

20. Eu posso fazer isso!

21. ReactNativena
globo.com

22. equipe de
produtos
equipe de
plataformas
globo.com

23. globo.com
appcomoplataforma

24. globo.com
appcomoplataforma
Cabeçalho (NavBar)

25. globo.com
appcomoplataforma
Régua (TabBar)

26. globo.com
appcomoplataforma
Webview

27. globo.com
appcomoplataforma
Cabeçalho (NavBar)
Webview
Régua (TabBar)

28. globo.com
pontodepartida
http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps

29. globo.com
pontodepartida
http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps

30. globo.com
pontodepartida
http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps

31. globo.com
provasdeconceito

32. • Tentativa de melhoria da versão browser
globo.com
provasdeconceito

33. • Tentativa de melhoria da versão browser
• Desenvolvimento de uma versão nativa
globo.com
provasdeconceito

34. • Tentativa de melhoria da versão browser
• Desenvolvimento de uma versão nativa
• Desenvolvimento de uma versão multi-plataforma
globo.com
provasdeconceito

35. Spoiler

36. • Experiência do Usuário (App Nativa)
globo.com
soluçãomultiplataforma

37. • Experiência do Usuário (App Nativa)
• Conhecimento de Javascript dos times
globo.com
soluçãomultiplataforma

38. • Experiência do Usuário (App Nativa)
• Conhecimento de Javascript dos times
• Opensource (O Facebook está empenhado tanto no
ReactJs quanto no ReactNative)
globo.com
soluçãomultiplataforma

39. • Experiência do Usuário (App Nativa)
• Conhecimento de Javascript dos times
• Opensource (O Facebook está empenhado tanto no
ReactJs quanto no ReactNative)
• Reaproveitamento de código
globo.com
soluçãomultiplataforma

40. 392 × 690392 × 690
globo.com
resultado(WIP)
React
Native
Browser

41. E a parte ruim?

42. • Depender de projetos open source experimentais (0.44)
reactnative
desvantagens

43. • Depender de projetos open source experimentais
• Erros que a sua especialidade não está acostumada
reactnative
desvantagens

44. • Depender de projetos open source experimentais
• Erros que a sua especialidade não está acostumada
• Atualizações constantes e quebras de contrato
reactnative
desvantagens

45. • Depender de projetos open source experimentais
• Erros que a sua especialidade não está acostumada
• Atualizações constantes e quebras de contrato
• Ler muito código e estudar muito (relativamente pouca
documentação)
reactnative
desvantagens

46. • Depender de projetos open source experimentais
• Erros que a sua especialidade não está acostumada
• Atualizações constantes e quebras de contrato
• Ler muito código e estudar muito (relativamente pouca
documentação)
• Estigma.
reactnative
desvantagens

47. npm install -g react-native react-native-cli
react-native init TDCApp
cd TDCApp
react-native run-ios
react-native run-android
Experimenteo
ReactNative!
https://facebook.github.io/react-native/

48. • emilianoeloi@gmail.com
• linkedin.com/in/emilianoeloi
• github.com/emilianoeloi
contato

49. • React Native - Desenvolvendo aplicações nativas com
JavaScript
• ReactNative Player
• Who's using React Native?
• How to Create a React Native iOS Native Module
• Is React Native next choice for mobile apps?
• Dive into React Native performance
links
referências

50. • Tadeu Zagallo: React Native Architecture Overview
• React.js Conf 2015 Keynote - Introducing React Native
• React.js Conf 2015 Keynote 2 - A Deep Dive into React
Native
• react native training
• Technology Radar - Languages & Frameworks
• TIOBE Index for January 2017
links
referências