Tesco International Grocery Home Shopping and React.js @stuartharris
Jul 16, 2015
Tesco and React
Tesco is the world’s third largest retailer, handling half the world’s online grocery shopping.React has transformed UI engineering at Tesco and helped the retailer build large scale isomorphic applications that are fast to run and quick to build.
Committed to providing great UX
Tesco have great product designers that are capable of amazing UX and visual design.It’s crucial that we use the right tools to realise this for their customers.
International Grocery Home Shopping
Poland, Hungary, Czech Republic, Slovakia, Turkey, Thailand, Malaysia● Brand● Language● Currency● Timezone● Feature switching● Legal requirements
Isomorphic
SEONon JSFast first page load
Multiple isomorphic Single Page ApplicationsPresented as one
The journey
1. pre-Flux, setState()2. Flux, own implementation3. Flux, FB implementation4. Immutable data5. Cursors over immutable global application
state6. Reflex7. Relay + GraphQL
The problems
Multiple ‘pages’● smaller, contained state● easier to reason about● less risk of memory leaks● less need for ajax● but less interactive● config and translations
goal: Single Page Isomorphic
What we useLiveScript => ES6+JSX with BabelReact.js 0.10 => 0.11 => 0.12.2 => 0.13.1Flux homegrown => 2.0.1Immutable.jspage.js (+ monorouter) => React Routerbrowserify => webpack (including component hot-loading)i18next => node-polyglotrequest => superagent => fetchJest => jasmine/mocha + testutils + jsdom/cheerio(cucumber-js => cucumber/capybara) with webdriver
What we have learnedDon’t need to deliver JS to old enginesDon’t have a global dispatcher (it’ll leak on server)Go with the flow (ES6/JSX, React Router)Smaller more focused componentsMore use of context to