Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 .F ◦ blog.xdite.net ◦ Rails Developer ◦ ROCO (

    Rails application development and consultant) ◦ Facebook World Hack Grand Prize 12年10月28⽇日星期⽇日
  2. http://rocodev.com QSPCMFNPGBKBY ◦ 可以不刷新頁面改變內容,但無法改變 頁面網址 ◦ 要實作不刷新頁面並通過 url 追蹤,必 須透過

    window.localtion.hash ◦ 經典的 hashbang #! 設計 ( Twitter ) ◦ dirty url ◦ not SEO friendly 12年10月28⽇日星期⽇日
  3. http://rocodev.com QKBY ◦ ajax + pushState 的封裝 ◦ 處理雜事 ◦

    clean URL ◦ SEO friendly ◦ 作者 : defunkt ( Github CEO) 12年10月28⽇日星期⽇日
  4. http://rocodev.com <IPXJUXPSLT> $.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⽇日星期⽇日
  5. http://rocodev.com <FYBNQMF> <div id='main'> <div class='loader' style='display:none'><img src='spin.gif'></div> <div class='tabs'>

    <a href='/explore'>Explore</a> <a href='/help'>Help</a> </div> </div> $('#main').pjax('a').on('pjax:send', function(){ $(this).showLoader() }) 12年10月28⽇日星期⽇日
  6. 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⽇日星期⽇日
  7. 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]'); }); <body>

    <div> <!-- This will not be touched on PJAX updates --> <%= Time.now %> </div> <div data-pjax-container> <!-- PJAX updates will go here --> <%= content_tag :h3, 'My site' %> <%= link_to 'About me', about_me_path %> <!-- The following link will not be pjax'd --> <%= link_to 'Google', 'http://google.com', 'data-skip-pjax' => true %> </div> </body> 12年10月28⽇日星期⽇日
  8. http://rocodev.com QKBYሣDPOUBJOFSییܭֱ <body> <div> <!-- This will not be touched

    on PJAX updates --> <%= Time.now %> </div> <div data-pjax-container> <!-- PJAX updates will go here --> <%= content_tag :h3, 'My site' %> <%= link_to 'About me', about_me_path %> <!-- The following link will not be pjax'd --> <%= link_to 'Google', 'http://google.com', 'data-skip-pjax' => true %> </div> </body> 12年10月28⽇日星期⽇日
  9. http://rocodev.com 5VSCPMJOLT ◦ 放大絕招 : 換掉整個 <body> ◦ 無痛安裝: ◦

    bundle install turbolinks ◦ //=require turbolinks https://github.com/rails/turbolinks/blob/master/lib/assets/ javascripts/turbolinks.js.coffee 12年10月28⽇日星期⽇日
  10. 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⽇日星期⽇日
  11. 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⽇日星期⽇日
  12. http://rocodev.com ᔤੜ໰୊ ◦ 多數的 javascript 寫法,並不假設會有 Turbolinks 這種東西。 ◦ 大多數熱門

    plugin 可以配合 Turbolinks。 但自己寫的有可能就...GG ◦ 有可能某天死在某個 3rd party plugin 上 https://github.com/kossnocorp/jquery.turbolinks 12年10月28⽇日星期⽇日
  13. 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⽇日星期⽇日