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.

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!