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
53
フロントエンドとバックエンド非同期連携パターンのセッションを見てきた話 / 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
弥生のQAエンジニア 品質保証活動と今後の課題 / Yayoi QA engineers, Quality assurance activities and future challenges
yayoi_dd
0
42
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
2
850
Amazon OpenSearchのコスト最適化とZeroETLへの期待 / Amazon OpenSearch Cost Optimization and ZeroETL Expectations
yayoi_dd
1
51
reInventで学んだWebシステム運用のBadDayへの備え方 / How to Prepare for BadDay in Web System Operations Learned at reInvent
yayoi_dd
0
43
AWS reInventで感じた世界に見る生成AIの競争 / Competition in Generative AI as Seen Around the World at AWS reInvent
yayoi_dd
0
53
データの意味を適切に伝えましょう データ可視化のお手本/Conveying the Meaning of Data Appropriately: Exemplary Data Visualization
yayoi_dd
0
63
「失敗」から学ぶこと ~ソフトウェア開発と失敗の歴史~/Learning from 'Failures': The History of Software Development and Failures
yayoi_dd
0
59
ソフトウェアアーキテクチャーの基礎 エンジニアリングに基づく体系的アプローチ/Fundamentals of Software Architecture: A Systematic Approach Based on Engineering
yayoi_dd
0
62
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
3
3.1k
Other Decks in Technology
See All in Technology
20250307_エンジニアじゃないけどAzureはじめてみた
ponponmikankan
2
300
Platform Engineering for Private Cloud
cote
PRO
0
110
“常に進化する”開発現場へ! SHIFTが語るアジャイルQAの未来/20250306 Yuma Murase
shift_evolve
0
190
AIxIoTビジネス共創ラボ紹介_20250311.pdf
iotcomjpadmin
0
200
neoAI_千葉講演資料_250311_配布用.pdf
iotcomjpadmin
0
200
I tried leaving the presentation to AI.
zzzzico
3
120
いまから始めるAWS CDK 〜モダンなインフラ構築入門〜/iac-night-cdk-introduction
tomoki10
6
2.1k
Cloudflare Pages 4年使って分かった良さと注意点
kyosuke
0
190
失敗しないAIエージェント開発:階層的タスク分解の実践
kworkdev
PRO
0
760
AI_Agent_の作り方_近藤憲児
kenjikondobai
19
5.1k
入社半年で PTE に! 元海外在住者が語る Google Cloud × G-genで 成長する秘訣
risatube
PRO
0
110
LangGraph × Bedrock による複数の Agentic Workflow を利用した Supervisor 型のマルチエージェントの実現/langgraph-bedrock-supervisor-agent
ren8k
4
540
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Producing Creativity
orderedlist
PRO
344
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.3k
The Cult of Friendly URLs
andyhume
78
6.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.2k
Writing Fast Ruby
sferik
628
61k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Thoughts on Productivity
jonyablonski
69
4.5k
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処理は 利用していない
• 会計の基本機能を揃えていく段階で 使用する箇所がなかった
まとめ • リアルタイムで画面が更新されるパターンにもいろいろある • 必要に応じて選択しよう
ありがとうございました