O documento discute a implementação de React Native na Globo.com, destacando a transição de WebView para um aplicativo nativo que otimiza a performance e o reaproveitamento de código. Menciona a criação de diversas aplicações usando React Native, suas vantagens, desvantagens, e componentes como MobX e WebView Bridge. O autor conclui enfatizando a constante evolução da tecnologia e a importância do open source.

1. ReactNativena
globo.com

2. Webdeveloperhá7anos
4anosemeionaglobo.com.
Globoesporte,Home,NavegaçãoeApps.
Guilherme
Bruzzi

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. equipe de
produtos
ambienteda
globo.com
ge gshow
g1tt
equipe de
plataformas

5. oproblemadasapps
dagcom
• Problema atual: Todas em webview
• One app to rule them all

6. 392 × 690392 × 690
oproblemadasapps
dagcom

7. oproblemadasapps
dagcom
• Primeira App em RN: Techtudo (depois g1, gshow e ge)
• Um feed nativo para consumir matérias

8. appshíbridas
• Soluções Webview como Cordova / Phonegap /
ionic
• Reaproveitamento de código forte
• Problemas da Webview
• “Cross-browser"

9. códigonativo
• Objective-C / Swift para iOS
• Java para Android
• Perfomance otimizada
• 2 códigos para as mesmas regras de negócio

10. pocnativo
• 1 semana para iOS
• 1 semana para Android

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. react
• Lib criada em 2013 pelo Facebook
• Performance na escrita de mudanças
• Componentização por padrão
• Comunidade ativa e open source

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

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. 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. pocreactnative
• 2 semanas para os dois (código único)
Muitoobrigado!
=)

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

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. • 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. 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. rnconfig
linter
• Linter (Eslint extendendo eslint-config-airbnb)
• Erros na hora

24. Tipagem no meio do javascript
// @flow
const foo = (b: boolean): string => (
(b) ? 'Hello' : 'World'
);
const bar: string = foo();
rnconfig
flow

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. 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. 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. 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. 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. • RN Fabric: https://github.com/corymsmith/react-
native-fabric
• https://fabric.io/
1. Crashlytics
2. Beta
rnconfig
fabric

31. rnconfig
crashlytics

32. rnconfig
beta

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. facebook.github.io
/react-native
reactnative
showcase

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. • 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. Perguntas?

38. Muitoobrigado!
=)