More Related Content Similar to React Native na globo.com (20) React Native na globo.com3. 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
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
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
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
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
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
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