Ajax and Rails

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

Transcript

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 ?