React Native na globo.com
-
Upload
emiliano-barbosa -
Category
Technology
-
view
84 -
download
1
Transcript of React Native na globo.com
React Native
Desenvolvedor desde 2005 / iOS 2014
Quase 2 anos na globo.com
Backstage Native
Emiliano Barbosa
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
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)
• 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
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
• 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