SlideShare a Scribd company logo
1 of 33
Download to read offline
部分更新における Turbolinks 3 のマシさ
C#er から見た
Turbolinks 3
@dany1468
昔は C#er だった
❖ 2 年前まで 5 年ぐらいずっと C#/ASP.NET。その前は Java/Struts/
Seasar2で 2 年ぐらい。
❖ C# は 2 ぐらいから始めて、4.5 ぐらいまで触った感じ。6 とか分か
らん。
❖ ASP.NET は ASP.NET Ajax を経由して ASP.NET MVC は 3 ぐらいま
で。
❖ C# は好きだけど、テスト書きにくいのがむむむ。
❖ Ruby はもうすぐ2年ぐらい
Turbolinks 3
その前に・・
Turbolinks の一般的なイメージ
こんな感じですよね 😅
Turbolinks ってなんだっけ?
❖ 簡単には Github のサイトでやっているような pjax 的な動
作を簡単に実現できる仕組み。
❖ title, body を非同期に入れ替えているけど、pushState
使って URL は変える
❖ GET リクエストだけ
❖ ページ自体をキャッシュできたりと、さらに View を高速
化する仕組みも入っています。
Turbolinks 3 の発表 🎉
❖ 皆に無効化されながらも生き残った Turbolinks が
Rails5 で 3 になる事が RailsConf 2015で発表され、現在
も活発に開発が続けられています。
🚀目玉機能のPartialReplacement
目玉機能の Partial Replacement
❖ title, body だけでなく細かく制御できるようになった
❖ client, server side の両方でキーワードを指定することで、
部分的に更新する箇所、しない箇所を指定できる
❖ client side は data-turbolinks-temporary, data-turbolinks-
permanent をタグに指定をすることで切り替え
❖ server side は redirect_to, render 時に change, keep のキー
ワードを指定することで切り替え
部分更新ができればもっと高速
に画面の切り替えができる❓
ちょっと待て・・
部分更新と言えば・・😧
ASP.NET Ajax
❖ 皆さんはこの単語をご存知でしょうか?
その前に ASP.NET
❖ Ruby/Rails の方にはあまり馴染みが無いかも
❖ Windows Formを無理やりWebに持ってきたというのが
簡単な説明
❖ Web なのにステートフルという点では Java の Wicket
がちょっと近い。
❖ 今はオワコンと化して ASP.NET MVC にとって変わら
れた
いや、言うほど悪くないですよ
😅
そして ASP.NET Ajax
❖ Ajax の流れに完全に乗り遅れた MS が出した超兵器
( ASP.NET MVC の爆誕前)
❖ JS を書かないっていう点では Google Web Toolkit を思い
出したり
❖ JS を書くこと無くモーダルやインクリメンタルサーチとか
を特殊なタグを書くことで実現できる💡
❖ なんかコンポーネントっぽい!
でも ASP.NET Ajax は失敗した💀
❖ 簡単な画面なら良かったんですよね。。
❖ Wicket よりもステートフルのやり方が良くなかった(状
態を全部 hidden に書き出しだと。。)
❖ Ajax の機能も特殊なタグでやり過ぎて、自動生成な
JavaScript が実行時に大量に流れた
❖ よって、複雑な画面を作ろうとすると、エラーが発生しデ
バッグも困難になった 😖
特に辛かった部分更新
❖ 一番便利でかつ、一番悩ましかったのが部分更新
❖ <asp:UpdatePanel> という魔法のタグ1つで、そこが部分更新の
対象となる😳
❖ よくなかったのは部分更新によって異る機能を持つコンポーネン
トが画面にあるような作りなのに、全て一つの Controller で捌く
必要があったこと
❖ MVP パターン使って Presenter を作るなどしてマシにはできた
が、基本はどんどんコードが肥大化 😩
UpdatePanel
それもあって最初の感想
❖ 「DHH さん、やっちまったな。。😷」
❖ と Turbolinks の引き続きの無効化を誓ったのでした
レスポンスから見る ASP.NET Ajax と Turbolinks 3 の違い
❖ ASP.NET Ajax の部分更新では、例えば POST した時のレスポンス
は、UpdatePanel で指定した部分だけのフラグメント HTML が返
される
❖ 一方で、Turbolinks 3 の場合は、リクエストしたアクションの戻り
値の HTMLがそのまま返される。
❖ 基本は pjax なので、非同期実行ができない場合でも、その画面
がレンダリングできるようにしたい
❖ つまり、本当に部分的にしか画面を更新しない場合にはほとんど
が無駄なレスポンスになる
Turbolinks 3 の有利な点
❖ Turbolinks 3 は元々が pjax 的な感じなので、当然別の
Controllerへのリクエストもできる
❖ ASP.NET は原則 POST は自身の Controllerにしかできない
❖ つまり最初のレンダリングが終われば、画面の各パーツは
POST 先の異る別々のコンポーネントとして振る舞える
❖ でも見た目いつもの Rails のコードと変わらない
❖ change, keep みたいなキーワードはあるけど
ふむ、それなら使いどころあるかも
💡
DEMO
https://github.com/dany1468/turbolinks3-playground
demo ブランチ
コンポーネント指向に画面を作る
❖ 最近ではクライアントサイド、特に React.js 等のフレームワークがコ
ンポーネントに UIとロジックを閉じ込めて画面を作るように設計さ
れていたりします。
Turbolinks とコンポーネント
❖ Turbolinks では UI と Logic は相変わらず Controller と
View で離れています。
❖ しかし Partial Replacement によって、それらの組み合
わせが1つの画面内で独立して振る舞う事を可能にして
います。
Rails らしいバランス感覚
❖ 「部分更新」と聞いてまず思うのは、 Turbolinks なんか使わずに
SPA として作って、JavaScript のフレームワーク使った方がいいよ
うに思える、がそうしなかった。
❖ 思い出すのは、Model の肥大化を防ぐのに、新たな層を入れて整理
する事もできるが、それはせず concerns を導入するだけに留めた
❖ みんながそんな複雑なアプリを作るわけじゃない
❖ 本当に複雑な事は解決できないかもしれないが、シンプルに解決で
きる事を増やしていくようなアプローチ?(個人の感想)
Rails の進む道
❖ RailsConf の DHH のキーノートでとてもらしい発言が
ありました
❖ http://tech.misoca.jp/entry/2015/05/08/170112
Turbolinks 3 を使うべきか?
❖ あなたのチームが JavaScript に十分熟知していて、メン
テナンスする時間も取れそうであり、今後もどんどん画
面が複雑化していきそうであれば、React.js のようなフ
ロントエンドのフレームワークを使うべきだと思います
Turbolinks 3 を使うべきか?
❖ 一方で、JavaScript が苦手なメンバーが多く、そこに投
資もできないのであれば、Turbolinks 3 は1つの選択肢
になりうると思います。
❖ ただし、本当に複雑でインタラクティブな画面を作りた
い時は、いずれフロントエンドのフレームワークを使う
必要があるということは考えなくてはいけないと思いま
す 😤
メンテ不能な JavaScript コードを生み出すぐらい
なら Turbolinks 3 を検討してはいかがでしょう
か?

