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.

Transcript

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

   View Slide

2. 2
   FAIRFAX, V IRGI NIA T WO T HOU SA N D FI F TE E N
   

   View Slide

3. Turbolinks
   3
   Turbolinks
   v3.0
   v3.0
   

   View Slide

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.
   

   View Slide

5. 5
   pjax - usage
   
   
   
   
   My Site
   
   Go to next page.
   
   
   https://github.com/defunkt/jquery-pjax
   $(document).pjax('a', '#pjax-container')
   

   View Slide

6. pjax - on GitHub
   6
   

   View Slide

7. pjax - on GitHub
   7
   

   View Slide

8. 8
   pjax - configuration(s)
   def index
   if request.headers['X-PJAX']
   render layout: false
   end
   end
   https://github.com/defunkt/jquery-pjax
   

   View Slide

9. 9
   Convention
   

   View Slide

10. 10
    Convention
    Kathy Sierra
    

    View Slide

11. Turbolinks
    • Replace the entire 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
    

    View Slide

12. 12
    INKOVATE - Hackathon App
    

    View Slide

13. 13
    INKOVATE - Normal GETs
    class IdeasController < ApplicationController
    def index
    @ideas = Idea.order(order_clause)
    end
    end
    

    View Slide

14. 14
    INKOVATE - Simple POST
    

    View Slide

15. 15
    INKOVATE - Simple POST
    

    View Slide

16. 16
    INKOVATE - Simple POST
    followings_path(@idea),
    method: :post do %>
    Follow Idea
    
    

    View Slide

17. 17
    INKOVATE - Simple POST
    followings_path(@idea),
    method: :post,
    remote: true do %>
    Follow Idea
    
    

    View Slide

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
    

    View Slide

19. 19
    INKOVATE - Flash Messages
    class="iv-Main-flash"
    data-turbolinks-temporary>
    
    
    

    View Slide

20. 20
    INKOVATE - Simple POST
    

    View Slide

21. 21
    Hot Spots
    

    View Slide

22. 22
    INKOVATE - Simple POST
    

    View Slide

23. 23
    INKOVATE - Simple POST
    

    View Slide

24. Turbolinks - Hot Spots
    24
    • Single $(document).on('page:partial-
    load', ƒ(e) {…} handler and delegation.
    • Changing Fast. Official v5 is coming.
    

    View Slide

25. 25
    What Now?
    

    View Slide

26. 26
    Ken Collins @CustomInkTech
    Thanks!
    

    View Slide