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.

Transcript

1. Using React at Deliveroo Edd Sowden Engineering Lead - Consumer Web Deliveroo @edds
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
40. Adding therubyracer and a node build pack to heroku made it fast
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