React Native

emilianoeloi@gmail.com

Desenvolvedor desde 2005 / iOS 2014

Quase 2 anos na globo.com

Backstage Native

Emiliano Barbosa

agenda

• O que é React Native?

• Módulos Nativos

• React Native na globo.com

Que diabos é

React Native?

react native o que é?• “Rapid cross-platform mobile development”

react native

• “A React Native App is a Real Mobile App”

react native outros

Uai, é web ou não é?

• “A Javascript library for building user interfaces”

reactjs

https://facebook.github.io/react/

arquitetura

Posso usar?

https://www.thoughtworks.com/pt/radar/languages-and-frameworks

technology Radar Nov'16 thoughtWorks

57 Apps

react native showcase

https://facebook.github.io/ react-native/showcase.html

E eu com isso?

react native módulos nativos

http://moduscreate.com/leverage-existing-ios-views-react-native-app/

• “Real native code to access access to the full power of platform”

#import "React/RCTBridgeModule.h"

@interface OutputVolume : NSObject<RCTBridgeModule> @end

@implementation OutputVolume

RCT_EXPORT_MODULE()

@end

módulo nativo bridge module

RCT_EXPORT_METHOD(get) { float v = [AVAudioSession sharedInstance].outputVolume; RCTLogInfo(@"Volume level: %f", v); }

import { NativeModules } from 'react-native'; const OV = NativeModules.OutputVolume; OV.get();

módulo nativo método

módulo nativo macros

• Métodos com argumentos

• Métodos com callback

• Métodos com Promises

• Threading (GCD)

• Injeção de Dependências

• Envio de Eventos (eventDispatcher)

Eu posso fazer isso!

React Native na globo.com

equipe de produtos

equipe de plataformas

globo.com

globo.com app como plataforma

globo.com app como plataforma

Cabeçalho (NavBar)

globo.com app como plataforma

Régua (TabBar)

globo.com app como plataforma

Webview

globo.com app como plataforma

Cabeçalho (NavBar)

Webview

Régua (TabBar)

globo.com ponto de partida

http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps

globo.com ponto de partida

http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps

globo.com ponto de partida

http://www.slideshare.net/sbmadhav/creating-native-cross-platform-apps

globo.com provas de conceito

• Tentativa de melhoria da versão browser

globo.com provas de conceito

• Tentativa de melhoria da versão browser

• Desenvolvimento de uma versão nativa

globo.com provas de conceito

• Tentativa de melhoria da versão browser

• Desenvolvimento de uma versão nativa

• Desenvolvimento de uma versão multi-plataforma

globo.com provas de conceito

Spoiler

• Experiência do Usuário (App Nativa)

globo.com solução multi plataforma

• Experiência do Usuário (App Nativa)

• Conhecimento de Javascript dos times

globo.com solução multi plataforma

• Experiência do Usuário (App Nativa)

• Conhecimento de Javascript dos times

• Opensource (O Facebook está empenhado tanto no ReactJs quanto no ReactNative)

globo.com solução multi plataforma

• Experiência do Usuário (App Nativa)

• Conhecimento de Javascript dos times

• Opensource (O Facebook está empenhado tanto no ReactJs quanto no ReactNative)

• Reaproveitamento de código

globo.com solução multi plataforma

392 × 690392 × 690

globo.com resultado(wip)

React Native Browser

ReactNative 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>

stack code push

• Xcode

• Linter (Eslint airbnb)

• Flow (vs Typescript)

• MobX (vs Redux)

• RN Router Flux/ Mobx Router

• Webview Bridge

• AndroidStudio

• Urban Airship

• ES6 fetch

• Code Push

• Fabric/Firebase

• Jest

globo.com stack, editores e ide's

E a parte ruim?

• Depender de projetos open source experimentais (0.40)

react native desvantagens

• Depender de projetos open source experimentais

• Erros que a sua especialidade não está acostumada

react native desvantagens

• Depender de projetos open source experimentais

• Erros que a sua especialidade não está acostumada

• Atualizações constantes e quebras de contrato

react native desvantagens

• 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)

react native desvantagens

• 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)

• Estigma.

react native desvantagens

react native demo

npm install -g react-native react-native-cli react-native init cocoaHeadsApp

cd cocoaHeadsApp react-native run-ios

React Native na globo.com

• emilianoeloi@gmail.com

• linkedin.com/in/emilianoeloi

• github.com/emilianoeloi

• talentos.globo.com

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

• 15º CocoaTalks

contato

globo.com

Pessoas talentosas criam as suas próprias oportunidades e essa é a sua chance de ser quem você é. Sabemos que você nasceu pra isso!

http://talentos.globo.com

• React Native - Desenvolvendo aplicações nativas com JavaScript

• ReactNative Player

• Who's using React Native?

• How to Create a React Native iOS Native Module

• Is React Native next choice for mobile apps?

• Dive into React Native performance

links referências

• Tadeu Zagallo: React Native Architecture Overview

• React.js Conf 2015 Keynote - Introducing React Native

• React.js Conf 2015 Keynote 2 - A Deep Dive into React Native

• react native training

• Technology Radar - Languages & Frameworks

• TIOBE Index for January 2017

links referências