Building the worlds largest grocery shopping site with React
1 like1,155 views
Tesco, the world's third largest retailer, has enhanced its international grocery home shopping through the use of React.js, enabling fast and efficient isomorphic applications. The transition involved evolving their tech stack from pre-Flux implementations to modern tools like React Router and Webpack, focusing on user experience and accessibility across multiple regions. Key learnings include avoiding outdated JavaScript delivery methods and emphasizing smaller, focused components for improved application performance.
Building the worlds largest grocery shopping site with React
- 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