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
GatewayパターンとSchema駆動開発
Search
andoshin11
May 07, 2019
Technology
7
1.4k
GatewayパターンとSchema駆動開発
andoshin11
May 07, 2019
Tweet
Share
More Decks by andoshin11
See All by andoshin11
カーナベルにおけるProtobuf二次利用例
andoshin11
0
110
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
630
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
340
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
730
ain't giving up type-safe Express
andoshin11
2
440
Type Safe "Everything"
andoshin11
0
250
Hack your Nuxt router!
andoshin11
0
1.3k
Catch up Nuxt.js 2019.02
andoshin11
0
2.1k
Other Decks in Technology
See All in Technology
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
850
Agentic Workflowという選択肢を考える
tkikuchi1002
1
430
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
120
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
150
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5k
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
110
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
5
570
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
500
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
11
2.3k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
160
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
330
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
12
4.4k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making Projects Easy
brettharned
116
6.3k
Music & Morning Musume
bryan
46
6.6k
How to Ace a Technical Interview
jacobian
277
23k
Building an army of robots
kneath
306
45k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Cult of Friendly URLs
andyhume
79
6.4k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
Gatewayパターンと Schema駆動開発 2019.5.7 @andoshin11
Who am I? Shin Ando (Andy) @andoshin11 - Frontend Developer
/ Architect - Freelance Vue / Nuxt / React / Flutter / Go / Ruby etc... 2
話すこと 3 • アーキテクチャの話 • Universal Schemaの話 • TypeScriptの話
話さないこと 4 • Vue.jsの話 • Nuxt.jsの話 • ドメイン設計の話 • 具体的な実装の話
(サンプルは紹介予定)
5 本LTの内容は中規模以上 のSPAを想定しています
6 「描画」を司るデータ管理の変遷 SPA以前 • Rails, Symfony等のフルスタックフレームワークで描画も担っていた時代 • 各Modelから抽出したデータをFatなControllerに集約して描画層へ伝達 • Dirtyなデータ整形ロジックはバックエンドレイヤーで隠蔽するのが一般的
7 「描画」を司るデータ管理の変遷 SPA以前 → SPA黎明期 • フロントエンドとバックエンドの分離。 HTTPを介した疎なデータ伝達 • サーバーサイド
→ バックエンドドメインのREST APIを公開 • クライアントサイド → APIレスポンスをそのままメモリ上に保存し、描画に利用 描画(Presentation)のたびにクライアントサイドでDirtyなデータ整形処理が必要になる → ページ単位のStoreやPresenter(Getters)が量産される結果に
8 「描画」を司るデータ管理の変遷 SPA以前 → SPA黎明期 → SPA成熟期(Now!) • クライアントデータストアの設計手法が成熟 •
(中規模以上のSPAにおいては)エンドユーザーに対するデータの入出力に特化したクラ イアントドメインの定義が不可欠に • APIレスポンスをStoreに保存する前のドメイン変換レイヤーが求められるようになる
9 (番外編)バックエンドドメインとの乖離 バックエンドのドメイン設計におけるクライテリア • DBの特性 → Relation Hints, Indexability, etc…
• 言語の特性 → Value ObjectやEntityの扱いやすさ • FWおよびORMの特性 → Model Layerの扱い、DBとの結合度合い等
10 (番外編)バックエンドドメインとの乖離 バックエンドのドメイン設計におけるクライテリア • DBの特性 → Relation Hints, Indexability, etc…
• 言語の特性 → Value ObjectやEntityの扱いやすさ • FWおよびORMの特性 → Model Layerの扱い、DBとの結合度合い等 モノリシックなアプリケーションでも上記の制約が発生するのに加えて、マイクロ サービス環境ではさらに個々のドメインが疎になる
11 (番外編)バックエンドドメインとの乖離 バックエンドのドメイン設計におけるクライテリア • DBの特性 → Relation Hints, Indexability, etc…
• 言語の特性 → Value ObjectやEntityの扱いやすさ • FWおよびORMの特性 → Model Layerの扱い、DBとの結合度合い等 モノリシックなアプリケーションでも上記の制約が発生するのに加えて、マイクロ サービス環境ではさらに個々のドメインが疎になる バックエンドドメインをクライアントドメインに そのまま転写するのは厳しくなる一方
12 Translator、作りましょう ※ バックエンドのSchemaを受け取ってクライアントドメイ ンに変換する関数(逆も然り)
13 Translatorを挟むのはどこでもOK • BFF • API Clientのmiddleware • API ClientをラップするClient-Side
Gateway • etc...
14 バックエンドSchemaはどこから?
15 Universal Schema(Swagger)を利用
16 YAMLから型定義を自動生成 作った → openapi-ts-gen
17 Schemasの型定義
18
19
20 現在のワークフロー 1. Swaggerファイルを更新 (バックエンド/フロントエンド共同でメンテ) 2. 型定義をPrivate Registryに公開 3. フロントエンド開発用のStub
Serverを更新(シンプルなExpress Server) 4. GatewayのRequest / Response translatorsを更新 → APIの実装ではなくInterfaceについて逐次合意を取ることで高速な開発が可能に → APIの仕様変更はTypeScriptの型エラーとして検知可能。壊れにくい仕組みづくり
21 サンプルコード • https://github.com/andoshin11/sample-petstore-api • https://github.com/andoshin11/sample-nuxt-pet-store