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
100
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
590
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
330
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
290
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
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
360
OSMnx Galleryの紹介
mopinfish
0
150
Scale Security Programs with Scorecarding
ramimac
0
440
CSS polyfill とその未来
ken7253
0
140
やさしいClaude Code入門
minorun365
PRO
32
25k
Swiftは最高だよの話
yuukiw00w
2
290
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
470
libsyncrpcってなに?
uhyo
0
160
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
650
令和トラベルQAのAI活用
seigaitakahiro
0
520
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
250
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Agile that works and the tools we love
rasmusluckow
329
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
How to train your dragon (web standard)
notwaldorf
92
6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Bash Introduction
62gerente
614
210k
How GitHub (no longer) Works
holman
314
140k
Designing Experiences People Love
moore
142
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
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