Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ajax and Rails

Ajax and Rails

Presentation given during the genevarb meetup, in Geneva (Switzerland)


Vincent Pochet

December 12, 2012


  1. Ajax and Rails by Vincent Pochet @vin100pochet https://github.com/vincent-pochet

  2. Ajax and Rails • Standard rendering • json messages ◦

    as_json ◦ json templates • Rendering HTML ◦ pjax ◦ turbolinks
  3. Standard rendering The old way! Each action render the full

    page markup: • layout • external scripts and css files • page content A POST action send data and receive response as a new HTML page => full rendering on every action
  4. as_json Model Controller class Model < ActiveRecord::Base def as_json(options =

    {}) super({only: [:id, :name]}.merge!(options)) end end class ModelsController < ApplicationController def show model = Model.find(params[:id]) render json: model end end Easy for simple data/message transfer Did not scale (multiple output format...) Models should not be responsible of their presentation
  5. The MVC way jbuilder Model View (show.json.jbuilder) Controller class Model

    < ActiveRecord::Base end json.(@model, :id, :name) json.other @model.compute_something class ModelsController < ApplicationController def show @model = Model.find(params[:id]) end end We use templates like we do for html rendering Partial templates Multiple presentation for models, depending of the action Advanced rendering
  6. The MVC way jbuilder (json) https://github.com/rails/jbuilder Builder (xml) https://github.com/jimweirich/builder rabl

    (json and xml) https://github.com/nesquena/rabl
  7. HTML rendering PJAX (https://github.com/defunkt/jquery-pjax) HTML / Javascript Controller class ModelsController

    < ApplicationController def show @model = Model.find(params[:id]) render layout: false if request.headers['X-PJAX'] end end Simple jquery extension Reload only portions of web pages on navigation PushState support You keep the control on how links are rendered <a href='/explore' data-pjax='#main'>Explore</a> <script type="text/javascript"> $(document).pjax('a[data-pjax]'); </scrript>
  8. HTML rendering Turbolinks (https://github.com/rails/turbolinks) Mix of the standard HTML rendering

    with a javascript based application. Similar to PJAX with differences: • A rails project (part of Rails 4) • Replace the entire body and the title tag content • Not dependant on jQuery • Used by default for all internal links
  9. Questions ?