Using React at Deliveroo - LRUG

5ce91fa49a613cbc3e20d5f96856473f?s=47 Edd S
July 11, 2016

Using React at Deliveroo - LRUG

Looking at how you can start using React within a Rails environment, why you might want to, and what benefits it can unlock. Also looking at how you can make this change to a large project which lots of developers contribute to regularly.

5ce91fa49a613cbc3e20d5f96856473f?s=128

Edd S

July 11, 2016
Tweet

Transcript

  1. Using React at Deliveroo Edd Sowden Engineering Lead - Consumer

    Web Deliveroo @edds
  2. None
  3. Who hasn’t used Deliveroo? https://roo.it/edds

  4. 1. Why React? 2. Introducing it at Deliveroo 3. Growing

    with it Using React at Deliveroo
  5. React is a component based templating library in JavaScript

  6. Page Component Component Component Component

  7. Components have props passed into them, and state to save

    their… state A component can’t modify it’s props only it’s state
  8. Components are rendered when new props are passed in or

    state is changed
  9. class PageHeader extends React.Component { render () { return (<header>

    <h1>{this.props.pageTitle}</h1> </header>); } }
  10. <PageHeader pageTitle=“Hello LRUG” /> <header> <h1>Hello LRUG</h1> </header>

  11. Why did we chose to use React with our Rails

    stack at Deliveroo?
  12. 1. Server rendered views with progressive enhancement

  13. Server renders React to HTML Browser render React binds to

    DOM
  14. Switching to a full server render using React has seen

    significant speed gains on every page we have converted
  15. 1. Server rendered views with progressive enhancement 2. Separation of

    concerns
  16. Ruby does Getting objects Presenting objects React does Rendering templates

  17. 1. Server rendered views with progressive enhancement 2. Separation of

    concerns 3. Behaviour described in templates
  18. class PageHeader extends React.Component { bounce (event) { … }

    render () { return (<header> <h1 onClick={this.bounce}> {this.props.pageTitle} </h1> </header>); } }
  19. 1. Server rendered views with progressive enhancement 2. Separation of

    concerns 3. Behaviour described in templates 4. Testable server rendered views
  20. The React contract states that given a set of props

    a component will always produce the same markup
  21. 1. Why React? 2. Introducing it at Deliveroo 3. Growing

    with it Using React at Deliveroo
  22. Introduce the smallest change possible to bring as many people

    with you as possible
  23. Every technology / dependency you introduction adds cost for the

    whole team, not just the initial cost
  24. Prove the technology first going page by page, scale up

    when required
  25. Vanilla React No state stores, no extensions

  26. Provide props for whole page render from the controller

  27. # Gemfile gem ‘react-rails’ # Controller render component ‘PageHeader’, props:

    @props, layout: ‘react-application’
  28. Sticking with tools our engineers know: asset pipeline erb layouts

    RSpec
  29. Asset Pipeline ./app/assets/javascripts ./react ./application.js ./page-header.js.jsx

  30. describe 'PageHeader', type: :component do context 'a basic header', :load_props

    do it { should have_text ‘Hello LRUG!’} end end RSpec
  31. # ./page-header.fixtures.yaml - title: a basic header props: title: Hello

    LRUG! RSpec
  32. RSpec is also then used to test presenters and controller

    output
  33. 1. Why React? 2. Introducing it at Deliveroo 3. Growing

    with it Using React at Deliveroo
  34. Sending all your templates to users on every page is

    expensive
  35. Without a module system it’s hard to maintain component dependencies

  36. We switched to react-on-rails gem to get Webpack for dependancy

    management
  37. Had to leave RSpec for mocha but fixtures came with

    us because they were technology agnostic
  38. Moving to react-on-rails initially gave us much worse performance

  39. None
  40. Adding therubyracer and a node build pack to heroku made

    it fast
  41. None
  42. All engineers now need to maintain their NPM version

  43. We’re still yet to start using a state store which

    is hurting us
  44. Potential future enhancements: Split front end to be it’s own

    app Enhance client side to handle page navigation Living style guide from fixture files
  45. We’re Hiring!

  46. Thank You! Questions? Edd Sowden Engineering Lead - Consumer Web

    Deliveroo @edds https://roo.it/edds