Turbolinks

Rails 4 Feature in MOPCON

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