Download - React Native na globo.com
React Native na globo.com
Web developer há 7 anos
4 anos e meio na globo.com.
Globoesporte, Home, Navegação e Apps.
Guilherme Bruzzi
ambiente da 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
equipe de produtos
ambiente da globo.com
ge gshow
g1tt
equipe de plataformas
o problema das apps da gcom
• Problema atual: Todas em webview
• One app to rule them all
392 × 690392 × 690
o problema das apps da gcom
o problema das apps da gcom
• Primeira App em RN: Techtudo (depois g1, gshow e ge)
• Um feed nativo para consumir matérias
apps híbridas
• Soluções Webview como Cordova / Phonegap / ionic
• Reaproveitamento de código forte
• Problemas da Webview
• “Cross-browser"
código nativo
• Objective-C / Swift para iOS
• Java para Android
• Perfomance otimizada
• 2 códigos para as mesmas regras de negócio
poc nativo
• 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ódigo
react
• Lib criada em 2013 pelo Facebook
• Performance na escrita de mudanças
• Componentização por padrão
• Comunidade ativa e open source
exemplo react
• Criado com create-react-app
1. Estilo inline
2. Props
3. State
npm install -g create-react-app
create-react-app my-app
react plataformas
react plataformas
• “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
react native
• Criado em 2015
• JS e React
• Estilo via dialeto de CSS / Flexbox
• Performance nativa
• Não usa webview
• Reaproveitamento de código cross-plataforma
poc react native
• 2 semanas para os dois (código único)
Muito obrigado! =)
react native 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)
react native arquitetura
• 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
react native exemplos
• Linter (Eslint airbnb)
• Flow (vs typescript)
• Mobx (vs Redux)
• RN Router Flux/ Mobx Router
• Webview Bridge
• Urban Airship
• ES6 fetch
• Code Push
• Fabric
react native config na gcom
rn config rn router flux / mobx router
• React Native router flux: https://github.com/aksonov/react-native-router-flux
• React Native mobx: https://github.com/aksonov/react-native-mobx
rn config 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 = foo();
rn config flow
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'));
rn config mobx
Controle de estado global (https://jsbin.com/qizehep)
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"}}/> ); } }
rn config webview bridge
React Native Webview Bridge: https://github.com/alinz/react-native-webview-bridge
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
rn config urban airship
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); });
rn config fetch
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>
rn config code push
• RN Fabric: https://github.com/corymsmith/react-native-fabric
• https://fabric.io/
1. Crashlytics
2. Beta
rn config fabric
rn config crashlytics
rn config beta
• 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
react native desvantagens
facebook.github.io/react-native
react native 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 2 semanas)
• A próxima virá com uma contribuição nossa PR (#9617)
• Muitas apps estão nascendo com React Native
conclusão
• fb.com/guilhermehbruzzi
• github.com/guilhermebruzzi
• dev.globo.com (blog da globo.com)
• fb.com/globodev
• slideshare.net/guilhermebruzzi/react-native-na-globocom
contato
Perguntas?
Muito obrigado! =)