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

Turbo Applications - Winning with Ajax + pushState + Rails

Ken Collins
October 30, 2015

Turbo Applications - Winning with Ajax + pushState + Rails

Ken Collins will take a quick look at what is happening with Rails 5 and how you might avoid writing tons of modern JavaScript.

Ken Collins

October 30, 2015
Tweet

More Decks by Ken Collins

Other Decks in Technology

Transcript

  1. 4 pjax - overview .--. / \ ## a a

    ( '._) |'-- | _.\___/_ ___pjax___ ."\> \Y/|<'. '._.-' / \ \_\/ / '-' / | --'\_/|/ | _/ |___.-' | |`'` | | | | / './ /__./` | | \ | | \ | | ; | | / | | jgs |___\_.\_ `-"--'---' https://github.com/defunkt/jquery-pjax • pushState + ajax • HTML from server. • Replace page content. • Changes current URL. • No reload page layout including CSS & JS. • Appearance of a fast page load.
  2. 5 pjax - usage <head> <!-- styles, scripts, etc -->

    </head> <body> <h1>My Site</h1> <div class="container" id="pjax-container"> Go to <a href="/page/2">next page</a>. </div> </body> https://github.com/defunkt/jquery-pjax $(document).pjax('a', '#pjax-container')
  3. 8 pjax - configuration(s) def index if request.headers['X-PJAX'] render layout:

    false end end https://github.com/defunkt/jquery-pjax
  4. Turbolinks • Replace the entire <body> by default. • Opt-in

    to replace specific elements. • jQuery not required. Lightweight. • Doesn’t rely on tailored server side responses. Python, Django, PHP, Grails, ASP.NET • Don't make me think Rails integration. 11
  5. 13 INKOVATE - Normal GETs class IdeasController < ApplicationController def

    index @ideas = Idea.order(order_clause) end end
  6. 18 INKOVATE - Simple POST class FollowingsController < ApplicationController def

    create @idea = Idea.find params[:idea_id] @idea.followers << current_user changed = ['iv-Main-flash', 'iv-FollowActions', 'iv-Followers'] redirect_to @idea, change: changed, flash: {info: 'Following this idea!'} end end
  7. Turbolinks - Hot Spots 24 • Single $(document).on('page:partial- load', ƒ(e)

    {…} handler and delegation. • Changing Fast. Official v5 is coming.