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
140
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
110
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
380
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
600
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
320
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
420
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
440
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
220
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
250
Other Decks in Programming
See All in Programming
WebDriver BiDiとは何なのか
yotahada3
1
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
180
AHC041解説
terryu16
0
560
最近のVS Codeで気になるニュース 2025/01
74th
1
250
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
4.1k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
560
Rubyでつくるパケットキャプチャツール
ydah
1
670
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
350
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
210
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
DROBEの生成AI活用事例 with AWS
ippey
0
120
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building an army of robots
kneath
302
45k
Being A Developer After 40
akosma
89
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Raft: Consensus for Rubyists
vanstee
137
6.8k
BBQ
matthewcrist
86
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
530
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
YesSQL, Process and Tooling at Scale
rocio
171
14k
How to train your dragon (web standard)
notwaldorf
90
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