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. 1
    Winning with Ajax + pushState + Rails
    Turbo Applications

    View full-size slide

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

    View full-size slide

  3. Turbolinks
    3
    Turbolinks
    v3.0
    v3.0

    View full-size 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 full-size slide

  5. 5
    pjax - usage




    My Site

    Go to next page.


    https://github.com/defunkt/jquery-pjax
    $(document).pjax('a', '#pjax-container')

    View full-size slide

  6. pjax - on GitHub
    6

    View full-size slide

  7. pjax - on GitHub
    7

    View full-size 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 full-size slide

  9. 10
    Convention
    Kathy Sierra

    View full-size slide

  10. 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 full-size slide

  11. 12
    INKOVATE - Hackathon App

    View full-size slide

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

    View full-size slide

  13. 14
    INKOVATE - Simple POST

    View full-size slide

  14. 15
    INKOVATE - Simple POST

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. 20
    INKOVATE - Simple POST

    View full-size slide

  20. 22
    INKOVATE - Simple POST

    View full-size slide

  21. 23
    INKOVATE - Simple POST

    View full-size slide

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

    View full-size slide

  23. 26
    Ken Collins @CustomInkTech
    Thanks!

    View full-size slide