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
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
96
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
260
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
680
ain't giving up type-safe Express
andoshin11
2
390
Type Safe "Everything"
andoshin11
0
210
Hack your Nuxt router!
andoshin11
0
1.1k
Catch up Nuxt.js 2019.02
andoshin11
0
1.8k
The future of Nuxt.js with TypeScript
andoshin11
0
78
Clean Architecture with Vue
andoshin11
13
8.6k
Other Decks in Technology
See All in Technology
AWSでRAGを作る法方
sonoda_mj
1
140
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
Featured
See All Featured
Building Adaptive Systems
keathley
34
2k
What's new in Ruby 2.0
geeforr
338
31k
Building an army of robots
kneath
301
42k
Gamification - CAS2011
davidbonilla
78
4.9k
Become a Pro
speakerdeck
PRO
15
4.8k
Facilitating Awesome Meetings
lara
46
5.8k
The Language of Interfaces
destraynor
151
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Practical Orchestrator
shlominoach
185
10k
Faster Mobile Websites
deanohume
303
30k
Producing Creativity
orderedlist
PRO
340
39k
How to train your dragon (web standard)
notwaldorf
79
5.5k
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