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
96
フロントエンドとバックエンド非同期連携パターンのセッションを見てきた話 / 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
140
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
2
4.7k
Amazon OpenSearchのコスト最適化とZeroETLへの期待 / Amazon OpenSearch Cost Optimization and ZeroETL Expectations
yayoi_dd
1
150
reInventで学んだWebシステム運用のBadDayへの備え方 / How to Prepare for BadDay in Web System Operations Learned at reInvent
yayoi_dd
0
75
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
社内お問い合わせBotの仕組みと学び
nish01
0
180
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
pprof vs runtime/trace (FlightRecorder)
task4233
0
160
いまさら聞けない ABテスト入門
skmr2348
1
200
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
110
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
890
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
340
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
580
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
110
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2.3k
GopherCon Tour 概略
logica0419
2
190
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Site-Speed That Sticks
csswizardry
11
880
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Language of Interfaces
destraynor
162
25k
Typedesign – Prime Four
hannesfritz
42
2.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
How GitHub (no longer) Works
holman
315
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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処理は 利用していない
• 会計の基本機能を揃えていく段階で 使用する箇所がなかった
まとめ • リアルタイムで画面が更新されるパターンにもいろいろある • 必要に応じて選択しよう
ありがとうございました