SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
Desenvolvendo 

uma App multiplataforma
compartilhando 90% do código
GUILHERME HEYNEMANN BRUZZI | FRONT<IN>BH 2017
Guilherme
Heynemann
Bruzzi
+ 2000 lojas
97%Do comércio
no Brasil
97%
OmnichannelOmnichannelOmnichannel
PROBLEMAS + EQUIPE FRONTEND -> STACK
Construção
inStore
1. App nativa
2. Xamarin
3. Apps Híbridas
4. PWA
5. React Native ou Framework Expo
6. React XP
Possíveis escolhas
. Objetive-C / Swift para iOS
. Java para Android
. .NET para Windows
. Performance otimizada
. 3 códigos para as mesmas regras de negócio
Apps Nativas
. C# com Mono .NET framework e IDE própria
. Compilado para interagir com o Java e Obj-C
. Reaproveitamento de código
Xamarin
Apps Híbridas
. Cordova / Phonegap / Ionic
. Reaproveitamento de código
. Problemas da webview
. Cross-browser
PWA
. Renderização no browser
. Pouco espaço no aparelho
. Ausência nas lojas de apps
. APIs mais modernas do browser é o
importante
. Suporta boa parte das APIs nativas
. Para exceções é necessário ejetar para o nativo
. React Native Windows (suporte apenas ao 10)
Expo
. Suporte ao Windows é fraco ainda (WIP para
Windows 10)
. O ReactXP recomenda usar a sua versão web 

com electron para usar no Windows 7 e 8
React XP
Nativo + Web
Casca de
Apps
Arquitetura

Final
SPA
Electron
React Native
. Componentização por padrão
. Comunidade ativa e open source
. VTEX IO
Extensível
Customizável
React
React

Native
Electron
IdentificaçãoCarrinhoSeleção de PagamentosComunicação com servidoresConexão com a CapptaPagamentoConfirmação
1. RN Webview Bridge
2. Electron IPC
3. Tachyons
4. Eslint + Prettier
Outras escolhas
5. Flow
6. Jest
7. Redux + Redux Logic + Redux persist
8. PR + Continuous deployment
RN 

Webview
Bridge
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'}}/>
);
}
}
github.com/vtex/react-native-webview-bridge
Electron
IPC
// main.js (node)
const ipcMain = require('electron').ipcMain
ipcMain.on('webview-event', function(event, data) {
console.log(data)
mainWindow.send('webview-event', { 'msg': 'hello from node' })
})
// renderer.js (browser)
const ipcRenderer = require('electron').ipcRenderer
ipcRenderer.on('webview-event', function(event, data) {
console.log(data)
})
ipcRenderer.send('webview-event', { 'msg': 'hello from chromium' })
Tachyons <div className=“flex flex-auto mv3 pa3"></div>
. CSS funcional
. 14KB
. Evita quebras 

de outros layouts
Eslint +
Prettier
Flow
// @flow
const foo = (b: boolean): string => (
(b) ? 'Hello' : 'World'
)
const bar: string = foo()
PR +

Continuous

Deployment
Jest
import Component from '../src/'
describe('Component', () => {
let node
beforeEach(() => {
node = document.createElement('div')
})
afterEach(() => {
unmountComponentAtNode(node)
})
it('displays a welcome message', () => {
render(<Component />, node, () => {
expect(node.innerHTML).toContain('Carregando...')
expect(node.innerHTML).toContain('inject')
})
})
})
Redux +
Redux Logic +
Redux persist
export default function createAppStore(initialValue = {}) {
const logicMiddleware = createLogicMiddleware(logic)
const middleware = [logicMiddleware]
let composeEnhancers = compose
if (process.env.NODE_ENV === 'development') {
composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__()
: compose
}
const store = createStore(
reducer,
initialValue,
composeEnhancers(applyMiddleware(...middleware), autoRehydrate())
)
createPersistor(store)
return store
}
engineering.vtex.com
design.vtex.com
Sorteio de
smartwatch
no stand da
VTEX!
@guilhermebruzz
i
Muito obrigado! 😅

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
 
Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
Programação Orientada a Testes
Programação Orientada a TestesProgramação Orientada a Testes
Programação Orientada a Testes
 
