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
160
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
160
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
420
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
630
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
370
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
440
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
470
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
250
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
280
Other Decks in Programming
See All in Programming
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
970
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
Deep Dive into ~/.claude/projects
hiragram
14
7.2k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
230
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
320
GPUを計算資源として使おう!
primenumber
1
190
Hack Claude Code with Claude Code
choplin
5
2.4k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Being A Developer After 40
akosma
90
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
4 Signs Your Business is Dying
shpigford
184
22k
Faster Mobile Websites
deanohume
307
31k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Thoughts on Productivity
jonyablonski
69
4.7k
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