$30 off During Our Annual Pro Sale. View Details »

Turbolinks

 Turbolinks

Rails 4 Feature in MOPCON

Yi-Ting Cheng

October 28, 2012
Tweet

More Decks by Yi-Ting Cheng

Other Decks in Technology

Transcript

  1. http://rocodev.com
    5VSCPMJOLT
    ultra fast by default
    12年10月28⽇日星期⽇日

    View Slide

  2. http://rocodev.com
    .F
    ○ blog.xdite.net
    ○ Rails Developer
    ○ ROCO ( Rails application
    development and consultant)
    ○ Facebook World Hack Grand Prize
    12年10月28⽇日星期⽇日

    View Slide

  3. http://rocodev.com
    5VSCPMJOLT
    12年10月28⽇日星期⽇日

    View Slide

  4. http://rocodev.com
    3BJMT'FBUVSF
    12年10月28⽇日星期⽇日

    View Slide

  5. http://rocodev.com
    BWBJMBCMFOPX
    https://github.com/rails/turbolinks
    12年10月28⽇日星期⽇日

    View Slide

  6. http://rocodev.com
    5VSCPMJOLT
    12年10月28⽇日星期⽇日

    View Slide

  7. http://rocodev.com
    -FU`TUBMLBCPVUlQKBYzpSTU
    12年10月28⽇日星期⽇日

    View Slide

  8. http://rocodev.com
    QKBY
    pushState + Ajax
    12年10月28⽇日星期⽇日

    View Slide

  9. http://rocodev.com
    QKBYᏈՌ
    ○ plus.google.com
    ○ facebook.com
    ○ github.com
    12年10月28⽇日星期⽇日

    View Slide

  10. http://rocodev.com
    XIZXFOFFElQKBYz
    12年10月28⽇日星期⽇日

    View Slide

  11. http://rocodev.com
    QSPCMFNPGBKBY
    ○ 可以不刷新頁面改變內容,但無法改變
    頁面網址
    ○ 要實作不刷新頁面並通過 url 追蹤,必
    須透過 window.localtion.hash
    ○ 經典的 hashbang #! 設計 ( Twitter )
    ○ dirty url
    ○ not SEO friendly
    12年10月28⽇日星期⽇日

    View Slide

  12. http://rocodev.com
    )5.-QVTI4UBUF
    ○ history.pushState
    ○ history.replaceState
    ○ window.onpopstate
    12年10月28⽇日星期⽇日

    View Slide

  13. http://rocodev.com
    BOPUIFSJTTVFT
    ○ 改變了內容也要順便改標題
    ○ 如何處理不支援的瀏覽器
    ○ 事件如何綁定
    ○ ajax error handling
    ○ ajax 前後的一些自定義事件
    12年10月28⽇日星期⽇日

    View Slide

  14. http://rocodev.com
    QKBYBKBYQVTI4UBUF
    https://github.com/defunkt/jquery-pjax
    12年10月28⽇日星期⽇日

    View Slide

  15. http://rocodev.com
    %FNP
    http://pjax.heroku.com/
    12年10月28⽇日星期⽇日

    View Slide

  16. http://rocodev.com
    QKBY
    ○ ajax + pushState 的封裝
    ○ 處理雜事
    ○ clean URL
    ○ SEO friendly
    ○ 作者 : defunkt ( Github CEO)
    12年10月28⽇日星期⽇日

    View Slide

  17. http://rocodev.com

    $.pjax({
    url: '/authors',
    container: '#main'
    })
    12年10月28⽇日星期⽇日

    View Slide

  18. http://rocodev.com

    $.ajax({
    url: '/authors',
    dataType: 'html',
    beforeSend: function(xhr){
    xhr.setRequestHeader('X-PJAX', 'true')
    },
    success: function(data){
    $('#main').html(data)
    history.pushState(null, $(data).filter('title').text(), '/authors')
    })
    })
    12年10月28⽇日星期⽇日

    View Slide

  19. http://rocodev.com

    Explore
    $(document).pjax('a[data-pjax]')
    12年10月28⽇日星期⽇日

    View Slide

  20. http://rocodev.com

    Explore
    $('#main').pjax('.js-pjax').on('pjax:error', function(e, xhr, err)
    {
    $('.error').text('Something went wrong: ' + err)
    })
    12年10月28⽇日星期⽇日

    View Slide

  21. http://rocodev.com




    Explore
    Help


    $('#main').pjax('a').on('pjax:send', function(){
    $(this).showLoader()
    })
    12年10月28⽇日星期⽇日

    View Slide

  22. http://rocodev.com
    3BJMTJOUFHSBUJPO
    def my_page
    if request.headers['X-PJAX']
    render :layout => false
    end
    end
    $.ajax({
    url: '/authors',
    dataType: 'html',
    beforeSend: function(xhr){
    xhr.setRequestHeader('X-PJAX', 'true')
    },
    success: function(data){
    $('#main').html(data)
    history.pushState(null, $(data).filter('title').text(), '/authors')
    })
    })
    12年10月28⽇日星期⽇日

    View Slide

  23. http://rocodev.com
    QKBYSBJMT
    # app/assets/javascripts/application.js
    $(function() {
    $('a:not([data-remote]):not([data-behavior]):not([data-skip-
    pjax])').pjax('[data-pjax-container]');
    });



    <%= Time.now %>



    <%= content_tag :h3, 'My site' %>
    <%= link_to 'About me', about_me_path %>

    <%= link_to 'Google', 'http://google.com', 'data-skip-pjax' => true %>


    12年10月28⽇日星期⽇日

    View Slide

  24. http://rocodev.com
    CBDLUP<5VSCPMJOLT>
    12年10月28⽇日星期⽇日

    View Slide

  25. http://rocodev.com
    QKBYሣDPOUBJOFSییܭֱ



    <%= Time.now %>



    <%= content_tag :h3, 'My site' %>
    <%= link_to 'About me', about_me_path %>

    <%= link_to 'Google', 'http://google.com', 'data-skip-pjax' => true %>


    12年10月28⽇日星期⽇日

    View Slide

  26. http://rocodev.com
    5VSCPMJOLT
    ○ 放大絕招 : 換掉整個
    ○ 無痛安裝:
    ○ bundle install turbolinks
    ○ //=require turbolinks
    https://github.com/rails/turbolinks/blob/master/lib/assets/
    javascripts/turbolinks.js.coffee
    12年10月28⽇日星期⽇日

    View Slide

  27. http://rocodev.com
    #FOFpU
    ○ 不需要 jQuery
    ○ 不需要對每個 page 重新 compile JS/CSS
    ○ 2x fast with little JS/CSS
    ○ 3x fast with lots JS/CSS
    ○ 對 heavy asset 、light content 有非常強
    大的提速效果
    https://github.com/steveklabnik/turbolinks_test
    12年10月28⽇日星期⽇日

    View Slide

  28. http://rocodev.com
    BMTP
    ○ opt-out: data-no-tubolinks on parent
    node
    ○ assets change detection: full reload
    ○ data-method, data-remote, data-
    confirm with Rails still works
    ○ full speed for pushState
    browsers,gracefully fallback for
    everything else
    12年10月28⽇日星期⽇日

    View Slide

  29. http://rocodev.com
    TUJMM#FUBOPX
    12年10月28⽇日星期⽇日

    View Slide

  30. http://rocodev.com
    ᔤੜ໰୊
    ○ 多數的 javascript 寫法,並不假設會有
    Turbolinks 這種東西。
    ○ 大多數熱門 plugin 可以配合 Turbolinks。
    但自己寫的有可能就...GG
    ○ 有可能某天死在某個 3rd party plugin 上
    https://github.com/kossnocorp/jquery.turbolinks
    12年10月28⽇日星期⽇日

    View Slide

  31. http://rocodev.com
    4VHHFTUJPO
    ○ designed to be long-lived across many
    different HTML pages without a refresh
    ○ Don't register event handlers or other
    bindings in a refresh handler unless you
    reliably tear them down.
    ○ You audit all third-party code that you use
    to make sure that they do not rely on DOM
    Ready events, or if they do, that they DOM
    Ready events areidempotent.
    12年10月28⽇日星期⽇日

    View Slide

  32. http://rocodev.com
    5IBOLT
    12年10月28⽇日星期⽇日

    View Slide