Testes com xUnit + Coding Dojo
Testes com xUnit + Coding DojoTestes com xUnit + Coding Dojo
Testes com xUnit + Coding Dojo
 
9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem9 erros que desenvolvedores Node.js cometem
9 erros que desenvolvedores Node.js cometem
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
 
Blazor #SnetTalks3
Blazor  #SnetTalks3Blazor  #SnetTalks3
Blazor #SnetTalks3
 
Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
Comparando as Hypes - React & Vue
Comparando as Hypes - React & VueComparando as Hypes - React & Vue
Comparando as Hypes - React & Vue
 
Introdução ao Github actions - TDC Connections
Introdução ao Github actions - TDC ConnectionsIntrodução ao Github actions - TDC Connections
Introdução ao Github actions - TDC Connections
 
Criar um sistema com asp net
Criar um sistema com asp netCriar um sistema com asp net
Criar um sistema com asp net
 
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimentoDevops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
Devops CI/CD: Obtendo qualidade de vida para o time de desenvolvimento
 
A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!
 
Curso de ReactJS
Curso de ReactJSCurso de ReactJS
Curso de ReactJS
 
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
 
Performance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.jsPerformance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.js
 
UAI Test - Introdução Prática ao Jenkins
UAI Test - Introdução Prática ao JenkinsUAI Test - Introdução Prática ao Jenkins
UAI Test - Introdução Prática ao Jenkins
 
ASP.NET Core com Linux, Docker e Azure
ASP.NET Core com Linux, Docker e AzureASP.NET Core com Linux, Docker e Azure
ASP.NET Core com Linux, Docker e Azure
 

Semelhante a Desenvolvendo uma App multiplataforma compartilhando 90% do código

Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Felipe Blini
 
Introdução ao Google TV
Introdução ao Google TVIntrodução ao Google TV
Introdução ao Google TV
Aécio Costa
 

Semelhante a Desenvolvendo uma App multiplataforma compartilhando 90% do código (20)

React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
React Native - JSday
React Native - JSdayReact Native - JSday
React Native - JSday
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Oficina Sesc Android - V1
Oficina Sesc Android - V1Oficina Sesc Android - V1
Oficina Sesc Android - V1
 
Itajai .NET React Native
Itajai .NET React NativeItajai .NET React Native
Itajai .NET React Native
 
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
O uso de PWA e o futuro do desenvolvimento mobile com React Native e KotlinO uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin
 
Dicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.x
Dicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.xDicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.x
Dicas para migrar sua aplicação ASP.NET para ASP.NET Core 2.x
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
 
Aumentando reaproveitamento de código com MvvmCross
Aumentando reaproveitamento de código com MvvmCrossAumentando reaproveitamento de código com MvvmCross
Aumentando reaproveitamento de código com MvvmCross
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
JS Experience 2017 - Programação reativa com Ionic
JS Experience 2017 - Programação reativa com IonicJS Experience 2017 - Programação reativa com Ionic
JS Experience 2017 - Programação reativa com Ionic
 
Ionic Reativo com RxJS e ngRx
Ionic Reativo com RxJS e ngRxIonic Reativo com RxJS e ngRx
Ionic Reativo com RxJS e ngRx
 
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
 
Conheça a Plataforma Xamarin
Conheça a Plataforma XamarinConheça a Plataforma Xamarin
Conheça a Plataforma Xamarin
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
 
Introdução ao Google TV
Introdução ao Google TVIntrodução ao Google TV
Introdução ao Google TV
 
