Slide 1

Slide 1 text

Hotwire から DHH が考えるこれからの Rails と JS との付き合い⽅を知る @willnet 1

Slide 2

Slide 2 text

いろんな会社で技術顧問をしつつ、空いた時間で savanna.io などを開発しています 2

Slide 3

Slide 3 text

savanna.io は Hotwire を利⽤しています 3

Slide 4

Slide 4 text

今⽇は Hotwire の話をします 4

Slide 5

Slide 5 text

Hotwire とは？ Basecamp 社製js フレームワーク Rails の作者であるDHH がCTO をしている会社 hey.com(Basecamp 社製メールアプリケーション) を作るのに使われている複数のフレームワークで構成されている 5

Slide 6

Slide 6 text

Hotwire とは？ ( 意訳) モダンなweb アプリケーションを、JSON とたくさんの JavaScript を使うことなしに、HTML を送ることで実現するアプローチ Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. “ “ 6

Slide 7

Slide 7 text

今どきの js フレームワークといえば JSON を使うのがふつう？サーバサイドはJSON を返すフロントエンドはJSON を受け取るそこからDOM を構築してHTML をレンダリングする js ですべてを制御するのでUI を細かく作り込める 7

Slide 8

Slide 8 text

でもそれって⼤変ではないですか？ロジックがサーバサイドとクライアントサイド両⽅に必要になるクライアントは複数存在するのでそれぞれで実装を頑張らないと… ブラウザ iOS Android それぞれに専任のエンジニアが必要 8

Slide 9

Slide 9 text

Hotwire を使うとどうなるかサーバサイドにロジックを寄せることができるクライアントサイドのコードは最⼩限に抑えることができるそれでいて、それなりにSPA ができる結果としてひとつのチームですべてを担当できる( かも) 好きな⾔語を使える Hotwire はRails に限らず使えるようになっている ※ブリッジになるようなものは必要(ex: turbo-rails gem) 9

Slide 10

Slide 10 text

とはいえ vue やreact と⽐べて細かいことはできない native アプリケーションも基本webview になるぞ hey.com (Basecamp 社製のメールサービス) くらいのものであれば Hotwire で実現できるので、そのレベルで問題ないサービスならOK 「そのレベルで問題ないサービス」は結構な割合でありそう 10

Slide 11

Slide 11 text

Hotwire のアーキテクチャ Turbo Turbo Drive Turbo Frames Turbo Streams Turbo Native Stimulus Strada( 現時点で未発表なので今回は話しません) iOS やAndroid のネイティブで必要な機能(ex: カメラ) とHTML とをつなげるためのライブラリらしい 11

Slide 12

Slide 12 text

前提 Hotwire はRails に限らず使えますが、Rails を前提にしたツール (turbo-rails) があるのでRails で使うのが便利です今回はturbo-rails を利⽤している前提で話します 12

Slide 13

Slide 13 text

注意点 IE などの古いブラウザで動かすのは⼤変そう fetch API custom elements Intersection Observer API など、モダンブラウザでしか動かないAPI を利⽤している polyfill を使えば動きそうだけど⼤変そう IOS も12 以上( 近いうちに13 以上) が必要 13

Slide 14

Slide 14 text

Turbo から話していきます 14

Slide 15

Slide 15 text

Turbo Drive Turbolinks を改善させたもの 15

Slide 16

Slide 16 text

Turbolinks とは Rails4.0 からRails 標準のライブラリとなっているすべてのリンクをajax で置き換える受け取ったHTML のうち、body だけを現⾏のものと差し替えるするとjs やcss のダウンロード→ パースをスキップできるぶん⾼速化できる 16

Slide 17

Slide 17 text

不遇の Turbolinks リリース当時( 約7 年前) はjQuery およびjQuery プラグイン全盛 Turbolinks はjQuery プラグインと相性が悪いことがあった Turbolinks を使うためには⾊々わかっている必要があった通常のページロードは最初の⼀回のみであること E2E テストで、次ページに遷移したかをちゃんと待つ必要がある form に関しては完全に対応していないことハマるひとが多く、デメリットが⼤きいと判断→ 基本消されるライブラリに 17