More Related Content

What's hot

2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
Ueki Kouji
 
20091119_sinatraを使ってみた
20091119_sinatraを使ってみた20091119_sinatraを使ってみた
20091119_sinatraを使ってみた
ngi group.
 
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発
Yoichi Toyota
 

What's hot (20)

私とRubyの付き合い方 - 岡山Ruby会議02
私とRubyの付き合い方 - 岡山Ruby会議02私とRubyの付き合い方 - 岡山Ruby会議02
私とRubyの付き合い方 - 岡山Ruby会議02
 
2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb2012/11/03Hiroshima.rb
2012/11/03Hiroshima.rb
 
20091119_sinatraを使ってみた
20091119_sinatraを使ってみた20091119_sinatraを使ってみた
20091119_sinatraを使ってみた
 
非エンジニアでもわかる
非エンジニアでもわかる非エンジニアでもわかる
非エンジニアでもわかる
 
Rubyボードハンズオンテキスト
RubyボードハンズオンテキストRubyボードハンズオンテキスト
Rubyボードハンズオンテキスト
 
About Reauire.js
About Reauire.jsAbout Reauire.js
About Reauire.js
 
SpockからRSpecにきたときの気づき #coedorb
SpockからRSpecにきたときの気づき #coedorbSpockからRSpecにきたときの気づき #coedorb
SpockからRSpecにきたときの気づき #coedorb
 
Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバ
 
