Turbolinks

 Turbolinks

Rails 4 Feature in MOPCON

19e786a2a74377ff6e052d87fd8d1fa8?s=128

Yi-Ting Cheng

October 28, 2012
Tweet

Transcript

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

  2. http://rocodev.com .F ◦ blog.xdite.net ◦ Rails Developer ◦ ROCO (

    Rails application development and consultant) ◦ Facebook World Hack Grand Prize 12年10月28⽇日星期⽇日
  3. http://rocodev.com 5VSCPMJOLT 12年10月28⽇日星期⽇日

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

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

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

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

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

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

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

  11. http://rocodev.com QSPCMFNPGBKBY ◦ 可以不刷新頁面改變內容,但無法改變 頁面網址 ◦ 要實作不刷新頁面並通過 url 追蹤,必 須透過

    window.localtion.hash ◦ 經典的 hashbang #! 設計 ( Twitter ) ◦ dirty url ◦ not SEO friendly 12年10月28⽇日星期⽇日
  12. http://rocodev.com )5.-QVTI4UBUF ◦ history.pushState ◦ history.replaceState ◦ window.onpopstate 12年10月28⽇日星期⽇日

  13. http://rocodev.com BOPUIFSJTTVFT ◦ 改變了內容也要順便改標題 ◦ 如何處理不支援的瀏覽器 ◦ 事件如何綁定 ◦ ajax

    error handling ◦ ajax 前後的一些自定義事件 12年10月28⽇日星期⽇日
  14. http://rocodev.com QKBYBKBY QVTI4UBUF https://github.com/defunkt/jquery-pjax 12年10月28⽇日星期⽇日

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

  16. http://rocodev.com QKBY ◦ ajax + pushState 的封裝 ◦ 處理雜事 ◦

    clean URL ◦ SEO friendly ◦ 作者 : defunkt ( Github CEO) 12年10月28⽇日星期⽇日
  17. http://rocodev.com <IPXJUXPSLT> $.pjax({ url: '/authors', container: '#main' }) 12年10月28⽇日星期⽇日

  18. 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⽇日星期⽇日
  19. http://rocodev.com <FYBNQMF> <a href='/explore' data-pjax='#main'>Explore</a> $(document).pjax('a[data-pjax]') 12年10月28⽇日星期⽇日

  20. http://rocodev.com <FYBNQMF> <a href='/explore' class='js-pjax'>Explore</a> $('#main').pjax('.js-pjax').on('pjax:error', function(e, xhr, err) {

    $('.error').text('Something went wrong: ' + err) }) 12年10月28⽇日星期⽇日
  21. 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⽇日星期⽇日
  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⽇日星期⽇日
  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]'); }); <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⽇日星期⽇日
  24. http://rocodev.com CBDLUP<5VSCPMJOLT> 12年10月28⽇日星期⽇日

  25. 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⽇日星期⽇日
  26. 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⽇日星期⽇日
  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⽇日星期⽇日
  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⽇日星期⽇日
  29. http://rocodev.com TUJMM#FUBOPX 12年10月28⽇日星期⽇日

  30. http://rocodev.com ᔤੜ໰୊ ◦ 多數的 javascript 寫法,並不假設會有 Turbolinks 這種東西。 ◦ 大多數熱門

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