Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
當 Turbolinks 遇上 React
Search
蒼時弦や
August 11, 2017
Programming
2
390
當 Turbolinks 遇上 React
2017 ModernWeb Conference 演講簡報
蒼時弦や
August 11, 2017
Tweet
Share
More Decks by 蒼時弦や
See All by 蒼時弦や
2024 - COSCUP - Clean Architecture in Rails
elct9620
2
170
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
170
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
420
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
640
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
380
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
450
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
470
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
260
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
290
Other Decks in Programming
See All in Programming
Kiroで始めるAI-DLC
kaonash
2
580
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
はじめてのMaterial3 Expressive
ym223
2
300
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
個人軟體時代
ethanhuang13
0
320
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
Ruby Parser progress report 2025
yui_knk
1
440
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
4 Signs Your Business is Dying
shpigford
184
22k
Scaling GitHub
holman
463
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Code Review Best Practice
trishagee
70
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Building an army of robots
kneath
306
46k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
A Modern Web Designer's Workflow
chriscoyier
696
190k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Transcript
吚7XUEROLQNV蝽Ӥ5HDFW
襟 儘 䓛⛳ @elct9620 WEB DEVELOPER GAME DEVELOPER
None
None
None
Բ狝夺䌌Ꭺ7DPDVKLL䌕礯 䛑አ礯ֺ
7XUEROLQNVฎचෝ+70/ጱ+LVWRU\$3,ಅ䋿匍 ጱದ蔩牐 ದ蔩ܻቘ
ࣁ螂݄+LVWRU\$3,ݝአෝ獥矦ӤӞ殷ᘏӥӞ殷牐 ದ蔩ܻቘ
ದ蔩ܻቘ history.back(); history.forward(); ܻতጱ+LVWRU\$3,
+70/碝ीጱSXVK6WDWHۑ胼㳷虏౯㮉ݢ犥䌘倵 薩夵袅蝱ᤈ砺֢牐 ದ蔩ܻቘ
技術原理
技術原理
技術原理
技術原理
ದ蔩ܻቘ var newState = { pageName: 'New Page', controller: 'acticle',
id: '1' }; window.history.push( newState, newState.pageName, "/article/1" );
技術原理
技術原理
7XUEROLQNVฎݑک3-$;ದ蔩ጱ段叨ኞጱ叨ᇔ牐 ದ蔩ܻቘ
技術原理
技術原理
7XUEROLQNV虏M4XHU\篷ဩྋଉ螀֢ य़疑犋ฎ盄ࡅ稭
M4XHU\碉ݳ $(document).ready(function() { // OnLoad... }); य़ग़碍碻狡౯㮉䨝ࣁM4XHU\ጱUHDG\ 狶蒂ቘ
M4XHU\碉ݳ $(document).on("turbolinks:load, function(){ // OnLoad... }); 犋螂ࣁ7XUEROLQNVᥝ硬አ7XUEROLQNVጱORDGԪկ
M4XHU\䨝㵕֕ฎ螭ฎ瓥ധ ᯿蕦ڡত玕
jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API
M4XHU\碉ݳ $(document).on(“turbolinks:before-cache, function(){ // UnLoad… }); ࣁ殷ᶎᤩ䧙ਂԏ獮薹ᴻM4XHU\زկ
7XUEROLQNV吚5HDFW5RXWHUጱ磦դ 5HDFW7XUEROLQNV
5HDFW碉ݳ ReactDOM.render(<App />, root) Ӟ膢౯㮉䨝ፗ矑狶౮6LQJOH3DJH$SSOLFDWLRQ
技術原理
虏5HDFWݝ䌘蟂獤ጱ殷ᶎ磦矦 蟂獤磦矦
技術原理
技術原理
᯿蕦5HQGHUزկ蝨౮ग़稞Ԫկ翉ਧ ๅ矦殷ᶎ
5HDFW碉ݳ ReactDOM.unmountComponentAtNode(root); ֵአXQPRXQW㬵薹ᴻܻጱ翉ਧ
櫝樄殷ᶎ碻狶XQORDG XQPRXQW 疰ݢ犥ԧ 蚤M4XHU\ጱ眐हӞ䰬
ඪൔ:HESDFNHUԏ盅牧-DYD6FULSW哴ᰁ獊蟂硬አ:HESDFN蒂ቘ 5DLOV
3UR7LS <div id="attendees" data-event-id="<%= @event.id %>"> const dataset = root.dataset;
ReactDOM.render(<Component {...dataset} />, root); 5HQGHU碻ݢ犥癲獈GDWD痀斔ۗ
3UR7LS const Cable = ActionCable.createConsumer(); $FWLRQ&DEOH犖ݢ犥ࣁ:HESDFNӾֵአ
3UR7LS MessageChannel.broadcast_to( current_user, type: 'PRIVATE_MESSAGE', message: 'Hi, I am Aotoki!'
) $FWLRQ&DEOHݢ犥ፘෝ5HGX[ )OX[
3UR7LS const channel = Cable.subscriptions .create('MessageChannel') channel.received = store.dispatch $FWLRQ&DEOHݢ犥ፘෝ5HGX[
)OX[
3UR7LS var App = new Vue({ beforeDestroy: ... }) #
before-cache App.$destroy() 9XHӞ䰬犖ݢ犥
None