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
380
當 Turbolinks 遇上 React
2017 ModernWeb Conference 演講簡報
蒼時弦や
August 11, 2017
Tweet
Share
More Decks by 蒼時弦や
See All by 蒼時弦や
2023 - RubyConfTW - Rethink Rails Architecture
elct9620
0
62
20230916 - DDDTW - 導入 Domain-Driven Design 的最佳時機
elct9620
0
320
2023 - WebConf - 選擇適合你的技能組合
elct9620
0
520
20230322 - Generative AI 小聚 ft. Happy Designer
elct9620
0
260
2022 - 默默會 - 重新學習 MVC 的 Model
elct9620
1
380
MOPCON 2022 - 從 Domain-Driven Design 看網站開發框架隱藏
elct9620
1
410
2022 - COSCUP - 我想慢慢寫程式該怎麼辦?
elct9620
0
210
2022 - COSCUP - 打造高速 Ruby 專案開發流程
elct9620
0
230
2021 - RubyKaigi - It is time to build your mruby VM on the microcontroller?
elct9620
0
190
Other Decks in Programming
See All in Programming
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Trial
cairolibrary720
1
130
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Temporalを取り巻く仕様を整理する
sajikix
0
110
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
CSC307 Lecture 10
javiergs
PRO
0
310
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Namespace on read
tagomoris
2
370
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Building Adaptive Systems
keathley
34
2k
Facilitating Awesome Meetings
lara
46
5.8k
The Invisible Customer
myddelton
117
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
4 Signs Your Business is Dying
shpigford
178
21k
A better future with KSS
kneath
231
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Code Reviewing Like a Champion
maltzj
517
39k
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