Existem muitas possibilidades de inovar no seguimento de lojas físicas, que tem em sua maioria uma tecnologia mais antiga. Essa palestra conta a história do desenvolvimento de um produto para atender esse mercado do mundo físico e é focada nas decisões técnicas que impactaram a visão de negócio diretamente, fazendo um comparativo das tecnologias que levaram a essas decisões (escolha do React, React Native, Electron e libs auxiliares). Hoje o produto roda em Android, iOS, Windows e web, compartilhando a maior parte do código-fonte, permitindo entregar features multi-plataforma de forma ágil.

1. Desenvolvendo
uma App multiplataforma
compartilhando 90% do código
GUILHERME HEYNEMANN BRUZZI | FRONT<IN>BH 2017

2. Guilherme
Heynemann
Bruzzi
+ 2000 lojas

4. 97%Do comércio
no Brasil
97%

5. OmnichannelOmnichannelOmnichannel

6. PROBLEMAS + EQUIPE FRONTEND -> STACK
Construção

7. inStore

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

15. Nativo + Web
Casca de
Apps

16. Arquitetura
Final
SPA
Electron
React Native

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

18. React
Native

19. Electron

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

25. Eslint +
Prettier

26. Flow
// @flow
const foo = (b: boolean): string => (
(b) ? 'Hello' : 'World'
)
const bar: string = foo()

27. PR +
Continuous
Deployment

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
}

32. engineering.vtex.com
design.vtex.com

33. Sorteio de
smartwatch
no stand da
VTEX!

34. @guilhermebruzz
i

35. Muito obrigado! 😅