Tweet
Tweet

Slide 1

Slide 1 text

フロントエンドとバックエンド 非同期連携パターンの セッションを見てきた話 弥生株式会社 木村 風太 2025/01/29

Slide 2

Slide 2 text

自己紹介 • 名前: 木村 風太 (きむら ふうた) • 職歴: 入社 2年目 • 弥生Nextの会計Nextを開発 • 趣味: 子育て 、 コーヒー

Slide 3

Slide 3 text

re:Inventで参加したセッション たくさんのセッションに参加しました! • GameDay, Jam • サーバレス • マイクロフロントエンド • 生成AI • アーキテクチャ • セキュリティ

Slide 4

Slide 4 text

LT内容 • 参加したセッションの紹介 • Asynchronous frontends - Building seamless event-driven experiences • Youtube (https://youtu.be/uqu7D6q1h34?si=3mXQrdOUwDhFo4yV) • 非同期的に画面更新されるパターン • リアルタイムで画面更新されるための実装例 5+1つ • 会計Nextの紹介

Slide 5

Slide 5 text

会場風景

Slide 6

Slide 6 text

非同期的に画面更新されるパターン • リアルタイムのイベント処理 • Polling • サブスクリプション • ブロードキャスト と point-to-point • 長時間プロセス • プッシュ通知 • Web • モバイル通知

Slide 7

Slide 7 text

Polling

Slide 8

Slide 8 text

サブスクリプション

Slide 9

Slide 9 text

ブロードキャスト と point-to-point

Slide 10

Slide 10 text

リアルタイムイベント処理の 実装例 5+1つ 1. WebSocket 2. GraphQL 3. Direct to GraphQL 4. GraphQLを使用しないイベント 5. Fire-and-Forget 6. MQTT

Slide 11

Slide 11 text

WebSocket

Slide 12

Slide 12 text

GraphQL

Slide 13

Slide 13 text

Direct to GraphQL

Slide 14

Slide 14 text

GraphQLを使用しないイベント

Slide 15

Slide 15 text

Fire-and-Forget

Slide 16

Slide 16 text

MQTT

Slide 17

Slide 17 text

会計Nextの技術スタック フロントエンド • TypeScript • Next.js • ECS Fargate etc... バックエンド • C#(.NET) • ECS Fargate • Aurora（MySQL）、DynamoDB etc...

Slide 18

Slide 18 text

会計Nextのアーキテクチャ概要 ※各マイクロサービスのGraphQLスキーマをGateWayに登録 クライアント GraphQL GateWay 仕訳 集計 固定資産 法人決算 … etc

Slide 19

Slide 19 text

会計Nextで採用されているパターン • Polling • 銀行の取引データを取り込む処理 • インポート処理 • GraphQLのSubscription処理は 利用していない • 会計の基本機能を揃えていく段階で 使用する箇所がなかった

Slide 20

Slide 20 text

まとめ • リアルタイムで画面が更新されるパターンにもいろいろある • 必要に応じて選択しよう

Slide 21

Slide 21 text

ありがとうございました