Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
GatewayパターンとSchema駆動開発
andoshin11
May 07, 2019
Technology
8
1.2k
GatewayパターンとSchema駆動開発
andoshin11
May 07, 2019
Tweet
Share
More Decks by andoshin11
See All by andoshin11
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
200
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
560
ain't giving up type-safe Express
andoshin11
2
340
Type Safe "Everything"
andoshin11
0
170
Hack your Nuxt router!
andoshin11
0
950
Catch up Nuxt.js 2019.02
andoshin11
0
1.5k
The future of Nuxt.js with TypeScript
andoshin11
0
64
Clean Architecture with Vue
andoshin11
13
8k
vue-cli 3.0時代のNuxt.js
andoshin11
3
5.5k
Other Decks in Technology
See All in Technology
Pentesting Password Reset Functionality
anugrahsr
0
460
AWS re:Invent 2022で発表された新機能を試してみた ~Cloud OperationとSecurity~ / New Cloud Operation and Security Features Announced at AWS reInvent 2022
yuj1osm
1
210
OpenShiftクラスターのアップグレード自動化への挑戦! / OpenShift Cluster Upgrade Automation
skitamura7446
0
140
開発者と協働できるメトリクスダッシュボードを作ろう!/SRE Lounge 2023
lmi
3
480
インフラ技術基礎勉強会 開催概要
toru_kubota
0
170
Oracle Transaction Manager for Microservices Free 22.3 製品概要
oracle4engineer
PRO
5
110
20230123_FinJAWS
takuyay0ne
0
120
02_プロトタイピングの進め方
kouzoukaikaku
0
480
Kaggleシミュレーションコンペの動向
nagiss
0
270
03_ユーザビリティテスト
kouzoukaikaku
0
450
USB PD で迎える AC アダプター大統一時代
puhitaku
2
1.9k
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由 〜モリサワの SaaS 戦略〜
tomuro
0
130
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Thoughts on Productivity
jonyablonski
49
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
A better future with KSS
kneath
230
16k
We Have a Design System, Now What?
morganepeng
37
5.9k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Docker and Python
trallard
30
1.9k
For a Future-Friendly Web
brad_frost
166
7.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
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