React Native na globo.com

38
React Native na globo.com

Transcript of React Native na globo.com

Page 1: React Native na globo.com

React Native na globo.com

Page 2: 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

Page 3: React Native na globo.com

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

Page 4: React Native na globo.com

equipe de produtos

ambiente da globo.com

ge gshow

g1tt

equipe de plataformas

Page 5: React Native na globo.com

o problema das apps da gcom

• Problema atual: Todas em webview

• One app to rule them all

Page 6: React Native na globo.com

392 × 690392 × 690

o problema das apps da gcom

Page 7: React Native na globo.com

o problema das apps da gcom

• Primeira App em RN: Techtudo (depois g1, gshow e ge)

• Um feed nativo para consumir matérias

Page 8: React Native na globo.com

apps híbridas

• Soluções Webview como Cordova / Phonegap / ionic

• Reaproveitamento de código forte

• Problemas da Webview

• “Cross-browser"

Page 9: React Native na globo.com

código nativo

• Objective-C / Swift para iOS

• Java para Android

• Perfomance otimizada

• 2 códigos para as mesmas regras de negócio

Page 10: React Native na globo.com

poc nativo

• 1 semana para iOS

• 1 semana para Android

Page 11: React Native na globo.com

xamarin

• C# com Mono .NET framework e IDE própria

• Compilado para interagir com o Java e Obj-C

• Reaproveitamento de código

Page 12: React Native na globo.com

react

• Lib criada em 2013 pelo Facebook

• Performance na escrita de mudanças

• Componentização por padrão

• Comunidade ativa e open source

Page 13: React Native na globo.com

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

Page 14: React Native na globo.com

react plataformas

Page 15: React Native na globo.com

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

Page 16: React Native na globo.com

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

Page 17: React Native na globo.com

poc react native

• 2 semanas para os dois (código único)

Muito obrigado! =)

Page 18: React Native na globo.com

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)

Page 19: React Native na globo.com

react native arquitetura

Page 20: React Native na globo.com

• 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

Page 21: React Native na globo.com

• 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

Page 22: React Native na globo.com

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

Page 23: React Native na globo.com

rn config linter

• Linter (Eslint extendendo eslint-config-airbnb)

• Erros na hora

Page 24: React Native na globo.com

Tipagem no meio do javascript

// @flow const foo = (b: boolean): string => ( (b) ? 'Hello' : 'World' );

const bar: string = foo();

rn config flow

Page 25: React Native na globo.com

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)

Page 26: React Native na globo.com

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

Page 27: React Native na globo.com

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

Page 28: React Native na globo.com

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

Page 29: React Native na globo.com

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

Page 30: React Native na globo.com

• RN Fabric: https://github.com/corymsmith/react-native-fabric

• https://fabric.io/

1. Crashlytics

2. Beta

rn config fabric

Page 31: React Native na globo.com

rn config crashlytics

Page 32: React Native na globo.com

rn config beta

Page 33: React Native na globo.com

• 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

Page 34: React Native na globo.com

facebook.github.io/react-native

react native showcase

Page 35: React Native na globo.com

• 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

Page 36: React Native na globo.com

[email protected]

• fb.com/guilhermehbruzzi

• github.com/guilhermebruzzi

• dev.globo.com (blog da globo.com)

• fb.com/globodev

• slideshare.net/guilhermebruzzi/react-native-na-globocom

contato

Page 37: React Native na globo.com

Perguntas?

Page 38: React Native na globo.com

Muito obrigado! =)