當 Turbolinks 遇上 React

2017 ModernWeb Conference 演講簡報

Transcript

1. 吚7XUEROLQNV蝽Ӥ5HDFW
2. 襟 儘 䓛⛳ @elct9620 WEB DEVELOPER GAME DEVELOPER
6. Բ狝夺䌌Ꭺ7DPDVKLL䌕礯 䛑አ礯ֺ
7. 7XUEROLQNVฎचෝ+70/ጱ+LVWRU\$3,ಅ䋿匍 ጱದ蔩牐 ದ蔩ܻቘ
8. ࣁ螂݄+LVWRU\$3,ݝአෝ獥矦ӤӞ殷౲ᘏӥӞ殷牐 ದ蔩ܻቘ
9. ದ蔩ܻቘ history.back(); history.forward(); ܻতጱ+LVWRU\$3,
10. +70/碝ीጱSXVK6WDWHۑ胼㳷虏౯㮉ݢ犥䌘倵 薩夵袅蝱ᤈ砺֢牐 ದ蔩ܻቘ
11. 技術原理
12. 技術原理
13. 技術原理
14. 技術原理
15. ದ蔩ܻቘ var newState = { pageName: 'New Page', controller: 'acticle', id: '1' }; window.history.push( newState, newState.pageName, "/article/1" );
16. 技術原理
17. 技術原理
18. 7XUEROLQNVฎݑک3-$;ದ蔩ጱ୽段叨ኞጱ叨ᇔ牐 ದ蔩ܻቘ
19. 技術原理
20. 技術原理
21. 7XUEROLQNV虏M4XHU\篷ဩྋଉ螀֢ य़疑犋ฎ盄ࡅ稭
22. M4XHU\碉ݳ $(document).ready(function() { // OnLoad... }); य़ग़碍碻狡౯㮉䨝ࣁM4XHU\ጱUHDG\ 狶蒂ቘ
23. M4XHU\碉ݳ $(document).on("turbolinks:load, function(){ // OnLoad... }); 犋螂ࣁ7XUEROLQNVᥝ硬አ7XUEROLQNVጱORDGԪկ
24. M4XHU\䨝㵕֕ฎ螭ฎ瓥ധ ᯿蕦ڡত玕
25. jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
26. jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
27. M4XHU\碉ݳ $(document).on(“turbolinks:before-cache, function(){ // UnLoad… }); ࣁ殷ᶎᤩ䧙ਂԏ獮薹ᴻM4XHU\زկ
28. ಩7XUEROLQNV吚5HDFW5RXWHUጱ磦դ 5HDFW7XUEROLQNV
29. 5HDFW碉ݳ ReactDOM.render(<App />, root) Ӟ膢౯㮉䨝ፗ矑狶౮6LQJOH3DJH$SSOLFDWLRQ
30. 技術原理
31. 虏5HDFWݝ䌘蟂獤ጱ殷ᶎ磦矦 蟂獤磦矦
32. 技術原理
33. 技術原理
34. ᯿蕦5HQGHUزկ蝨౮ग़稞Ԫկ翉ਧ ๅ矦殷ᶎ
35. 5HDFW碉ݳ ReactDOM.unmountComponentAtNode(root); ֵአXQPRXQW㬵薹ᴻܻ๜ጱ翉ਧ
36. 櫝樄殷ᶎ碻狶XQORDG XQPRXQW 疰ݢ犥ԧ 蚤M4XHU\ጱ眐हӞ䰬
37. ඪൔ:HESDFNHUԏ盅牧-DYD6FULSW哴ᰁ獊蟂硬አ:HESDFN蒂ቘ 5DLOV
38. 3UR7LS <div id="attendees" data-event-id="<%= @event.id %>"> const dataset = root.dataset; ReactDOM.render(<Component {...dataset} />, root); 5HQGHU碻ݢ犥癲獈GDWD痀௔斔ۗ
39. 3UR7LS const Cable = ActionCable.createConsumer(); $FWLRQ&DEOH犖ݢ犥ࣁ:HESDFNӾֵአ
40. 3UR7LS MessageChannel.broadcast_to( current_user, type: 'PRIVATE_MESSAGE', message: 'Hi, I am Aotoki!' ) $FWLRQ&DEOHݢ犥ፘ਻ෝ5HGX[ )OX[
41. 3UR7LS const channel = Cable.subscriptions .create('MessageChannel') channel.received = store.dispatch $FWLRQ&DEOHݢ犥ፘ਻ෝ5HGX[ )OX[
42. 3UR7LS var App = new Vue({ beforeDestroy: ... }) # before-cache App.$destroy() 9XHӞ䰬犖ݢ犥