Tesco InternationalGrocery Home Shopping

and React.js

@stuartharris

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

Demo

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

Some code

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

Where to now?Single Page isomorphic appWrap components in containers for increased portabilityComponent composition over mixinsContinuous delivery using docker containersShare parts of the application with React Native apps