Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドとバックエンド非同期連携パターンのセッションを見てきた話 / Talk abou...
Search
yayoi_dd
January 29, 2025
Technology
0
94
フロントエンドとバックエンド非同期連携パターンのセッションを見てきた話 / 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/
yayoi_dd
January 29, 2025
Tweet
Share
More Decks by yayoi_dd
See All by yayoi_dd
“お客さま視点”を手に入れろ!! / Get the Customer’s Perspective!!
yayoi_dd
0
100
プロジェクト改善、まずは“ネタ出しの文化”から / Improving Projects Starts with a Culture of Idea Generation
yayoi_dd
0
100
使いにくい仕様を改善した件 / How We Improved a Difficult-to-Use Feature
yayoi_dd
0
110
弥生のQAエンジニア 品質保証活動と今後の課題 / Yayoi QA engineers, Quality assurance activities and future challenges
yayoi_dd
0
130
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
2
4.4k
Amazon OpenSearchのコスト最適化とZeroETLへの期待 / Amazon OpenSearch Cost Optimization and ZeroETL Expectations
yayoi_dd
1
130
reInventで学んだWebシステム運用のBadDayへの備え方 / How to Prepare for BadDay in Web System Operations Learned at reInvent
yayoi_dd
0
73
AWS reInventで感じた世界に見る生成AIの競争 / Competition in Generative AI as Seen Around the World at AWS reInvent
yayoi_dd
0
80
データの意味を適切に伝えましょう データ可視化のお手本/Conveying the Meaning of Data Appropriately: Exemplary Data Visualization
yayoi_dd
0
110
Other Decks in Technology
See All in Technology
Apache Spark もくもく会
taka_aki
0
140
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
データ分析エージェント Socrates の育て方
na0
7
2.5k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
350
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
Modern Linux
oracle4engineer
PRO
0
160
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
6
750
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
150
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
S3アクセス制御の設計ポイント
tommy0124
3
200
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
820
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
A designer walks into a library…
pauljervisheath
207
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
43
2.7k
Faster Mobile Websites
deanohume
309
31k
Bash Introduction
62gerente
615
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Navigating Team Friction
lara
189
15k
Transcript
フロントエンドとバックエンド 非同期連携パターンの セッションを見てきた話 弥生株式会社 木村 風太 2025/01/29
自己紹介 • 名前: 木村 風太 (きむら ふうた) • 職歴: 入社
2年目 • 弥生Nextの会計Nextを開発 • 趣味: 子育て 、 コーヒー
re:Inventで参加したセッション たくさんのセッションに参加しました! • GameDay, Jam • サーバレス • マイクロフロントエンド •
生成AI • アーキテクチャ • セキュリティ
LT内容 • 参加したセッションの紹介 • Asynchronous frontends - Building seamless event-driven
experiences • Youtube (https://youtu.be/uqu7D6q1h34?si=3mXQrdOUwDhFo4yV) • 非同期的に画面更新されるパターン • リアルタイムで画面更新されるための実装例 5+1つ • 会計Nextの紹介
会場風景
非同期的に画面更新されるパターン • リアルタイムのイベント処理 • Polling • サブスクリプション • ブロードキャスト と
point-to-point • 長時間プロセス • プッシュ通知 • Web • モバイル通知
Polling
サブスクリプション
ブロードキャスト と point-to-point
リアルタイムイベント処理の 実装例 5+1つ 1. WebSocket 2. GraphQL 3. Direct to
GraphQL 4. GraphQLを使用しないイベント 5. Fire-and-Forget 6. MQTT
WebSocket
GraphQL
Direct to GraphQL
GraphQLを使用しないイベント
Fire-and-Forget
MQTT
会計Nextの技術スタック フロントエンド • TypeScript • Next.js • ECS Fargate etc...
バックエンド • C#(.NET) • ECS Fargate • Aurora(MySQL)、DynamoDB etc...
会計Nextのアーキテクチャ概要 ※各マイクロサービスのGraphQLスキーマをGateWayに登録 クライアント GraphQL GateWay 仕訳 集計 固定資産 法人決算 …
etc
会計Nextで採用されているパターン • Polling • 銀行の取引データを取り込む処理 • インポート処理 • GraphQLのSubscription処理は 利用していない
• 会計の基本機能を揃えていく段階で 使用する箇所がなかった
まとめ • リアルタイムで画面が更新されるパターンにもいろいろある • 必要に応じて選択しよう
ありがとうございました