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.
ReactNativena
globo.com
Webdeveloperhá7anos
4anosemeionaglobo.com.
Globoesporte,Home,NavegaçãoeApps.
Guilherme
Bruzzi
ambienteda
globo.com
• Grandes portais com mais de 50 milhões de
acessos diários
• Muitos programadores web que adoram JS ...
equipe de
produtos
ambienteda
globo.com
ge gshow
g1tt
equipe de
plataformas
oproblemadasapps
dagcom
• Problema atual: Todas em webview
• One app to rule them all
392 × 690392 × 690
oproblemadasapps
dagcom
oproblemadasapps
dagcom
• Primeira App em RN: Techtudo (depois g1, gshow e ge)
• Um feed nativo para consumir matérias
appshíbridas
• Soluções Webview como Cordova / Phonegap /
ionic
• Reaproveitamento de código forte
• Problemas da Webview
...
códigonativo
• Objective-C / Swift para iOS
• Java para Android
• Perfomance otimizada
• 2 códigos para as mesmas regras d...
pocnativo
• 1 semana para iOS
• 1 semana para Android
xamarin
• C# com Mono .NET framework e IDE própria
• Compilado para interagir com o Java e Obj-C
• Reaproveitamento de cód...
react
• Lib criada em 2013 pelo Facebook
• Performance na escrita de mudanças
• Componentização por padrão
• Comunidade at...
exemploreact
• Criado com create-react-app
1. Estilo inline
2. Props
3. State
npm install -g create-react-app
create-react...
reactplataformas
reactplataformas
• “learn once, write everywhere”:
1. Android (suporte Padrão)
2. iOS (suporte Padrão)
3. Windows: https:/...
reactnative
• Criado em 2015
• JS e React
• Estilo via dialeto de CSS / Flexbox
• Performance nativa
• Não usa webview
• R...
pocreactnative
• 2 semanas para os dois (código único)
Muitoobrigado!
=)
reactnative
arquitetura
• nenhuma webview
• Thread JS (webkit)
• Shadow Queue
• Main e threads Nativa (inclui UI)
• Mais p...
reactnative
arquitetura
• Códigos: https://github.com/guilhermebruzzi/rnExamples
• Exemplo geral
1. Hello World + Reload e hot reload
2. Component...
• Linter (Eslint airbnb)
• Flow (vs typescript)
• Mobx (vs Redux)
• RN Router Flux/ Mobx
Router
• Webview Bridge
• Urban A...
rnconfig
rnrouterflux/mobxrouter
• React Native router flux:
https://github.com/aksonov/react-native-router-flux
• React N...
rnconfig
linter
• Linter (Eslint extendendo eslint-config-airbnb)
• Erros na hora
Tipagem no meio do javascript
// @flow
const foo = (b: boolean): string => (
(b) ? 'Hello' : 'World'
);
const bar: string ...
const { action, observable } = mobx;
const { observer } = mobxReact;
class CountStore {
@observable count = 0;
@action add...
const injectScript = `
WebViewBridge.onMessage = function (message) {
console.log('Received from react native', message);
...
import ReactNativeUA from 'react-native-ua';
class App extends Component {
constructor(props) {
super(props);
ReactNativeU...
RN Networking: https://facebook.github.io/react-native/docs/network.html
Também suporta:
1. XMLHttpRequest (axios)
2. WebS...
RN Code Push: https://github.com/Microsoft/react-native-code-push
npm install -g code-push-cli
code-push register
code-pus...
• RN Fabric: https://github.com/corymsmith/react-
native-fabric
• https://fabric.io/
1. Crashlytics
2. Beta
rnconfig
fabric
rnconfig
crashlytics
rnconfig
beta
• Depender de projetos open source experimentais
• Erros que a sua especialidade não está acostumada
• Atualizações consta...
facebook.github.io
/react-native
reactnative
showcase
• Avalie sempre todas as alternativas.
Não existe bala de prata!
• Versão 0.35 (última, mas lançam uma nova numa média de
...
• guibruzzi@gmail.com
• fb.com/guilhermehbruzzi
• github.com/guilhermebruzzi
• dev.globo.com (blog da globo.com)
• fb.com/...
Perguntas?
Muitoobrigado!
=)
Upcoming SlideShare
Loading in …5
×

React Native na globo.com

1,373 views

Published on

Palestra explicando o porque o time de Apps da globo.com adotou o React Native como sua solução.
Eu também mostro exemplos de códigos em React Native e explico como a sua arquitetura funciona.

Published in: Software

React Native na globo.com

  1. 1. ReactNativena globo.com
  2. 2. Webdeveloperhá7anos 4anosemeionaglobo.com. Globoesporte,Home,NavegaçãoeApps. Guilherme Bruzzi
  3. 3. ambienteda globo.com • Grandes portais com mais de 50 milhões de acessos diários • Muitos programadores web que adoram JS e mais recentemente React • Nós amamos open source! opensource.globo.com
  4. 4. equipe de produtos ambienteda globo.com ge gshow g1tt equipe de plataformas
  5. 5. oproblemadasapps dagcom • Problema atual: Todas em webview • One app to rule them all
  6. 6. 392 × 690392 × 690 oproblemadasapps dagcom
  7. 7. oproblemadasapps dagcom • Primeira App em RN: Techtudo (depois g1, gshow e ge) • Um feed nativo para consumir matérias
  8. 8. appshíbridas • Soluções Webview como Cordova / Phonegap / ionic • Reaproveitamento de código forte • Problemas da Webview • “Cross-browser"
  9. 9. códigonativo • Objective-C / Swift para iOS • Java para Android • Perfomance otimizada • 2 códigos para as mesmas regras de negócio
  10. 10. pocnativo • 1 semana para iOS • 1 semana para Android
  11. 11. xamarin • C# com Mono .NET framework e IDE própria • Compilado para interagir com o Java e Obj-C • Reaproveitamento de código
  12. 12. react • Lib criada em 2013 pelo Facebook • Performance na escrita de mudanças • Componentização por padrão • Comunidade ativa e open source
  13. 13. exemploreact • Criado com create-react-app 1. Estilo inline 2. Props 3. State npm install -g create-react-app create-react-app my-app
  14. 14. reactplataformas
  15. 15. reactplataformas • “learn once, write everywhere”: 1. Android (suporte Padrão) 2. iOS (suporte Padrão) 3. Windows: https://github.com/ReactWindows/ react-native-windows 4. Ubuntu: https://github.com/CanonicalLtd/ react-native
  16. 16. reactnative • Criado em 2015 • JS e React • Estilo via dialeto de CSS / Flexbox • Performance nativa • Não usa webview • Reaproveitamento de código cross-plataforma
  17. 17. pocreactnative • 2 semanas para os dois (código único) Muitoobrigado! =)
  18. 18. reactnative arquitetura • nenhuma webview • Thread JS (webkit) • Shadow Queue • Main e threads Nativa (inclui UI) • Mais profundamente em: https://www.youtube.com/ watch?v=Ah2qNbI40vE (Tadeu Zagallo)
  19. 19. reactnative arquitetura
  20. 20. • Códigos: https://github.com/guilhermebruzzi/rnExamples • Exemplo geral 1. Hello World + Reload e hot reload 2. Componentes padrões: Textos, imagens e ListView 3. Routers que usamos reactnative exemplos
  21. 21. • Linter (Eslint airbnb) • Flow (vs typescript) • Mobx (vs Redux) • RN Router Flux/ Mobx Router • Webview Bridge • Urban Airship • ES6 fetch • Code Push • Fabric reactnativeconfig nagcom
  22. 22. rnconfig rnrouterflux/mobxrouter • React Native router flux: https://github.com/aksonov/react-native-router-flux • React Native mobx: https://github.com/aksonov/react-native-mobx
  23. 23. rnconfig linter • Linter (Eslint extendendo eslint-config-airbnb) • Erros na hora
  24. 24. Tipagem no meio do javascript // @flow const foo = (b: boolean): string => ( (b) ? 'Hello' : 'World' ); const bar: string = foo(); rnconfig flow
  25. 25. const { action, observable } = mobx; const { observer } = mobxReact; class CountStore { @observable count = 0; @action addCount() { this.count++; } @action decCount() { this.count--; } } const store = new CountStore(); @observer class App extends React.Component { render() { return ( <div> <span>Contador: {store.count}</span> <button onClick={() => store.addCount()}> + </button> <button onClick={() => store.decCount()}> - </button> </div> ); } } ReactDOM.render(<App />, document.getElementById('app')); rnconfig mobx Controle de estado global (https://jsbin.com/qizehep)
  26. 26. const injectScript = ` WebViewBridge.onMessage = function (message) { console.log('Received from react native', message); }; WebViewBridge.send('hello from webview'); `; class App extends React.Component { onBridgeMessage(message) { const { webviewbridge } = this.refs; console.log('Received from webview', message); webviewbridge.sendToBridge("hello from react-native"); } render() { return ( <WebViewBridge ref="webviewbridge" onBridgeMessage={this.onBridgeMessage.bind(this)} injectedJavaScript={injectScript} source={{uri: "http://google.com"}}/> ); } } rnconfig webviewbridge React Native Webview Bridge: https://github.com/alinz/react-native-webview-bridge
  27. 27. import ReactNativeUA from 'react-native-ua'; class App extends Component { constructor(props) { super(props); ReactNativeUA.enable_notification(); ReactNativeUA.handle_background_notification(); ReactNativeUA.set_named_user_id('user_id'); } componentWillMount() { // add handler to handle all incoming notifications ReactNativeUA.on_notification((notification) => { console.log('notification:', notification.data, notification.url, notification.platform); alert(notification.alert); }); } render () { return (<View><Text>ReactNativeUA</Text></View>); } } React Native UA: https://github.com/globocom/react-native-ua rnconfig urbanairship
  28. 28. RN Networking: https://facebook.github.io/react-native/docs/network.html Também suporta: 1. XMLHttpRequest (axios) 2. WebSocket fetch('https://facebook.github.io/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .then((movies) => { console.log('movies', movies); }) .catch((error) => { console.error(error); }); rnconfig fetch
  29. 29. RN Code Push: https://github.com/Microsoft/react-native-code-push npm install -g code-push-cli code-push register code-push app add <appName> code-push release-react <appName> <platform> rnconfig codepush
  30. 30. • RN Fabric: https://github.com/corymsmith/react- native-fabric • https://fabric.io/ 1. Crashlytics 2. Beta rnconfig fabric
  31. 31. rnconfig crashlytics
  32. 32. rnconfig beta
  33. 33. • 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) • Ter que criar bridges para módulos que já existem reactnative desvantagens
  34. 34. facebook.github.io /react-native reactnative showcase
  35. 35. • Avalie sempre todas as alternativas. Não existe bala de prata! • Versão 0.35 (última, mas lançam uma nova numa média de 2 semanas) • A próxima virá com uma contribuição nossa PR (#9617) • Muitas apps estão nascendo com React Native conclusão
  36. 36. • guibruzzi@gmail.com • fb.com/guilhermehbruzzi • github.com/guilhermebruzzi • dev.globo.com (blog da globo.com) • fb.com/globodev • slideshare.net/guilhermebruzzi/react-native-na-globocom contato
  37. 37. Perguntas?
  38. 38. Muitoobrigado! =)

×