Slide 18

Slide 18 text

Turbolinks もきちんと理解して使えば使いやすいいまはSPA なアプリケーションも増えたので、フロントエンドの知識のある⼈も増えている( はず) 要点さえ押さえれば、少ない労⼒でSPA 化が可能なメリットは変わっていない 18

Slide 19

Slide 19 text

( 余談 ) いま Turbolinks を使っているひとはどうやって Turbo に移⾏したらいいのエイヤで頑張ると移⾏できます詳細はブログに書いたのでこちらを⾒てください Turbolinks からTurbo への移⾏ - おもしろweb サービス開発⽇記 19

Slide 20

Slide 20 text

Turbo Drive による改善 form に関してもデフォルトでturbo 仕様になった form_with ヘルパメソッドはこれまでTurbolinks を意識し、デフォルトで data-remote="true" 属性がついていた Turbolinks を使っていない⼈からしたら混乱の元 Turbo がリリースされたことにより、Rails6.1 から data-remote="true" はデフォルトオフになった 20

Slide 21

Slide 21 text

Turbo Drive の form 送信時の挙動 form 送信時は302 などのレスポンスが返るとリダイレクト、4xx や 5xx 系が返るとレスポンスボディを差し替えて履歴はそのまま、となった Turbolinks 時にここをちゃんとやろうとすると⼿動でSJR(Server generated javascript response) して対応する必要があった 21

Slide 22

Slide 22 text

SJR ってなに例えばPost のcreate アクションでバリデーションエラーが起きたら、次のようなposts/create.js.erb をレンダリングします。 (shared/_error.html.erb にエラーメッセージ⽤の部分テンプレートが⼊っている想定) document.querySelector('#error').innerHTML = "<%= j(render("shared/error", model: @post)) %>"; するとrails-ujs が↑ の内容をeval してくれるので

にエラーメッセージが表⽰されます。 22

Slide 23

Slide 23 text

SJR 、セキュリティどうなんですかさっき提⽰したコードのレベルなら⼤丈夫だけど、ユーザが⼊⼒した⽂字列をカジュアルにSJR とすると⼤変危険ですね＞＜そもそもTurbo(links) でなにかするときに頻出する操作は限られている特定のDOM にHTML を挿⼊する(append, prepend) 特定のDOM を差し替える(replace, update) 特定のDOM を削除するこれを提供するのがTurbo Streams 23

Slide 24

Slide 24 text

Turbo Streams Turbo のレスポンスとして、↓ のようなHTML ⽚を Content- Type=text/vnd.turbo-stream.html で返すとTurbo がいい感じに処理してくれる。

id がmessages なDOM の内部に挿⼊(append) される

Slide 25

Slide 25 text

