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
8
1.3k
GatewayパターンとSchema駆動開発
andoshin11
May 07, 2019
Tweet
Share
More Decks by andoshin11
See All by andoshin11
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
290
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
120
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
270
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
690
ain't giving up type-safe Express
andoshin11
2
400
Type Safe "Everything"
andoshin11
0
220
Hack your Nuxt router!
andoshin11
0
1.2k
Catch up Nuxt.js 2019.02
andoshin11
0
1.9k
The future of Nuxt.js with TypeScript
andoshin11
0
80
Other Decks in Technology
See All in Technology
物価高なラスベガスでの過ごし方
zakky
0
380
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.4k
Gradle: The Build System That Loves To Hate You
aurimas
2
140
Autify Company Deck
autifyhq
1
39k
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.5k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
650
Featured
See All Featured
Visualization
eitanlees
144
15k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
It's Worth the Effort
3n
183
27k
Producing Creativity
orderedlist
PRO
341
39k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Building Adaptive Systems
keathley
38
2.2k
RailsConf 2023
tenderlove
29
880
Facilitating Awesome Meetings
lara
49
6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Building Your Own Lightsaber
phodgson
102
6k
Unsuck your backbone
ammeep
668
57k
Done Done
chrislema
181
16k
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