$30 off During Our Annual Pro Sale. View Details »

Using React at Deliveroo - LRUG

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.

Edd S

July 11, 2016
Tweet

More Decks by Edd S

Other Decks in Technology

Transcript

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

    View Slide

  2. View Slide

  3. Who hasn’t used Deliveroo?
    https://roo.it/edds

    View Slide

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

    View Slide

  5. React is a component based
    templating library in JavaScript

    View Slide

  6. Page
    Component
    Component Component
    Component

    View Slide

  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

    View Slide

  8. Components are rendered when
    new props are passed in or state is
    changed

    View Slide

  9. class PageHeader extends React.Component {
    render () {
    return (
    {this.props.pageTitle}
    );
    }
    }

    View Slide



  10. Hello LRUG

    View Slide

  11. Why did we chose to use React with
    our Rails stack at Deliveroo?

    View Slide

  12. 1. Server rendered views with
    progressive enhancement

    View Slide

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

    View Slide

  14. Switching to a full server render using
    React has seen significant speed gains
    on every page we have converted

    View Slide

  15. 1. Server rendered views with
    progressive enhancement
    2. Separation of concerns

    View Slide

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

    View Slide

  17. 1. Server rendered views with
    progressive enhancement
    2. Separation of concerns
    3. Behaviour described in templates

    View Slide

  18. class PageHeader extends React.Component {
    bounce (event) {

    }
    render () {
    return (

    {this.props.pageTitle}

    );
    }
    }

    View Slide

  19. 1. Server rendered views with
    progressive enhancement
    2. Separation of concerns
    3. Behaviour described in templates
    4. Testable server rendered views

    View Slide

  20. The React contract states that given
    a set of props a component will
    always produce the same markup

    View Slide

  21. 1. Why React?
    2. Introducing it at Deliveroo
    3. Growing with it
    Using React at Deliveroo

    View Slide

  22. Introduce the smallest change
    possible to bring as many people
    with you as possible

    View Slide

  23. Every technology / dependency you
    introduction adds cost for the whole
    team, not just the initial cost

    View Slide

  24. Prove the technology first going page
    by page, scale up when required

    View Slide

  25. Vanilla React
    No state stores, no extensions

    View Slide

  26. Provide props for whole page render
    from the controller

    View Slide

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

    View Slide

  28. Sticking with tools our engineers
    know:
    asset pipeline
    erb layouts
    RSpec

    View Slide

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

    View Slide

  30. describe 'PageHeader', type: :component do
    context 'a basic header', :load_props do
    it { should have_text ‘Hello LRUG!’}
    end
    end
    RSpec

    View Slide

  31. # ./page-header.fixtures.yaml
    - title: a basic header
    props:
    title: Hello LRUG!
    RSpec

    View Slide

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

    View Slide

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

    View Slide

  34. Sending all your templates to users
    on every page is expensive

    View Slide

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

    View Slide

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

    View Slide

  37. Had to leave RSpec for mocha but
    fixtures came with us because they
    were technology agnostic

    View Slide

  38. Moving to react-on-rails initially gave
    us much worse performance

    View Slide

  39. View Slide

  40. Adding therubyracer and a node
    build pack to heroku made it fast

    View Slide

  41. View Slide

  42. All engineers now need to maintain
    their NPM version

    View Slide

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

    View Slide

  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

    View Slide

  45. We’re Hiring!

    View Slide

  46. Thank You! Questions?
    Edd Sowden
    Engineering Lead - Consumer Web
    Deliveroo
    @edds
    https://roo.it/edds

    View Slide