Turbolinks

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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⽇日星期⽇日

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

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⽇日星期⽇日

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⽇日星期⽇日

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⽇日星期⽇日

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>  <%= Time.now %> </div> <div data-pjax-container>  <%= content_tag :h3, 'My site' %> <%= link_to 'About me', about_me_path %>  <%= link_to 'Google', 'http://google.com', 'data-skip-pjax' => true %> </div> </body> 12年10月28⽇日星期⽇日

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

http://rocodev.com QKBYሣDPOUBJOFSییܭֱ <body> <div>  <%= Time.now %> </div> <div data-pjax-container>  <%= content_tag :h3, 'My site' %> <%= link_to 'About me', about_me_path %>  <%= link_to 'Google', 'http://google.com', 'data-skip-pjax' => true %> </div> </body> 12年10月28⽇日星期⽇日

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⽇日星期⽇日

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⽇日星期⽇日

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⽇日星期⽇日

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

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

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⽇日星期⽇日

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

Turbolinks

Turbolinks

Yi-Ting Cheng

More Decks by Yi-Ting Cheng

Other Decks in Technology

Featured

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://rocodev.com <IPXJUXPSLT> $.ajax({ url: '/authors', dataType: 'html', beforeSend: function(xhr){ xhr.setRequestHeader('X-PJAX',

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

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

http://rocodev.com <FYBNQMF> <div id='main'> <div class='loader' style='display:none'><img src='spin.gif'></div> <div class='tabs'>

http://rocodev.com 3BJMTJOUFHSBUJPO def my_page if request.headers['X-PJAX'] render :layout => false

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>

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

http://rocodev.com QKBYሣDPOUBJOFSییܭֱ <body> <div> <!-- This will not be touched

http://rocodev.com 5VSCPMJOLT ◦ 放大絕招 : 換掉整個 <body> ◦ 無痛安裝: ◦

http://rocodev.com #FOFpU ◦ 不需要 jQuery ◦ 不需要對每個 page 重新 compile

http://rocodev.com BMTP ◦ opt-out: data-no-tubolinks on parent node ◦ assets

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

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

http://rocodev.com 4VHHFTUJPO ◦ designed to be long-lived across many different

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