Crossing the Bridge: Connecting Rails and Your Front-End Framework

on YouTube ↗35m

" summary

Compares concrete integrations: TodoMVC examples in Angular (Bower, ngResource), Ember (Ember CLI, Ember Data with ActiveModelAdapter + ActiveModelSerializers, preloading models into the store) and React (react-rails with server-side prerender true). Shows two workable patterns — preload JSON via window to eliminate initial API round trips, and isomorphic/server rendering to produce crawlable HTML and remove spinners — and demonstrates that both preload and prerender approaches meaningfully improve perceived performance and SEO.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 3:19Maintainable, sustainable, performant applications
3. 6:55First, let's get our Rails project API ready
4. 8:26How can we manage our client-side data to make it easy to work with?
5. 9:26Now we can set up our factory to hold our resource and pass it to our controller and our template
6. 15:10Instead of using JSON calls, we want to preload Ember
7. 17:02Let's get setup with our client-side code
8. 18:48Ember will initialize Ember Data objects for us, inferring the correct type from the root of the JSON response
9. 19:471. Don't fight Ember. Use conventions like AMS

" related talks

• 40mFRONTEND CHOICESAlex Coles · wroc_love.rb 2014
• 19mFrontend Meet Backend Get AlongJonathan Martin · CSSConf US 2014
• 36mRails Vs. The Client SideNoel Rappin · RailsConf 2013
• 40mUsing Backbone.js with Rails: Patterns from the WildSarah Mei · RailsConf 2012
• 35mFrontendless Rails frontendVladimir Dementyev · RailsConf 2021
• 47mCamel and Eye of a Needle: Integration Approaches for SPA-based Micro FrontendsManfred Steyer · Software Architecture Gathering – Digital 2023
• 01h 07mModern Frontend EngineeringDustin Whittle · SpringOne2GX 2015
• 38mThe Front-End FutureFrancis Hwang · GoRuCo 2012