rails api + js app
TRANSCRIPT
![Page 1: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/1.jpg)
React + Rails API
![Page 2: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/2.jpg)
React + Rails APIJavascript App
![Page 3: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/3.jpg)
@jason_madsen
knomedia
jmadsen
![Page 4: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/4.jpg)
The ProblemFront End App with a Rails API
![Page 5: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/5.jpg)
The ProblemFront End App with a Rails API
1 App or
2 Apps?
![Page 6: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/6.jpg)
Beware of the YAGNI Police
![Page 7: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/7.jpg)
You Ain’t Gonna Need It
![Page 8: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/8.jpg)
You Ain’t Gonna Need ItAre
![Page 9: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/9.jpg)
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
![Page 10: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/10.jpg)
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”
![Page 11: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/11.jpg)
Your App will grow
![Page 12: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/12.jpg)
API
thin client server
JS APP
proxy api calls
![Page 13: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/13.jpg)
railsJS APP
![Page 14: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/14.jpg)
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
![Page 15: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/15.jpg)
railsJS APP
![Page 16: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/16.jpg)
Treat it Like 2Deploy it like a single rails app
![Page 17: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/17.jpg)
Things to consider
• Your front end app is it’s own app
• it should own it’s build, tests, etc
![Page 18: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/18.jpg)
Things to consider
• build your JS app into a file(s) for rails to consume
• let asset pipeline hash built files as normal
![Page 19: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/19.jpg)
!"" app # !"" assets # # !"" images # # !"" javascripts # # # !"" application.js # # # $"" bundle.js
built file from JS app
Let asset pipeline deal with it from there
![Page 20: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/20.jpg)
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
![Page 21: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/21.jpg)
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
![Page 22: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/22.jpg)
![Page 23: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/23.jpg)
webpack_assets
bin/rake assets:webpack:watch
Run the watcher during development to rebuild JS app on file changes
![Page 24: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/24.jpg)
webpack_assetsYou’ll need to have a node environment on
the machine that does your build
Don’t forget to `npm install` before building
![Page 25: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/25.jpg)
railsJS APP
![Page 26: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/26.jpg)
API
thin client
JS APP
proxy api calls
![Page 27: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/27.jpg)
rails redis
S3
jsapp:current
JS and assets stored onS3
![Page 28: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/28.jpg)
Questions?
![Page 29: Rails api + JS app](https://reader034.vdocuments.site/reader034/viewer/2022042514/55a562011a28ab684e8b4655/html5/thumbnails/29.jpg)
Thanks!