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