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
41
フロントエンドとバックエンド非同期連携パターンのセッションを見てきた話 / 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
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
1
250
Amazon OpenSearchのコスト最適化とZeroETLへの期待 / Amazon OpenSearch Cost Optimization and ZeroETL Expectations
yayoi_dd
1
42
reInventで学んだWebシステム運用のBadDayへの備え方 / How to Prepare for BadDay in Web System Operations Learned at reInvent
yayoi_dd
0
29
AWS reInventで感じた世界に見る生成AIの競争 / Competition in Generative AI as Seen Around the World at AWS reInvent
yayoi_dd
0
38
データの意味を適切に伝えましょう データ可視化のお手本/Conveying the Meaning of Data Appropriately: Exemplary Data Visualization
yayoi_dd
0
51
「失敗」から学ぶこと ~ソフトウェア開発と失敗の歴史~/Learning from 'Failures': The History of Software Development and Failures
yayoi_dd
0
52
ソフトウェアアーキテクチャーの基礎 エンジニアリングに基づく体系的アプローチ/Fundamentals of Software Architecture: A Systematic Approach Based on Engineering
yayoi_dd
0
54
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
3
3k
Lambdaの特徴を理解して活用する/Understanding and utilizing the features of Lambda
yayoi_dd
2
57
Other Decks in Technology
See All in Technology
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
13k
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
410
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
820
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
150
The Future of SEO: The Impact of AI on Search
badams
0
230
分解して理解する Aspire
nenonaninu
2
450
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
740
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.7k
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
480
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Navigating Team Friction
lara
183
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing for Performance
lara
604
68k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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処理は 利用していない
• 会計の基本機能を揃えていく段階で 使用する箇所がなかった
まとめ • リアルタイムで画面が更新されるパターンにもいろいろある • 必要に応じて選択しよう
ありがとうございました