Reactjs
ReactjsReactjs
Reactjs
 
最近流行りのビルドツールとは
最近流行りのビルドツールとは最近流行りのビルドツールとは
最近流行りのビルドツールとは
 
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発
 
HTTPと Webクローリングについて
HTTPと WebクローリングについてHTTPと Webクローリングについて
HTTPと Webクローリングについて
 
Js kusen
Js kusenJs kusen
Js kusen
 
Varnish
VarnishVarnish
Varnish
 
GR-CITRUSの紹介
GR-CITRUSの紹介GR-CITRUSの紹介
GR-CITRUSの紹介
 
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
 
5分でクラウド対応メモ帳アプリを作る(PotatoTips#2 LT)
5分でクラウド対応メモ帳アプリを作る(PotatoTips#2 LT)5分でクラウド対応メモ帳アプリを作る(PotatoTips#2 LT)
5分でクラウド対応メモ帳アプリを作る(PotatoTips#2 LT)
 
chat bot framework for Java8
chat bot framework for Java8chat bot framework for Java8
chat bot framework for Java8
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
Chefのはじめの一歩
Chefのはじめの一歩Chefのはじめの一歩
Chefのはじめの一歩
 

Viewers also liked

Africans in the atlantic world
Africans in the atlantic world Africans in the atlantic world
Africans in the atlantic world
Alkoby
 
Quest new product presentation 9 10-13
Quest new product presentation 9 10-13Quest new product presentation 9 10-13
Quest new product presentation 9 10-13
QuestTechnologyIntl
 
Sylvia plath daddy en quintets
Sylvia plath daddy en quintetsSylvia plath daddy en quintets
Sylvia plath daddy en quintets
juanjurado98
 

Viewers also liked (20)

女子スーツ
女子スーツ女子スーツ
女子スーツ
 
Starbucks
StarbucksStarbucks
Starbucks
 
Cara Membuat WebTools
Cara Membuat WebToolsCara Membuat WebTools
Cara Membuat WebTools
 
Invenzione e creatività: una sfida
Invenzione e creatività: una sfidaInvenzione e creatività: una sfida
Invenzione e creatività: una sfida
 
Quest Manufacturing Product Training 2013
Quest Manufacturing Product Training 2013Quest Manufacturing Product Training 2013
Quest Manufacturing Product Training 2013
 
Combining Debt Planning and Retirement Planning: The Benefits of Retirees for...
Combining Debt Planning and Retirement Planning: The Benefits of Retirees for...Combining Debt Planning and Retirement Planning: The Benefits of Retirees for...
Combining Debt Planning and Retirement Planning: The Benefits of Retirees for...
 
साथरोग प्रतिबंध आणि आपण ( आश्रमशाळा / निवासी शाळांसाठी)
साथरोग प्रतिबंध आणि आपण ( आश्रमशाळा / निवासी शाळांसाठी) साथरोग प्रतिबंध आणि आपण ( आश्रमशाळा / निवासी शाळांसाठी)
साथरोग प्रतिबंध आणि आपण ( आश्रमशाळा / निवासी शाळांसाठी)
 
Quest technology product training 8 13-14
Quest technology product training 8 13-14Quest technology product training 8 13-14
Quest technology product training 8 13-14
 
Loc jack presentation
Loc jack presentationLoc jack presentation
Loc jack presentation
 
Quest new product presentation 5 12-14 c
Quest new product presentation 5 12-14 cQuest new product presentation 5 12-14 c
Quest new product presentation 5 12-14 c
 
Kultur&omsorg gruppe7 2013
Kultur&omsorg gruppe7 2013Kultur&omsorg gruppe7 2013
Kultur&omsorg gruppe7 2013
 
Sant jordi
Sant jordiSant jordi
Sant jordi
 
Portability and American Taxpayer Relief Tax Act of 2012
Portability and American Taxpayer Relief Tax Act of 2012Portability and American Taxpayer Relief Tax Act of 2012
Portability and American Taxpayer Relief Tax Act of 2012
 
Abbreviations
AbbreviationsAbbreviations
Abbreviations
 
Power point enginyer informatic
Power point enginyer informaticPower point enginyer informatic
Power point enginyer informatic
 
Africans in the atlantic world
Africans in the atlantic world Africans in the atlantic world
Africans in the atlantic world
 
Quest new product presentation 9 10-13
Quest new product presentation 9 10-13Quest new product presentation 9 10-13
Quest new product presentation 9 10-13
 
Høyre presentasjon
Høyre presentasjonHøyre presentasjon
Høyre presentasjon
 
Alan Turing
Alan TuringAlan Turing
Alan Turing
 
Sylvia plath daddy en quintets
Sylvia plath daddy en quintetsSylvia plath daddy en quintets
Sylvia plath daddy en quintets
 

C#er から見た Turbolinks 3

  • 1. 部分更新における Turbolinks 3 のマシさ C#er から見た Turbolinks 3 @dany1468
  • 2. 昔は C#er だった ❖ 2 年前まで 5 年ぐらいずっと C#/ASP.NET。その前は Java/Struts/ Seasar2で 2 年ぐらい。 ❖ C# は 2 ぐらいから始めて、4.5 ぐらいまで触った感じ。6 とか分か らん。 ❖ ASP.NET は ASP.NET Ajax を経由して ASP.NET MVC は 3 ぐらいま で。 ❖ C# は好きだけど、テスト書きにくいのがむむむ。 ❖ Ruby はもうすぐ2年ぐらい
  • 7. Turbolinks ってなんだっけ? ❖ 簡単には Github のサイトでやっているような pjax 的な動 作を簡単に実現できる仕組み。 ❖ title, body を非同期に入れ替えているけど、pushState 使って URL は変える ❖ GET リクエストだけ ❖ ページ自体をキャッシュできたりと、さらに View を高速 化する仕組みも入っています。
  • 8. Turbolinks 3 の発表 🎉 ❖ 皆に無効化されながらも生き残った Turbolinks が Rails5 で 3 になる事が RailsConf 2015で発表され、現在 も活発に開発が続けられています。
  • 10. 目玉機能の Partial Replacement ❖ title, body だけでなく細かく制御できるようになった ❖ client, server side の両方でキーワードを指定することで、 部分的に更新する箇所、しない箇所を指定できる ❖ client side は data-turbolinks-temporary, data-turbolinks- permanent をタグに指定をすることで切り替え ❖ server side は redirect_to, render 時に change, keep のキー ワードを指定することで切り替え
  • 11.
  • 12.
  • 16. その前に ASP.NET ❖ Ruby/Rails の方にはあまり馴染みが無いかも ❖ Windows Formを無理やりWebに持ってきたというのが 簡単な説明 ❖ Web なのにステートフルという点では Java の Wicket がちょっと近い。 ❖ 今はオワコンと化して ASP.NET MVC にとって変わら れた
  • 18. そして ASP.NET Ajax ❖ Ajax の流れに完全に乗り遅れた MS が出した超兵器 ( ASP.NET MVC の爆誕前) ❖ JS を書かないっていう点では Google Web Toolkit を思い 出したり ❖ JS を書くこと無くモーダルやインクリメンタルサーチとか を特殊なタグを書くことで実現できる💡 ❖ なんかコンポーネントっぽい!
  • 19. でも ASP.NET Ajax は失敗した💀 ❖ 簡単な画面なら良かったんですよね。。 ❖ Wicket よりもステートフルのやり方が良くなかった(状 態を全部 hidden に書き出しだと。。) ❖ Ajax の機能も特殊なタグでやり過ぎて、自動生成な JavaScript が実行時に大量に流れた ❖ よって、複雑な画面を作ろうとすると、エラーが発生しデ バッグも困難になった 😖
  • 20. 特に辛かった部分更新 ❖ 一番便利でかつ、一番悩ましかったのが部分更新 ❖ <asp:UpdatePanel> という魔法のタグ1つで、そこが部分更新の 対象となる😳 ❖ よくなかったのは部分更新によって異る機能を持つコンポーネン トが画面にあるような作りなのに、全て一つの Controller で捌く 必要があったこと ❖ MVP パターン使って Presenter を作るなどしてマシにはできた が、基本はどんどんコードが肥大化 😩
  • 22. それもあって最初の感想 ❖ 「DHH さん、やっちまったな。。😷」 ❖ と Turbolinks の引き続きの無効化を誓ったのでした
  • 23. レスポンスから見る ASP.NET Ajax と Turbolinks 3 の違い ❖ ASP.NET Ajax の部分更新では、例えば POST した時のレスポンス は、UpdatePanel で指定した部分だけのフラグメント HTML が返 される ❖ 一方で、Turbolinks 3 の場合は、リクエストしたアクションの戻り 値の HTMLがそのまま返される。 ❖ 基本は pjax なので、非同期実行ができない場合でも、その画面 がレンダリングできるようにしたい ❖ つまり、本当に部分的にしか画面を更新しない場合にはほとんど が無駄なレスポンスになる
  • 24. Turbolinks 3 の有利な点 ❖ Turbolinks 3 は元々が pjax 的な感じなので、当然別の Controllerへのリクエストもできる ❖ ASP.NET は原則 POST は自身の Controllerにしかできない ❖ つまり最初のレンダリングが終われば、画面の各パーツは POST 先の異る別々のコンポーネントとして振る舞える ❖ でも見た目いつもの Rails のコードと変わらない ❖ change, keep みたいなキーワードはあるけど
  • 27. コンポーネント指向に画面を作る ❖ 最近ではクライアントサイド、特に React.js 等のフレームワークがコ ンポーネントに UIとロジックを閉じ込めて画面を作るように設計さ れていたりします。
  • 28. Turbolinks とコンポーネント ❖ Turbolinks では UI と Logic は相変わらず Controller と View で離れています。 ❖ しかし Partial Replacement によって、それらの組み合 わせが1つの画面内で独立して振る舞う事を可能にして います。
  • 29. Rails らしいバランス感覚 ❖ 「部分更新」と聞いてまず思うのは、 Turbolinks なんか使わずに SPA として作って、JavaScript のフレームワーク使った方がいいよ うに思える、がそうしなかった。 ❖ 思い出すのは、Model の肥大化を防ぐのに、新たな層を入れて整理 する事もできるが、それはせず concerns を導入するだけに留めた ❖ みんながそんな複雑なアプリを作るわけじゃない ❖ 本当に複雑な事は解決できないかもしれないが、シンプルに解決で きる事を増やしていくようなアプローチ?(個人の感想)
  • 30. Rails の進む道 ❖ RailsConf の DHH のキーノートでとてもらしい発言が ありました ❖ http://tech.misoca.jp/entry/2015/05/08/170112
  • 31. Turbolinks 3 を使うべきか? ❖ あなたのチームが JavaScript に十分熟知していて、メン テナンスする時間も取れそうであり、今後もどんどん画 面が複雑化していきそうであれば、React.js のようなフ ロントエンドのフレームワークを使うべきだと思います
  • 32. Turbolinks 3 を使うべきか? ❖ 一方で、JavaScript が苦手なメンバーが多く、そこに投 資もできないのであれば、Turbolinks 3 は1つの選択肢 になりうると思います。 ❖ ただし、本当に複雑でインタラクティブな画面を作りた い時は、いずれフロントエンドのフレームワークを使う 必要があるということは考えなくてはいけないと思いま す 😤
  • 33. メンテ不能な JavaScript コードを生み出すぐらい なら Turbolinks 3 を検討してはいかがでしょう か?