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

by LEF

Slide 1

Slide 1 text

Web 開発における Deno Fresh の活用例ペアプロタイマー timer.team の開発 LEF（@lef237） 2024.06.21 - Findy Lunch LT

Slide 2

Slide 2 text

LEFでレフと読みます株式会社えにしテック所属 Deno で変わるランタイムの景色実践事例 Lunch LT 自己紹介

Slide 3

Slide 3 text

Deno で変わるランタイムの景色実践事例 Lunch LT 2023年12月、timer.teamをリリースしました

Slide 4

Slide 4 text

リモートワークでのペアプログラミング・モブプログラミングに特化したタイマーアプリ Deno で変わるランタイムの景色実践事例 Lunch LT timer.teamとは？

Slide 5

Slide 5 text

デモをします！ Deno で変わるランタイムの景色実践事例 Lunch LT

Slide 6

Slide 6 text

デモ（予備） Deno で変わるランタイムの景色実践事例 Lunch LT https://www.youtube.com/watch?v=Z5ySYfflU04

Slide 7

Slide 7 text

Deno で変わるランタイムの景色実践事例 Lunch LT timer.team開発の課題 vP リアルタイム双方向通信をしたI uP サーバーとクライアントを同じフレームワークで統一したI eP タイマーの状態を保存したい

Slide 8

Slide 8 text

①リアルタイム双方向通信 Deno で変わるランタイムの景色実践事例 Lunch LT

Slide 9

Slide 9 text

①リアルタイム双方向通信ブラウザでタイマーを操作したら、新しい状態を他のブラウザに伝える Deno で変わるランタイムの景色実践事例 Lunch LT タイマーの同期

Slide 10

Slide 10 text

①リアルタイム双方向通信 Deno で変わるランタイムの景色実践事例 Lunch LT WebSocket サーバーを介して、ブラウザ同士でタイマーを連携できる！双方向通信を可能にするプロトコル https://www.c-sharpcorner.com/article/how-to-use-websockets-in-asp-net-core-day-nine2/

Slide 11

Slide 11 text

①リアルタイム双方向通信 Deno で変わるランタイムの景色実践事例 Lunch LT Deno Deploy Deno向けのエッジコンピューティングサービス Deno公式ブログでWebSocketへの言及採用の決め手に ↓ https://deno.com/blog/deploy-streams

Slide 12

Slide 12 text

②フレームワークの統一 Deno で変わるランタイムの景色実践事例 Lunch LT

Slide 13

Slide 13 text

②フレームワークの統一できるだけ開発コストを減らしたい Deno で変わるランタイムの景色実践事例 Lunch LT サーバーとクライアントのコードを同じフレームワーク内で書きたい TypeScriptで統一したいという要望もありました

Slide 14

Slide 14 text

②フレームワークの統一 Deno で変わるランタイムの景色実践事例 Lunch LT Fresh Deno公式のWebアプリケーションフレームワーク軽量で動作が速く、 Deno Deployへ簡単にデプロイできる

Slide 15

Slide 15 text

②フレームワークの統一 Deno で変わるランタイムの景色実践事例 Lunch LT クライアント側のコードは islands/ サーバー側のコードは routes/ 静的・動的なコンポーネントだけでなく、WebSocketサーバーとクライアントも作成できる

Slide 16

Slide 16 text

③タイマーの状態を保存 Deno で変わるランタイムの景色実践事例 Lunch LT

Slide 17

Slide 17 text

③タイマーの状態を保存 Deno で変わるランタイムの景色実践事例 Lunch LT タイマーの状態とは？終了時刻、動作中、一時停止などの状態これらの状態をサーバーに保存することで、新しいブラウザが接続されたときにも対応できる

Slide 18

Slide 18 text

③タイマーの状態を保存 Deno で変わるランタイムの景色実践事例 Lunch LT Deno KV Denoのランタイムに搭載されたKVS（Key-Value Store）つまり、Denoが動く場所ならどこでも使える！

Slide 19

Slide 19 text

③タイマーの状態を保存 Deno で変わるランタイムの景色実践事例 Lunch LT kv.watch() データ更新を監視する機能 → timer.teamにも導入（それまではBroadcast Channelを使って実装していました）

Slide 20

Slide 20 text

アーキテクチャ Deno で変わるランタイムの景色実践事例 Lunch LT

Slide 21

Slide 21 text

Deno で変わるランタイムの景色実践事例 Lunch LT timer.teamのアーキテクチャ

Slide 22

Slide 22 text

Deno で変わるランタイムの景色実践事例 Lunch LT timer.teamのアーキテクチャ ①双方向通信 ②フレームワーク統一 ③保存 / 監視

Slide 23

Slide 23 text

Deno で変わるランタイムの景色実践事例 Lunch LT Denoのエコシステムのおかげで、技術的課題を解決できました！

Slide 24

Slide 24 text

https://zenn.dev/lef237/articles/8e4eb3112928d6 Zennに詳しくまとめました！　是非ご一読ください技術詳細 LT内に細かい解説を入れるのは泣く泣く断念しました…

Slide 25

Slide 25 text

Fresh, Deno KV, Deno Deployの組み合わせはリアルタイムWebアプリケーションに上手くマッチする！ Deno で変わるランタイムの景色実践事例 Lunch LT まとめ → WebSocketと相性が良く、kv.watch()が便利

Slide 26

Slide 26 text

・darashiさん・mayucoさん謝辞

Slide 27

Slide 27 text

Deno で変わるランタイムの景色実践事例 Lunch LT https://timer.team/ ご清聴ありがとうございました！