フロントエンドとバックエンド非同期連携パターンのセッションを見てきた話 / Talk about seeing a session on front-end and back-end asynchronous coordination patterns

弥生株式会社 もくテク
AWS re:Invent 2024 参加報告会（2025/01/29）
https://mokuteku.connpass.com/event/340760/

Transcript

1. フロントエンドとバックエンド 非同期連携パターンの セッションを見てきた話 弥生株式会社 木村 風太 2025/01/29
2. 自己紹介 • 名前: 木村 風太 (きむら ふうた) • 職歴: 入社 2年目 • 弥生Nextの会計Nextを開発 • 趣味: 子育て 、 コーヒー
3. re:Inventで参加したセッション たくさんのセッションに参加しました! • GameDay, Jam • サーバレス • マイクロフロントエンド • 生成AI • アーキテクチャ • セキュリティ
4. LT内容 • 参加したセッションの紹介 • Asynchronous frontends - Building seamless event-driven experiences • Youtube (https://youtu.be/uqu7D6q1h34?si=3mXQrdOUwDhFo4yV) • 非同期的に画面更新されるパターン • リアルタイムで画面更新されるための実装例 5+1つ • 会計Nextの紹介
5. 会場風景
6. 非同期的に画面更新されるパターン • リアルタイムのイベント処理 • Polling • サブスクリプション • ブロードキャスト と point-to-point • 長時間プロセス • プッシュ通知 • Web • モバイル通知
7. Polling
8. サブスクリプション
9. ブロードキャスト と point-to-point
10. リアルタイムイベント処理の 実装例 5+1つ 1. WebSocket 2. GraphQL 3. Direct to GraphQL 4. GraphQLを使用しないイベント 5. Fire-and-Forget 6. MQTT
11. WebSocket
12. GraphQL
13. Direct to GraphQL
14. GraphQLを使用しないイベント
15. Fire-and-Forget
16. MQTT
17. 会計Nextの技術スタック フロントエンド • TypeScript • Next.js • ECS Fargate etc... バックエンド • C#(.NET) • ECS Fargate • Aurora（MySQL）、DynamoDB etc...
18. 会計Nextのアーキテクチャ概要 ※各マイクロサービスのGraphQLスキーマをGateWayに登録 クライアント GraphQL GateWay 仕訳 集計 固定資産 法人決算 … etc
19. 会計Nextで採用されているパターン • Polling • 銀行の取引データを取り込む処理 • インポート処理 • GraphQLのSubscription処理は 利用していない • 会計の基本機能を揃えていく段階で 使用する箇所がなかった
20. まとめ • リアルタイムで画面が更新されるパターンにもいろいろある • 必要に応じて選択しよう
21. ありがとうございました