React + Rails API

React + Rails APIJavascript App

@jason_madsen

knomedia

jmadsen

The ProblemFront End App with a Rails API

The ProblemFront End App with a Rails API

1 App or

2 Apps?

Beware of the YAGNI Police

You Ain’t Gonna Need It

You Ain’t Gonna Need ItAre

2 Apps

• Forces App vs API distinction

• Other consumers of API should be *easier*

• API releases are independent of client

• CORS and potential extra OPTIONS requests :(

• Or use a thin server and proxy requests for client

Single App

• Potentially easier to sync releases

• Less friction to coordinate deploy (one deploy vs two)

• Easier to push features that cut into both apps

• Fits existing mental modal of a “rails app”

Your App will grow

API

thin client server

JS APP

proxy api calls

railsJS APP

rails

JS and assets stored onS3

redis

S3

jsapp:current

Luke Melia - Railsconf **Lighting Fast Deployment of your Rails backed Javascript app

HTML is stored

in redis, loaded and served via

rails

railsJS APP

Treat it Like 2Deploy it like a single rails app

Things to consider

• Your front end app is it’s own app

• it should own it’s build, tests, etc

Things to consider

• build your JS app into a file(s) for rails to consume

• let asset pipeline hash built files as normal

!"" app #   !"" assets #   #   !"" images #   #   !"" javascripts #   #   #   !"" application.js #   #   #   $"" bundle.js

built file from JS app

Let asset pipeline deal with it from there

Tempting, but don’t!

• Inject session auth from rails into JS app

• Bootstrapping HTML from rails land

• User data

• feature data (i.e. rollout)

• ENV

• Analytics

webpack_assets

https://rubygems.org/gems/webpack_assets

http://www.tomdooner.com/2014/05/26/webpack.html

adds a webpack build step into your rails assets:precompile rake task

webpack_assets

bin/rake assets:webpack:watch

Run the watcher during development to rebuild JS app on file changes

webpack_assetsYou’ll need to have a node environment on

the machine that does your build

Don’t forget to `npm install` before building

railsJS APP

API

thin client

JS APP

proxy api calls

rails redis

S3

jsapp:current

JS and assets stored onS3

Questions?

Thanks!