Web 開発における Deno Fresh の活用例：ペアプロタイマー timer.team の開発

Denoで変わるランタイムの景色 実践事例 Findy Lunch LT での発表資料です
https://findy.connpass.com/event/320860/

以下はスライドで紹介した各種リンクです

timer.team
https://timer.team/

DenoとFreshでペアプロ・モブプロ用タイマー『timer.team』を開発して得た知見
https://zenn.dev/lef237/articles/8e4eb3112928d6

How to use timer.team - YouTube
https://youtu.be/Z5ySYfflU04

Transcript

1. Web 開発における Deno Fresh の活用例 ペアプロタイマー timer.team の開発 LEF（@lef237） 2024.06.21 - Findy Lunch LT
2. LEFでレフと読みます 株式会社えにしテック所属 Deno で変わるランタイムの景色 実践事例 Lunch LT 自己紹介
3. Deno で変わるランタイムの景色 実践事例 Lunch LT 2023年12月、timer.teamをリリースしました
4. リモートワークでの ペアプログラミング・モブプログラミングに 特化したタイマーアプリ Deno で変わるランタイムの景色 実践事例 Lunch LT timer.teamとは？
5. デモをします！ Deno で変わるランタイムの景色 実践事例 Lunch LT
6. デモ（予備） Deno で変わるランタイムの景色 実践事例 Lunch LT https://www.youtube.com/watch?v=Z5ySYfflU04
7. Deno で変わるランタイムの景色 実践事例 Lunch LT timer.team開発の課題 vP リアルタイム双方向通信をしたI uP サーバーとクライアントを同じフレームワークで統一したI eP タイマーの状態を保存したい
8. ①リアルタイム双方向通信 Deno で変わるランタイムの景色 実践事例 Lunch LT
9. ①リアルタイム双方向通信 ブラウザでタイマーを操作したら、 新しい状態を他のブラウザに伝える Deno で変わるランタイムの景色 実践事例 Lunch LT タイマーの同期
10. ①リアルタイム双方向通信 Deno で変わるランタイムの景色 実践事例 Lunch LT WebSocket サーバーを介して、ブラウザ同士で タイマーを連携できる！ 双方向通信を可能にするプロトコル https://www.c-sharpcorner.com/article/how-to-use-websockets-in-asp-net-core-day-nine2/
11. ①リアルタイム双方向通信 Deno で変わるランタイムの景色 実践事例 Lunch LT Deno Deploy Deno向けのエッジコンピューティングサービス Deno公式ブログでWebSocketへの言及 採用の決め手に ↓ https://deno.com/blog/deploy-streams
12. ②フレームワークの統一 Deno で変わるランタイムの景色 実践事例 Lunch LT
13. ②フレームワークの統一 できるだけ開発コストを減らしたい Deno で変わるランタイムの景色 実践事例 Lunch LT サーバーとクライアントのコードを 同じフレームワーク内で書きたい TypeScriptで統一したいという要望もありました
14. ②フレームワークの統一 Deno で変わるランタイムの景色 実践事例 Lunch LT Fresh Deno公式のWebアプリケーションフレームワーク 軽量で動作が速く、 Deno Deployへ簡単にデプロイできる
15. ②フレームワークの統一 Deno で変わるランタイムの景色 実践事例 Lunch LT クライアント側のコードは islands/ サーバー側のコードは routes/ 静的・動的なコンポーネントだけでなく、WebSocketサーバーとクライアントも作成できる
16. ③タイマーの状態を保存 Deno で変わるランタイムの景色 実践事例 Lunch LT
17. ③タイマーの状態を保存 Deno で変わるランタイムの景色 実践事例 Lunch LT タイマーの状態とは？ 終了時刻、動作中、一時停止などの状態 これらの状態をサーバーに保存することで、 新しいブラウザが接続されたときにも対応できる
18. ③タイマーの状態を保存 Deno で変わるランタイムの景色 実践事例 Lunch LT Deno KV Denoのランタイムに搭載されたKVS（Key-Value Store） つまり、Denoが動く場所なら どこでも使える！
19. ③タイマーの状態を保存 Deno で変わるランタイムの景色 実践事例 Lunch LT kv.watch() データ更新を監視する機能 → timer.teamにも導入 （それまではBroadcast Channelを使って実装していました）
20. アーキテクチャ Deno で変わるランタイムの景色 実践事例 Lunch LT
21. Deno で変わるランタイムの景色 実践事例 Lunch LT timer.teamのアーキテクチャ
22. Deno で変わるランタイムの景色 実践事例 Lunch LT timer.teamのアーキテクチャ ①双方向通信 ②フレームワーク統一 ③保存 / 監視
23. Deno で変わるランタイムの景色 実践事例 Lunch LT Denoのエコシステムのおかげで、技術的課題を解決できました！
24. https://zenn.dev/lef237/articles/8e4eb3112928d6 Zennに詳しくまとめました！　是非ご一読ください 技術詳細 LT内に細かい解説を入れるのは泣く泣く断念しました…
25. Fresh, Deno KV, Deno Deployの組み合わせは リアルタイムWebアプリケーションに上手くマッチする！ Deno で変わるランタイムの景色 実践事例 Lunch LT まとめ → WebSocketと相性が良く、kv.watch()が便利
26. ・darashiさん ・mayucoさん 謝辞
27. Deno で変わるランタイムの景色 実践事例 Lunch LT https://timer.team/ ご清聴ありがとうございました！