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
280
Other Decks in Programming
See All in Programming
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
1.5k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
1から理解するWeb Push
dora1998
2
650
私の後悔をAWS DMSで解決した話
hiramax
4
180
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AIコーディングAgentとの向き合い方
eycjur
0
250
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
Improving my own Ruby thereafter
sisshiki1969
1
150
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
2
220
Honoアップデート 2025年夏
yusukebe
1
900
旅行プランAIエージェント開発の裏側
ippo012
2
670
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
87
4.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Speed Design
sergeychernyshev
32
1.1k
Writing Fast Ruby
sferik
628
62k
It's Worth the Effort
3n
187
28k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Invisible Side of Design
smashingmag
301
51k
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