Stuart Harris, Founder, Red Badger 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.

1. Tesco International
Grocery Home Shopping
and React.js
@stuartharris

2. 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.

3. 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.

4. International Grocery Home Shopping
Poland, Hungary, Czech Republic, Slovakia,
Turkey, Thailand, Malaysia
● Brand
● Language
● Currency
● Timezone
● Feature switching
● Legal requirements

5. Isomorphic
SEO
Non JS
Fast first page load
Multiple isomorphic Single Page Applications
Presented as one

6. Demo

7. The journey
1. pre-Flux, setState()
2. Flux, own implementation
3. Flux, FB implementation
4. Immutable data
5. Cursors over immutable global application
state
6. Reflex
7. Relay + GraphQL

8. 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

9. What we use
LiveScript => ES6+JSX with Babel
React.js 0.10 => 0.11 => 0.12.2 => 0.13.1
Flux homegrown => 2.0.1
Immutable.js
page.js (+ monorouter) => React Router
browserify => webpack (including component hot-loading)
i18next => node-polyglot
request => superagent => fetch
Jest => jasmine/mocha + testutils + jsdom/cheerio
(cucumber-js => cucumber/capybara) with webdriver

10. Some code

11. What we have learned
Don’t need to deliver JS to old engines
Don’t have a global dispatcher (it’ll leak on server)
Go with the flow (ES6/JSX, React Router)
Smaller more focused components
More use of context to

12. Where to now?
Single Page isomorphic app
Wrap components in containers for increased portability
Component composition over mixins
Continuous delivery using docker containers
Share parts of the application with React Native apps