Desenvolvimento Cross-mobile com Xamarin, por onde começar?
Desenvolvimento Cross-mobile com Xamarin, por onde começar?Desenvolvimento Cross-mobile com Xamarin, por onde começar?
Desenvolvimento Cross-mobile com Xamarin, por onde começar?
 
Phonegap
PhonegapPhonegap
Phonegap
 

Desenvolvendo uma App multiplataforma compartilhando 90% do código

  • 1. Desenvolvendo 
 uma App multiplataforma compartilhando 90% do código GUILHERME HEYNEMANN BRUZZI | FRONT<IN>BH 2017
  • 3.
  • 6. PROBLEMAS + EQUIPE FRONTEND -> STACK Construção
  • 8. 1. App nativa 2. Xamarin 3. Apps Híbridas 4. PWA 5. React Native ou Framework Expo 6. React XP Possíveis escolhas
  • 9. . Objetive-C / Swift para iOS . Java para Android . .NET para Windows . Performance otimizada . 3 códigos para as mesmas regras de negócio Apps Nativas
  • 10. . C# com Mono .NET framework e IDE própria . Compilado para interagir com o Java e Obj-C . Reaproveitamento de código Xamarin
  • 11. Apps Híbridas . Cordova / Phonegap / Ionic . Reaproveitamento de código . Problemas da webview . Cross-browser
  • 12. PWA . Renderização no browser . Pouco espaço no aparelho . Ausência nas lojas de apps . APIs mais modernas do browser é o importante
  • 13. . Suporta boa parte das APIs nativas . Para exceções é necessário ejetar para o nativo . React Native Windows (suporte apenas ao 10) Expo
  • 14. . Suporte ao Windows é fraco ainda (WIP para Windows 10) . O ReactXP recomenda usar a sua versão web 
 com electron para usar no Windows 7 e 8 React XP
  • 17. . Componentização por padrão . Comunidade ativa e open source . VTEX IO Extensível Customizável React
  • 20. IdentificaçãoCarrinhoSeleção de PagamentosComunicação com servidoresConexão com a CapptaPagamentoConfirmação
  • 21. 1. RN Webview Bridge 2. Electron IPC 3. Tachyons 4. Eslint + Prettier Outras escolhas 5. Flow 6. Jest 7. Redux + Redux Logic + Redux persist 8. PR + Continuous deployment
  • 22. RN 
 Webview Bridge 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'}}/> ); } } github.com/vtex/react-native-webview-bridge
  • 23. Electron IPC // main.js (node) const ipcMain = require('electron').ipcMain ipcMain.on('webview-event', function(event, data) { console.log(data) mainWindow.send('webview-event', { 'msg': 'hello from node' }) }) // renderer.js (browser) const ipcRenderer = require('electron').ipcRenderer ipcRenderer.on('webview-event', function(event, data) { console.log(data) }) ipcRenderer.send('webview-event', { 'msg': 'hello from chromium' })
  • 24. Tachyons <div className=“flex flex-auto mv3 pa3"></div> . CSS funcional . 14KB . Evita quebras 
 de outros layouts
  • 26. Flow // @flow const foo = (b: boolean): string => ( (b) ? 'Hello' : 'World' ) const bar: string = foo()
  • 28. Jest import Component from '../src/' describe('Component', () => { let node beforeEach(() => { node = document.createElement('div') }) afterEach(() => { unmountComponentAtNode(node) }) it('displays a welcome message', () => { render(<Component />, node, () => { expect(node.innerHTML).toContain('Carregando...') expect(node.innerHTML).toContain('inject') }) }) })
  • 29. Redux + Redux Logic + Redux persist export default function createAppStore(initialValue = {}) { const logicMiddleware = createLogicMiddleware(logic) const middleware = [logicMiddleware] let composeEnhancers = compose if (process.env.NODE_ENV === 'development') { composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() : compose } const store = createStore( reducer, initialValue, composeEnhancers(applyMiddleware(...middleware), autoRehydrate()) ) createPersistor(store) return store }
  • 30.
  • 31.