React at Gousto

1. @ JS Roundabout 11th April 2017
2. • An online recipe box service. • Customers come to our site, or use our apps and select from 22 meals each week. • They pick the meals they want to cook and say how many people they’re cooking for. • We deliver all the ingredients they need in exact proportions with step-by-step recipe cards in 2-3 days. • No planning, no supermarkets and no food waste – you just cook (and eat). • We’re a rapidly growing business. About Gousto
3. Old Site
4. Requirements • fast & scales • SEO friendly i.e. server side rendering -> write it only once • no need to rewrite all pages, can easily live side by side & share components (header, login, footer) • development speed & saNsfacNon • long term support, ac7ve community (updates, bug fixes, arNcles, tutorials, stackoverflow discussions, ecosystem) • easy testability
5. We considered… Late 2015 Nowadays
6. Why React • fast & scales: virtual DOM, component based, works for big apps, easy to update other libraries • SEO: server side rendering, ~95% shared code between client & server • no rewrite: use on new pages, include parts on exisNng pages (server & client) • development: quick ini7al learning, component based approach, full JS, Flux, very acNve community, loads of resources • easily tested (jasmine+karma / mocha+sinon+chai / jest / AVA, enzyme)
7. Request Apache new pages (home, menu) old pages (my account, faq) send cookies - fetch header & footer receive HTML & serialised iniNalState Response Laravel Blade template
 + include React build for legacy pages render into string fetch data… fetch data…
8. Stack • Server: Koa (slim) • RouNng: react-router on server & client • State: redux, serialised state is shared between server & client by encoding in HTML response (transit-js) • staNc method on top level component to fetch data on server (and client) • ES.Next (async await, staNc class properNes, destructuring, template, spread, arrow funcNons)
9. Fractal folder structure haps:/ /github.com/davezuko/react-redux- starter-kit/wiki/Fractal-Project-Structure • acNons, reducers, store for redux • components: stateless presentaNonal, reusable • containers: connect presentaNonal components to acNons & state • routes: child routes nested Works for big apps, easy to onboard new developer
10. Let’s load the Menu
11. Server Match URL Fetch data Render page
12. Fetch data Render page Fetch data Render page Match URL
15. Fetch data Render page Fetch data Render page Match URL
17. Fetch data Render page Fetch data Render page Match URL
19. Client
20. What we have learnt
21. Loading data Load only necessary data on the server. Parallelised. Let the client load the rest. Works well with client side rouNng
22. Client side performance • Extend React.PureComponent or implement your shouldComponentUpdate method - leverage immutability • In a container, only connect the data you need for that specific component, rather than keep passing props top to boaom. Will save a lot of unnecessary re-rendering. • Prefetch data for expected user flow • Split your code by routes to lower page weight
23. CSS • UI specific props (e.g. <SideBar align=“leh”> ). Do not pass around className props • Encapsulated & locally scoped CSS is awesome (CSS modules, styled-components)
24. Code style • Use a linter. ESlint with Airbnb style guide is a good start. haps:/ / github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb • haps:/ /github.com/prejer/prejer (beta) • Enforce it by failing builds
25. Redux middlewares • Extremely useful for tracking (snowplow for internal data, Facebook for markeNng). Have access to data that no external tracker could easily have. • PersisNng data on client
26. Server side rendering can be slow • renderToString seems to be preay linear. Takes ~230ms for 1200 elements (Gousto Menu with 22 recipes) • use a CDN to cache enNre pages (cloudFront, cloudFlare) • server-only above the fold rendering • render caching (not tried) • streaming (not tried)
27. Use ES.Next • Babel & Webpack will do the hard job for you • Makes life much easier • You feel very cujng edge & cool! • Classes, arrow funcNons, async await, destructuring, let/const, template strings, default value, rest, spread operators, modules, enhanced object literal, Proxy, new types
28. Style guide • Get an interac7ve style guide if you have a team bigger than 2 • Will help knowledge sharing & speed of development • Eliminate code duplica7on • Will force you to think in reusable component terms • haps:/ /github.com/storybooks/react-storybook
 haps:/ /github.com/styleguidist/react-styleguidist
29. We are excited about • code splijng (JS & CSS) • Offline experience, progressive web apps • React NaNve • GraphQL • Flow • HTTP2
30. @GoustoTech
 techbrunch.gousto.co.uk
 balint@gousto.co.uk Thank you Also… we’re recruiting