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. 2.
  2. 4.
  3. 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
  4. 9.

    class PageHeader extends React.Component { render () { return (<header>

    <h1>{this.props.pageTitle}</h1> </header>); } }
  5. 14.

    Switching to a full server render using React has seen

    significant speed gains on every page we have converted
  6. 17.

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

    concerns 3. Behaviour described in templates
  7. 18.

    class PageHeader extends React.Component { bounce (event) { … }

    render () { return (<header> <h1 onClick={this.bounce}> {this.props.pageTitle} </h1> </header>); } }
  8. 19.

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

    concerns 3. Behaviour described in templates 4. Testable server rendered views
  9. 20.

    The React contract states that given a set of props

    a component will always produce the same markup
  10. 21.
  11. 23.
  12. 30.

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

    do it { should have_text ‘Hello LRUG!’} end end RSpec
  13. 33.
  14. 37.

    Had to leave RSpec for mocha but fixtures came with

    us because they were technology agnostic
  15. 39.
  16. 41.
  17. 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