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

Turbo Applications - Winning with Ajax + pushState + Rails

F0b14b7dbae1e90259eb946d1c841a17?s=47 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.

F0b14b7dbae1e90259eb946d1c841a17?s=128

Ken Collins

October 30, 2015
Tweet

Transcript

  1. 1 Winning with Ajax + pushState + Rails Turbo Applications

  2. 2 FAIRFAX, V IRGI NIA T WO T HOU SA

    N D FI F TE E N
  3. Turbolinks 3 Turbolinks v3.0 v3.0

  4. 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.
  5. 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')
  6. pjax - on GitHub 6

  7. pjax - on GitHub 7

  8. 8 pjax - configuration(s) def index if request.headers['X-PJAX'] render layout:

    false end end https://github.com/defunkt/jquery-pjax
  9. 9 Convention

  10. 10 Convention Kathy Sierra

  11. 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
  12. 12 INKOVATE - Hackathon App

  13. 13 INKOVATE - Normal GETs class IdeasController < ApplicationController def

    index @ideas = Idea.order(order_clause) end end
  14. 14 INKOVATE - Simple POST

  15. 15 INKOVATE - Simple POST

  16. 16 INKOVATE - Simple POST <%= button_to followings_path(@idea), method: :post

    do %> Follow Idea <% end %>
  17. 17 INKOVATE - Simple POST <%= button_to followings_path(@idea), method: :post,

    remote: true do %> Follow Idea <% end %>
  18. 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
  19. 19 INKOVATE - Flash Messages <div id="iv-Main-flash" class="iv-Main-flash" data-turbolinks-temporary> <%=

    render_flash_dialogs %> </div>
  20. 20 INKOVATE - Simple POST

  21. 21 Hot Spots

  22. 22 INKOVATE - Simple POST

  23. 23 INKOVATE - Simple POST

  24. Turbolinks - Hot Spots 24 • Single $(document).on('page:partial- load', ƒ(e)

    {…} handler and delegation. • Changing Fast. Official v5 is coming.
  25. 25 What Now?

  26. 26 Ken Collins @CustomInkTech Thanks!