Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Using React at Deliveroo Edd Sowden Engineering Lead - Consumer Web Deliveroo @edds
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Who hasn’t used Deliveroo? https://roo.it/edds
Slide 4
Slide 4 text
1. Why React? 2. Introducing it at Deliveroo 3. Growing with it Using React at Deliveroo
Slide 5
Slide 5 text
React is a component based templating library in JavaScript
Slide 6
Slide 6 text
Page Component Component Component Component
Slide 7
Slide 7 text
Components have props passed into them, and state to save their… state A component can’t modify it’s props only it’s state
Slide 8
Slide 8 text
Components are rendered when new props are passed in or state is changed
Slide 9
Slide 9 text
class PageHeader extends React.Component { render () { return (
{this.props.pageTitle}
); } }
Slide 10
Slide 10 text
Hello LRUG
Slide 11
Slide 11 text
Why did we chose to use React with our Rails stack at Deliveroo?
Slide 12
Slide 12 text
1. Server rendered views with progressive enhancement
Slide 13
Slide 13 text
Server renders React to HTML Browser render React binds to DOM
Slide 14
Slide 14 text
Switching to a full server render using React has seen significant speed gains on every page we have converted
Slide 15
Slide 15 text
1. Server rendered views with progressive enhancement 2. Separation of concerns
Slide 16
Slide 16 text
Ruby does Getting objects Presenting objects React does Rendering templates
Slide 17
Slide 17 text
1. Server rendered views with progressive enhancement 2. Separation of concerns 3. Behaviour described in templates
Slide 18
Slide 18 text
class PageHeader extends React.Component { bounce (event) { … } render () { return (
{this.props.pageTitle}
); } }
Slide 19
Slide 19 text
1. Server rendered views with progressive enhancement 2. Separation of concerns 3. Behaviour described in templates 4. Testable server rendered views
Slide 20
Slide 20 text
The React contract states that given a set of props a component will always produce the same markup
Slide 21
Slide 21 text
1. Why React? 2. Introducing it at Deliveroo 3. Growing with it Using React at Deliveroo
Slide 22
Slide 22 text
Introduce the smallest change possible to bring as many people with you as possible
Slide 23
Slide 23 text
Every technology / dependency you introduction adds cost for the whole team, not just the initial cost
Slide 24
Slide 24 text
Prove the technology first going page by page, scale up when required
Slide 25
Slide 25 text
Vanilla React No state stores, no extensions
Slide 26
Slide 26 text
Provide props for whole page render from the controller
Slide 27
Slide 27 text
# Gemfile gem ‘react-rails’ # Controller render component ‘PageHeader’, props: @props, layout: ‘react-application’
Slide 28
Slide 28 text
Sticking with tools our engineers know: asset pipeline erb layouts RSpec
Slide 29
Slide 29 text
Asset Pipeline ./app/assets/javascripts ./react ./application.js ./page-header.js.jsx
Slide 30
Slide 30 text
describe 'PageHeader', type: :component do context 'a basic header', :load_props do it { should have_text ‘Hello LRUG!’} end end RSpec
Slide 31
Slide 31 text
# ./page-header.fixtures.yaml - title: a basic header props: title: Hello LRUG! RSpec
Slide 32
Slide 32 text
RSpec is also then used to test presenters and controller output
Slide 33
Slide 33 text
1. Why React? 2. Introducing it at Deliveroo 3. Growing with it Using React at Deliveroo
Slide 34
Slide 34 text
Sending all your templates to users on every page is expensive
Slide 35
Slide 35 text
Without a module system it’s hard to maintain component dependencies
Slide 36
Slide 36 text
We switched to react-on-rails gem to get Webpack for dependancy management
Slide 37
Slide 37 text
Had to leave RSpec for mocha but fixtures came with us because they were technology agnostic
Slide 38
Slide 38 text
Moving to react-on-rails initially gave us much worse performance
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Adding therubyracer and a node build pack to heroku made it fast
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
All engineers now need to maintain their NPM version
Slide 43
Slide 43 text
We’re still yet to start using a state store which is hurting us
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
We’re Hiring!
Slide 46
Slide 46 text
Thank You! Questions? Edd Sowden Engineering Lead - Consumer Web Deliveroo @edds https://roo.it/edds