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.
Using React at DeliverooEdd SowdenEngineering Lead - Consumer WebDeliveroo@edds
View Slide
Who hasn’t used Deliveroo?https://roo.it/edds
1. Why React?2. Introducing it at Deliveroo3. Growing with itUsing React at Deliveroo
React is a component basedtemplating library in JavaScript
PageComponentComponent ComponentComponent
Components have props passed intothem, and state to save their… stateA component can’t modify it’s propsonly it’s state
Components are rendered whennew props are passed in or state ischanged
class PageHeader extends React.Component {render () {return ({this.props.pageTitle});}}
Hello LRUG
Why did we chose to use React withour Rails stack at Deliveroo?
1. Server rendered views withprogressive enhancement
Server rendersReact to HTMLBrowserrenderReact binds toDOM
Switching to a full server render usingReact has seen significant speed gainson every page we have converted
1. Server rendered views withprogressive enhancement2. Separation of concerns
Ruby doesGetting objectsPresenting objectsReact doesRendering templates
1. Server rendered views withprogressive enhancement2. Separation of concerns3. Behaviour described in templates
class PageHeader extends React.Component {bounce (event) {…}render () {return ({this.props.pageTitle});}}
1. Server rendered views withprogressive enhancement2. Separation of concerns3. Behaviour described in templates4. Testable server rendered views
The React contract states that givena set of props a component willalways produce the same markup
Introduce the smallest changepossible to bring as many peoplewith you as possible
Every technology / dependency youintroduction adds cost for the wholeteam, not just the initial cost
Prove the technology first going pageby page, scale up when required
Vanilla ReactNo state stores, no extensions
Provide props for whole page renderfrom the controller
# Gemfilegem ‘react-rails’# Controllerrender component ‘PageHeader’,props: @props,layout: ‘react-application’
Sticking with tools our engineersknow:asset pipelineerb layoutsRSpec
Asset Pipeline./app/assets/javascripts./react./application.js./page-header.js.jsx
describe 'PageHeader', type: :component docontext 'a basic header', :load_props doit { should have_text ‘Hello LRUG!’}endendRSpec
# ./page-header.fixtures.yaml- title: a basic headerprops:title: Hello LRUG!RSpec
RSpec is also then used to testpresenters and controller output
Sending all your templates to userson every page is expensive
Without a module system it’s hard tomaintain component dependencies
We switched to react-on-rails gemto get Webpack for dependancymanagement
Had to leave RSpec for mocha butfixtures came with us because theywere technology agnostic
Moving to react-on-rails initially gaveus much worse performance
Adding therubyracer and a nodebuild pack to heroku made it fast
All engineers now need to maintaintheir NPM version
We’re still yet to start using a statestore which is hurting us
Potential future enhancements:Split front end to be it’s own appEnhance client side to handle page navigationLiving style guide from fixture files
We’re Hiring!
Thank You! Questions?Edd SowdenEngineering Lead - Consumer WebDeliveroo@eddshttps://roo.it/edds
edds
nttcom
cybozuinsideout
dahatake
route06
stefafafan
fujiwara3
orgachem
s2terminal
ryomaru0825
yuj1osm
akiroom
knsg16
paulrobertlloyd
thekraken
revolveconf
eileencodes
davidbonilla
ufuk
jmmastey
kneath
jasonvnalue
gr2m
addyosmani