Cap'n Webについて

Transcript

1. Cap'n Webについて

2. Me Yusuke Wada Web Application Developer Developer Advocate at Cloudflare

   A founder of Bokete The Creator of Hono

3. Cap’n Web

4. Cap'n Webとは？ • JavaScriptネイティブな RPC • capnwebというnpmパッケージがある • 作者がKenton Varda

   ◦ Cloudflare Workersの作者 • https://github.com/cloudflare/capnweb https://blog.cloudflare.com/capnweb-javascript-rpc-library/

5. Cap'n Webの特徴 • サーバーとブラウザで動作 • JavaScriptのメソッド呼び出し、オブジェクト操作ができる • HTTP、WebSocket、postMessage() で動作 •

   メジャーなブラウザ、 Cloudflare Workers、Node.js、Denoで動作 ◦ Hono Adapterを使うと Bunでも • 依存なし、 10KB(minify+gzip) • TypeScriptによる型サポート

6. インストール

7. RPCであること • RESTやGraphQLを置き換えるかも • サーバサイド・クライアントを JavaScript/TypeScriptに統一したい時

8. RPCのイメージ - APIの定義 src/api.ts RpcTargetをextendsしたクラスをつくって関数を定義

9. RPCのイメージ - クライアントの呼び出し src/client.ts api.hello()で関数呼び出し

10. src/client.ts src/api.ts

11. TypeScriptの型サポート APIから型を取ってきてジェネリクスに渡す

12. サーバーサイドの実装 src/server.ts MyApiServerのインストールをnewWorkersRpcResponse()に渡す

13. 動かし方 サーバーサイド Cloudflare Workers / Wranglerで起動 クライアントサイド コマンドライン / tsxで起動

14. 2種類の呼び出し • バッチとWebSocket • API、サーバーの実装は変えなくてよい

15. バッチの基本 src/client-batch.ts newHttpBatchRpcSessionを使う

16. まとめてリクエストする src/client-batch.ts Promise.all()した時に初めてリクエストが飛ぶ

17. クライアント出力

18. サーバーログ 1度だけ！

19. おさらい

20. パイプライン - API src/api.ts getMyName()を追加

21. パイプライン - クライアント src/client-batch.ts await batch.hello()した時に初めてリクエストが飛ぶ Promise

22. クライアント出力

23. サーバーログ 1度だけ！

24. パイプライン • APIを変えずに Promiseをメソッドに渡せる • batch.hello()の時にawaitして初めてリクエストが飛ぶ • Cap’n WebのPromiseは「通常の Promise」ではない！

    ◦ メソッドチェーンをよしなにしてくれる

25. Cap’n Webのバッチの面白いところ • JavaScriptのネイティブな関数呼び出し • パイプラインを作って 1度のラウンドトリップで実行

26. map() - API src/api.ts

27. map() - クライアント src/client-batch.ts リスト操作をmap()で行う

28. クライアント出力

29. サーバーログ 1度だけ！

30. map() を活用する • 友達のリストを処理する ◦ 1度だけのラウンドトリップ • RESTやGraphQLに大きなアドバンテージ • APIを変えずに

    1つのリクエストにすることができる

31. WebSocket - クライアント src/client-websocket.ts 使い方はさほど変わらない

32. クライアント出力 1秒経って

33. サーバーログ WebSocketコネクション

34. WebSocket • コネクションをはりっぱなし • チャットなどリアルタイム共有系で便利

35. Durable Objectsと一緒に使う • ステート管理をしたい • Cloudflare Workersの場合Durable Objectsが使える • JSRPCで使うRpcTargetがCap’n

    WebのAPIに使える • Cap’n WebのWeb Socketクライアントからステート付きのオブジェクトに アクセスできる
36. None

37. 既存のRPCとの比較 • JavaScript/TypeScriptのRPCライブラリは他にもある • tRPC • Hono RPC

38. JSネイティブに書ける 独自の書き方 バリデーションしている

39. 冗長 Honoのアプリをそのままクライアントで利用できる TypeScriptの型 + fetchラッパー

40. 実例 • Workers SDK • TanStack AIのExample ◦ https://github.com/TanStack/ai/tree/main/examples/ts-group-chat

41. Hono Adapter - インストール

42. Hono Adapter - コード例 src/server.ts Cloudflare Workers用 他にも同じインターフェースで Node.js/Deno/Bunに対応

43. まとめ • Cap’n Webの紹介 • JavaScriptネイティブのパイプライン • 1ラウンドトリップで呼び出し • Hono

    Adapterもある