Turbo Streams で部分テンプレート活⽤ turbo-rails を使っていると次のように書ける turbo-stream タグやtemplate タグを⾃動で付与してレスポンスを返すこれで既存の部分テンプレートを活⽤できる!! def create message = Message.create!(params.require(:message).permit(:content)) render turbo_stream: turbo_stream.append(:messages, # ここがturbo-rails 提供部分 partial: "messages/message", locals: { message: message }) end end 25

Slide 26

Slide 26 text

複数操作をするビュー側で複数のturbo-stream タグをレンダリングして複数操作をすることもできる <% # app/views/entries/entry.turbo_stream.erb %> <%= turbo_stream.remove entry %> <%= turbo_stream.append "entries" do %> <%= render partial: "entries/entry", locals: { entry: entry } %> <% end %> 26

Slide 27

Slide 27 text

Turbo Streams で使える action action として使えるのは次の5 種類のみ append prepend replace update remove レールを敷くことで判断を楽にできるのと、SJR でセキュリティに⽳を開けるのを防ぐことができるのがメリット 27

Slide 28

Slide 28 text

Turbo Streams と websocket websocket(Action Cable) でも使える turbo-rails にはAction Cable ⽤のヘルパメソッドがあり、subscribe やbroadcast が簡単にできるようになっている例えば新着メールが来たタイミングで⾃動的にメールが追加される、というのが簡単にできる詳細はturbo-rails ソースコードをみてください( 現時点でドキュメントにはほぼ記載がない) 28

Slide 29

Slide 29 text

ここまで⾒てわかる Turbo ができること既存のHTML をそのまま使いつつユーザ体験を良くする(Turbo Drive) 同じテンプレートをいろんなところで使い回す(Turbo Stream) ex: ⼀通のメッセージを表す部分テンプレートをTurbo Streams でも使う 29

Slide 30

Slide 30 text

もっと使いまわしたいいろんな環境で共通のテンプレートが使えるとうれしいスマホなどの⼩さい画⾯ PC の⼤きい画⾯そこで Turbo Frames ですよ 30

Slide 31

Slide 31 text

Turbo Frames turbo-frame タグ中に書かれた要素はframe として区切られる frame 内のリンクはTurbo Frames ⽤のリンクとなる( 詳しくは次⾴)

メッセージ⼀覧

Hotwire

いいですね

// ↓ をクリックすると… ？メッセージを編集する 31

Slide 32

Slide 32 text

Turbo Frames

メッセージの編集

メッセージの内容 32

Slide 33

Slide 33 text

つまり Turbo Frames を使うとレスポンスのHTML の⼀部を使い、もとの HTML の⼀部を部分的に差し替えることができる 33

Slide 34

Slide 34 text

turbo-frame タグの中だけど普通のリンクにしたいときもありますよね

メッセージ⼀覧

Hotwire

いいですね

メッセージを編集する 34

Slide 35

Slide 35 text

Turbo Frames のメリット target="_top" つけはずしすることで、⼀つのテンプレートを使いまわしできる⼤きいディスプレイのときはインライン編集スマホなどの⼩さいディスプレイでは専⽤のページに遷移させる 35

Slide 36

Slide 36 text

Turbo Frames のもう⼀つの活⽤⽅法 src 属性をつけると、値となるURL を⾮同期でfetch するファーストビューの時間を短縮できる Turbo Frames ⽅式でレスポンスを差し替える

ともだち⼀覧

...

ともだちかも？

Slide 37

Slide 37 text

Turbo Frames でさらに遅延表⽰ loading="lazy" をつけると、その要素が画⾯に表⽰されるまでロードを遅延する

ともだち⼀覧

...

ともだちかも？

Slide 38

Slide 38 text

Turbo Native iOS やAndroid でTurbo を使うためのライブラリ webview でアプリケーションを利⽤する主にTurbo Drive での遷移による履歴をネイティブで管理するためのもの 38

Slide 39

Slide 39 text

Turbo については⼀通り話した 39

Slide 40

Slide 40 text

Turbo を使うとサーバサイドにロジックが集中するつまりjs の量が減るが、ゼロになるわけではない Turbo を使うと、全ページで使うjs をひとまとめにして提供するようになる js の整理がたいへん「A というページでだけ発⽕させたいjs 」を管理するのがたいへん 40

Slide 41

Slide 41 text

Stimulus HTML とjs をいい感じに紐付け合い整理するライブラリ学習コストが低い 41

Slide 42

Slide 42 text

Slide 43

Slide 43 text

特定のページだけで発⽕させたい js が書きやすい // hello_controler.js import { Controller } from "stimulus" export default class extends Controller { connect() { // ここにdata-controller="hello" が // 表⽰されたときに実⾏したい処理を書く } } 43

Slide 44

Slide 44 text

Stimulus のメリット controller ごとにファイルが⾃然と分かれて整理される HTML タグの属性名を⾒るとjs のどの部分に紐付いているかすぐわかる特定のページだけで発⽕させたいjs が書ける 44

Slide 45

Slide 45 text

まとめ未公開のStrada を除き⼀通りHotwire について説明した Hotwire は、" 最⼩限の労⼒でユーザが求めているサービスを提供すること" に特化しているライブラリつまりそれはRails と同じ⽅針をフロントエンドにも持ち込んだ、と⾔える少⼈数で開発するスタートアップ〜中規模なサービスに特に向いているはず便利なので使ってみてください！ 45