Crossing the Bridge: Connecting Rails and your Front-end Framework

Presented at Railsconf 2015 by Daniel Spector, @danielspecs.

Crossing the Bridge explores tools, patterns and best practices to connect your Javascript MVC framework to Rails in the most seamless way possible. The talk progresses from demonstrating the standard API request cycle to preloading data to your client-side framework to rendering your javascript on the server. It explores Isomorphic Javascript and ways of implementing it with Rails.

Transcript

1. Crossing the Bridge: Crossing the Bridge: Connecting Rails and your Front-end Connecting Rails and your Front-end Framework Framework @danielspecs @danielspecs
2. This is what we're trying to avoid This is what we're trying to avoid
3. Instead we want this Instead we want this
4. A Gameplan A Gameplan Understand the tradeoffs you'll make Deeply integrate your framework with Rails Share data in a consistent and maintainable way
5. Daniel Spector Daniel Spector Software Engineer at Lifebooker @danielspecs spector.io Flatiron School Rails/Javascript/Swift/Clojure
6. What are you What are you getting yourself getting yourself into? into?
7. Javascript. Wat. Javascript. Wat. > [] + {} => [object Object] > {} + [] => 0
8. Courtesy of Alex Matchneer
9. Always think Always think about the about the bigger picture bigger picture You will encounter a lot of You will encounter a lot of tradeoffs. tradeoffs.
10. Some of the fun that Some of the fun that awaits... awaits... Duplicated models Duplicated models Separate codebases Separate codebases Complexity Complexity
11. But my But my clients/customers/former clients/customers/former cat's owner demands it! cat's owner demands it!
12. Er, no. Er, no.
13. What do people want? What do people want? Maintainable, Maintainable, sustainable, sustainable, performant performant applications applications
14. But now that you've But now that you've been warned... been warned...
15. Holy s**t can Holy s**t can you make some you make some awesome awesome applications. applications.
16. Recap Recap Never lose sight of the ultimate goal Never lose sight of the ultimate goal Understand the tradeoffs that will Understand the tradeoffs that will come come There may be a solution There may be a solution
17. Now, let's dive in Now, let's dive in
18. What we're going to be building: What we're going to be building: TodoMVC on Rails TodoMVC on Rails Scaffolding out the same application in each of Scaffolding out the same application in each of the frameworks makes it easy to reference the frameworks makes it easy to reference
19. The Frameworks: The Frameworks:
20. Now let's have a look Now let's have a look at Angular at Angular
21. Developed by Google Developed by Google Two-way data binding Two-way data binding Dependency Injection Dependency Injection But... Angular 2 But... Angular 2
22. First, let's get our First, let's get our Rails project API ready Rails project API ready
23. # app/controllers/api/todos_controller.rb class Api::TodosController < ApplicationController respond_to :json def index @todos = Todo.all render json: @todos end def create @todo = Todo.create(todo_params) render json: @todo end private def todo_params params.require(:todo).permit(:item) end end # config/routes.rb namespace :api, :defaults => {:format => :json} do resources :todos, only: [:index, :create] end # app/models/todo.rb class Todo < ActiveRecord::Base end
24. There's no official Angular There's no official Angular integration with Rails... integration with Rails... So that's a perfect opportunity to So that's a perfect opportunity to try out Bower. try out Bower.
25. Created by Twitter One centralized location for packages Can be integrated with Rails via the bower-rails gem
26. $ npm install -g bower # Gemfile gem "bower-rails", "~> 0.9.2" $ rails g bower_rails:initialize # Bowerfile # Puts to ./vendor/assets/bower_components asset "angular" asset "angular-resource" asset "angular-route"
27. How can we manage How can we manage our client-side data our client-side data to make it easy to to make it easy to work with? work with?
28. ngResource is an optional library ngResource is an optional library to map basic CRUD actions to to map basic CRUD actions to specific method calls. specific method calls. Let's scaffold out a basic Let's scaffold out a basic Angular and see how we can Angular and see how we can integrate ngResource integrate ngResource
29. // app/assets/main.js // This is the main entry point for our application. var Todo = angular .module('todo', ['ngResource', 'ngRoute']) .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) { // We need to add this for Rails CSRF token protection $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content'); // Right now we have one route but we could have as many as we want $routeProvider .when("/", {templateUrl: "../assets/index.html", controller: "TodoCtrl"}) }]); # config/application.rb config.assets.paths << "#{Rails.root}/app/assets/templates"
30. Now we can set up our factory to Now we can set up our factory to hold our resource and pass it to hold our resource and pass it to our controller and our template our controller and our template
31. // app/assets/factories/todoFactory.js Todo.factory("Todo", function($resource){ return $resource("/api/todos/:id", { id: "@id" }); }); // app/assets/controllers/todoCtrl.js Todo.controller("TodoCtrl", function($scope, Todo){ $scope.todos = Todo.query(); $scope.addTodo = function() { $scope.data = new Todo(); $scope.data.name = $scope.newTodo.trim(); Todo.save($scope.data, function(){ $scope.todos = Todo.query(); $scope.newTodo = ''; }) } });
32. // app/assets/templates/index.html <p>Hello RailsConf!</p> <ul> <li ng-repeat="t in todos"> {{t.name}} </li> </ul> <form ng-submit="addTodo()"> <input placeholder="I need to..." ng-model="newTodo" autofocus> </form>
33. Recap Recap 1. Data binding in Angular is powerful Data binding in Angular is powerful 2. ngResource makes requests easy ngResource makes requests easy 3. Multiple API calls to initialize application can Multiple API calls to initialize application can get tricky get tricky
34. Ember! Yeah! Ember! Yeah!
35. Created by Tom Dale and Created by Tom Dale and Yehuda Katz Yehuda Katz Made for large, ambitious Made for large, ambitious applications applications Favors convention over Favors convention over configuration configuration Ember Data is absolutely Ember Data is absolutely wonderful wonderful
36. Ember-CLI Ember-CLI The new standard for developing Ember apps Integrates with Rails via the ember-cli-rails gem
37. What we'll be What we'll be working with working with class User < ActiveRecord::Base has_many :todos end class Todo < ActiveRecord::Base belongs_to :user end class EmberController < ApplicationController def preload @todos = current_user.todos end end Rails.application.routes.draw do root 'ember#preload' end
38. # Gemfile gem "active_model_serializers" gem "ember-cli-rails"
39. $ rails g serializer todo create app/serializers/todo_serializer.rb class TodoSerializer < ActiveModel::Serializer embed :ids, include: true attributes :id, :name end { "todos": [ { "id": 1, "name": "Milk" }, { "id": 2, "name": "Coffee" }, { "id": 3, "name": "Cupcakes" } ] } Create a new serializer, set it up to work Create a new serializer, set it up to work with Ember with Ember
40. Now that we're all set up, what Now that we're all set up, what are we trying to accomplish? are we trying to accomplish? Instead of using JSON calls, we Instead of using JSON calls, we want to preload Ember want to preload Ember
41. Why? Why? Minimize round trips to the server Minimize round trips to the server Bootstrapping the app means a quicker Bootstrapping the app means a quicker experience for our users experience for our users
42. # app/controllers/ember_controller.rb class EmberController < ApplicationController def preload @todos = current_user.todos preload! @todos, serializer: TodoSerializer end def preload!(data, opts = {}) @preload ||= [] data = prepare_data(data, opts) @preload << data unless data.nil? end def prepare_data(data, opts = {}) data = data.to_a if data.respond_to? :to_ary data = [data] unless data.is_a? Array return if data.empty? options[:root] ||= data.first.class.to_s.underscore.pluralize options[:each_serializer] = options[:serializer] if options[:serializer] ActiveModel::ArraySerializer.new(data, options) end end
43. We'll pass this to Ember via the We'll pass this to Ember via the window. window. # app/views/layouts/application.html.haml = stylesheet_link_tag :frontend :javascript window.preloadEmberData = #{(@preload || []).to_json}; = include_ember_script_tags :frontend %body = yield github.com/hummingbird-me/hummingbird
44. Let's get setup with Let's get setup with our client-side code our client-side code
45. $ rails g ember-cli:init create config/initializers/ember.rb # config/initializer/ember.rb EmberCLI.configure do |config| config.app :frontend, path: Rails.root.join('frontend').to_s end $ ember new frontend --skip-git version: 0.2.3 installing create .bowerrc create .editorconfig create .ember-cli create .jshintrc create .travis.yml create Brocfile.js create README.md create app/app.js create app/components/.gitkeep ...
46. $ ember g resource todos version: 0.2.3 installing create app/models/todo.js installing create tests/unit/models/todo-test.js installing create app/routes/todos.js create app/templates/todos.hbs installing create tests/unit/routes/todos-test.js $ ember g adapter application version: 0.2.3 installing create app/adapters/application.js installing create tests/unit/adapters/application-test.js $ ember g serializer application version: 0.2.3 installing create app/serializers/application.js installing create tests/unit/serializers/application-test.js
47. // frontend/app/models/todo.js import DS from 'ember-data'; var Todo = DS.Model.extend({ name: DS.attr('string') }); export default Todo; // frontend/app/adapters/application.js import DS from 'ember-data'; export default DS.ActiveModelAdapter.extend({ });
48. // frontend/app/initializers/preload.js export function initialize(container) { if (window.preloadEmberData) { var store = container.lookup('store:main'); window.preloadEmberData.forEach(function(item) { store.pushPayload(item); }); } } export default { name: 'preload', after: 'store', initialize: initialize };
49. Ember will initialize Ember will initialize Ember Data objects Ember Data objects for us, inferring the for us, inferring the correct type from the correct type from the root of the JSON root of the JSON response response
50. Now we can use our route to find the data and render it via a template // frontend/app/router.js export default Router.map(function() { this.resource('todos', { path: '/' }, function() {}); }); // frontend/app/routes/todos/index.js export default Ember.Route.extend({ model: function() { return this.store.all('todo') } }); // frontend/app/templates/todos/index.hbs <h2>Todo:</h2> <ul> {{#each todo in model}} <li>{{todo.name}}</li> {{/each}} </ul>
51. Recap Recap 1. Don't fight Ember. Use conventions Don't fight Ember. Use conventions like AMS like AMS 2. Preloading is extremely powerful Preloading is extremely powerful 3. Avoiding spinners and loading screens means a great experience
52. So let's talk So let's talk about React. about React.
53. Developed by Facebook One-way data binding Virtual DOM Isomorphic Javascript
54. No initial API call, no No initial API call, no preloading, render preloading, render straight from the straight from the server. server. http://bensmithett.com/server-rendered-react-components-in-rails/
55. # app/controllers/todos_controller.rb class TodosController < ApplicationController def index @load = { :todos => current_user.todos, :form => { :action => todos_path, :csrf_param => request_forgery_protection_token, :csrf_token => form_authenticity_token } } end def create @todo = Todo.create(todo_params) render json: @todo end def todo_params params.require(:todo).permit(:name) end end
56. Use the react-rails gem Use the react-rails gem # Gemfile gem "react-rails" $ rails g react:install
57. # app/views/todos/index.html.erb <%= react_component('Todos', {:load => @load.to_json}, {:prerender => true}) %> Really nice view Really nice view helpers helpers The magic lives in {:prerender => true}
58. React is built React is built around components around components Each component should have one isolated responsibility.
59. # app/assets/javascripts/components/_todos.js.jsx var Todos = React.createClass({ getInitialState: function () { return JSON.parse(this.props.load); }, newTodo: function ( formData, action ) { $.ajax({ data: formData, url: action, type: "POST", dataType: "json", success: function (data) { this.setState({todos: this.state.todos.concat([data]}); }.bind(this) }); }, render: function () { return ( <div> <ul> <TodosList todos={this.state.todos} /> </ul> <TodoForm form={this.state.form} onNewTodo={this.newTodo} /> </div> ); } });
60. TodosList Component TodosList Component // app/assets/javascripts/components/_todos_list.js.jsx var TodosList = React.createClass({ render: function () { var allTodos = this.props.todos.map(function (todo) { return <Todo name={todo.name} /> }); return ( <div> { allTodos } </div> ) } }); // app/assets/javascripts/components/_todo.js.jsx var Todo = React.createClass({ render: function (){ return ( <div> <li>{this.props.name}</li> </div> ) } });
61. And now the form... And now the form... // app/assets/javascripts/components/_todo_form.js.jsx var TodoForm = React.createClass({ handleSubmit: function (e) { e.preventDefault(); var formData = $(this.refs.form.getDOMNode()).serialize(); this.props.onNewTodo(formData, this.props.form.action); this.refs.name.getDOMNode().value = ""; }, render: function () { return ( <form ref="form"action={this.props.form.action} method="post" onSubmit={this.handleSubmit}> <input type="hidden" name={this.props.form.csrf_param } value={this.props.form.csrf_token}/> <input ref="name" name="todo[name]" placeholder="I need to do..." /> <button type="submit">New Todo</button> </form> ) } });
62. Recap Recap 1. Each component should have only one Each component should have only one responsibility responsibility 2. Prerender on the server for SEO, usability and Prerender on the server for SEO, usability and other benefits other benefits 3. UJS will mount your component and take care UJS will mount your component and take care of the handoff of the handoff
63. Isomorphic Isomorphic Javascript is the Javascript is the future. future. React Ember 2.0 with FastBoot Angular 2?
64. Where we've come from and Where we've come from and where we are going where we are going 1. Constructing API's that serve JSON to the client Constructing API's that serve JSON to the client 2. Preload your data on startup to avoid spinners and Preload your data on startup to avoid spinners and loading screens loading screens 3. Server-side rendering for SEO, startup time and a great Server-side rendering for SEO, startup time and a great user experience user experience
65. Thanks! Thanks! Would love to answer any questions Please feel free to tweet at me or get in touch in any other way. @danielspecs spector.io