Speaker

このトークは、Vueのリアクティビティをブラウザ上で実装してみせることで、その仕組みのベールを剥がすものです。プロダクション品質を目指すというより、コードで遊ぶことそのものを楽しんでいただく内容です。

もしVueのリアクティビティシステムが、ブラウザの中だけにとどまらなかったとしたら？ このトークでは、バックエンドで @vue/reactivity を使って何百台ものスマートフォンをリアルタイムで統率し、会場全体を同期したリアクティブなライトショーに変えてみせます。

構成：

・まず、原理を証明するための軽めのライブコーディングを行います

・その後、画面にコードを映しながらライブデモを開始します

・観客全員にQRコードをスキャンしてもらい、ログイン不要の超軽量ページにアクセスしてもらいます。すると各自の画面がバックエンドに制御される「ライト」に変わります。スマートフォンを掲げてもらい、うまくいけば会場全体が最大輝度で光に包まれます

・ステージ上の「指揮者ダッシュボード」からは、色・明るさ・BPM・パターン（ソリッド、ストロボ、ウェーブ、スパークル、文字ブロック）といったいくつかのリアクティブな制御が可能です

・バックエンドは小さなリアクティブグラフを保持しています

　- ソースref：モード、色、明るさ、など

　- 算出値（computed）：ビートのタイミング、クライアントごとの「バケット」、パターンの投影（例：波の位相）

　- エフェクト：WebSocket経由での更新のプッシュ、分析ログの記録

・ユーザーごとの命令的な配線は一切なし。ソースrefを変更するだけで、算出されたプロジェクションとエフェクトが自動的にすべてのデバイスへと変化を波及させます

持ち帰れるポイント

・Vueのリアクティビティは、UIの状態だけでなくバックエンドのロジックも統率できる

・単一のリアクティブな信頼できる情報源（source of truth）が、最小限の接着コードで多数のクライアントを駆動できる

・Server-Sent Events／WebSocketは、リアクティブなエフェクトによるライブなファンアウトと自然に相性が良い

・算出されたプロジェクションによって、ユーザーごとの命令が些細かつ一貫したものになる

・リアクティブな考え方は、副作用・スケジューリング・クリーンアップという関心事を明確にしてくれる

このトークはVue.js Amsterdamで既に披露し、好評をいただきました：

https://www.youtube.com/watch?v=hFgqGgaHo0U