Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GatewayパターンとSchema駆動開発

5c97d6b5611feeebc345c3e4742a05a8?s=47 andoshin11
May 07, 2019
Technology
8
1.2k

 GatewayパターンとSchema駆動開発

5c97d6b5611feeebc345c3e4742a05a8?s=128

andoshin11

May 07, 2019
Tweet

More Decks by andoshin11

See All by andoshin11
Private Cloudを支える最高のユーザーガイド運用技術
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
0
190
TS CompilerがVueを喋れても良いじゃないか
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
0
480
ain't giving up type-safe Express
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
2
310
Type Safe "Everything"
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
0
160
Hack your Nuxt router!
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
0
880
Catch up Nuxt.js 2019.02
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
0
1.4k
The future of Nuxt.js with TypeScript
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
0
55
Clean Architecture with Vue
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
13
7.8k
vue-cli 3.0時代のNuxt.js
5c97d6b5611feeebc345c3e4742a05a8?s=48 andoshin11
3
5.4k

Other Decks in Technology

See All in Technology
miisan's career talk
253f81535853f9fddcadaec9b37dc1e0?s=48 mii3king
0
220
Rethinking how distributed applications are built
08701c3eabe85450809695cf290ef675?s=48 tillrohrmann
0
100
【toranoana.deno#7】Denoからwasmを呼び出す基礎
6ab47a68ee78e84c34731ce12333deff?s=48 toranoana
0
130
データ分析基盤のはじめかた
69a81d6d4d66a348e72f7a28b265fdbe?s=48 chanyou0311
0
120
Introduction To Technical Writing
E7bc9823fd0076b90769b25f1caf54b6?s=48 olawanle_joel
0
100
アーキテクチャを明文化して開発に臨んだ話
903c7dbf16067d22e7b03ead7d8acdc5?s=48 akkie76
0
340
Modern Android dependency injection
A9f24621ff57d380b4e85799edd4a984?s=48 hugovisser
1
130
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る！
44a210d1299a727e9d601a47dfedeabf?s=48 mot_techtalk
1
380
The application of formal methods in Kafka reliability engineering
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
1
200
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます！〜
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
0
200
雑な攻撃からELBを守る一工夫 ＋おまけ / Know-how to protect servers from miscellaneous attacks
8e8410eb785755ae2cb485f85dbab6e8?s=48 hiroga
0
530
IoTLT88-NTKanazawa-laundry-dry
4256c3dc4c4b6933bb2ffb4176a595a0?s=48 yukima0707
0
230

Featured

See All Featured
A Philosophy of Restraint
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
192
15k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
11k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
12k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
19
1.4k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k

Transcript

  1. Gatewayパターンと Schema駆動開発 2019.5.7 @andoshin11

  2. Who am I? Shin Ando (Andy) @andoshin11 - Frontend Developer

    / Architect - Freelance Vue / Nuxt / React / Flutter / Go / Ruby etc... 2

  3. 話すこと 3 • アーキテクチャの話 • Universal Schemaの話 • TypeScriptの話

  4. 話さないこと 4 • Vue.jsの話 • Nuxt.jsの話 • ドメイン設計の話 • 具体的な実装の話

    (サンプルは紹介予定)

  5. 5 本LTの内容は中規模以上 のSPAを想定しています

  6. 6 「描画」を司るデータ管理の変遷 SPA以前 • Rails, Symfony等のフルスタックフレームワークで描画も担っていた時代 • 各Modelから抽出したデータをFatなControllerに集約して描画層へ伝達 • Dirtyなデータ整形ロジックはバックエンドレイヤーで隠蔽するのが一般的

  7. 7 「描画」を司るデータ管理の変遷 SPA以前 → SPA黎明期 • フロントエンドとバックエンドの分離。 HTTPを介した疎なデータ伝達 • サーバーサイド

    → バックエンドドメインのREST APIを公開 • クライアントサイド → APIレスポンスをそのままメモリ上に保存し、描画に利用 描画(Presentation)のたびにクライアントサイドでDirtyなデータ整形処理が必要になる → ページ単位のStoreやPresenter(Getters)が量産される結果に

  8. 8 「描画」を司るデータ管理の変遷 SPA以前 → SPA黎明期 → SPA成熟期(Now!) • クライアントデータストアの設計手法が成熟 •

    (中規模以上のSPAにおいては)エンドユーザーに対するデータの入出力に特化したクラ イアントドメインの定義が不可欠に • APIレスポンスをStoreに保存する前のドメイン変換レイヤーが求められるようになる

  9. 9 (番外編)バックエンドドメインとの乖離 バックエンドのドメイン設計におけるクライテリア • DBの特性 → Relation Hints, Indexability, etc…

    • 言語の特性 → Value ObjectやEntityの扱いやすさ • FWおよびORMの特性 → Model Layerの扱い、DBとの結合度合い等

  10. 10 (番外編)バックエンドドメインとの乖離 バックエンドのドメイン設計におけるクライテリア • DBの特性 → Relation Hints, Indexability, etc…

    • 言語の特性 → Value ObjectやEntityの扱いやすさ • FWおよびORMの特性 → Model Layerの扱い、DBとの結合度合い等 モノリシックなアプリケーションでも上記の制約が発生するのに加えて、マイクロ サービス環境ではさらに個々のドメインが疎になる

  11. 11 (番外編)バックエンドドメインとの乖離 バックエンドのドメイン設計におけるクライテリア • DBの特性 → Relation Hints, Indexability, etc…

    • 言語の特性 → Value ObjectやEntityの扱いやすさ • FWおよびORMの特性 → Model Layerの扱い、DBとの結合度合い等 モノリシックなアプリケーションでも上記の制約が発生するのに加えて、マイクロ サービス環境ではさらに個々のドメインが疎になる バックエンドドメインをクライアントドメインに そのまま転写するのは厳しくなる一方

  12. 12 Translator、作りましょう ※ バックエンドのSchemaを受け取ってクライアントドメイ ンに変換する関数(逆も然り)

  13. 13 Translatorを挟むのはどこでもOK • BFF • API Clientのmiddleware • API ClientをラップするClient-Side

    Gateway • etc...

  14. 14 バックエンドSchemaはどこから？

  15. 15 Universal Schema(Swagger)を利用

  16. 16 YAMLから型定義を自動生成 作った →　openapi-ts-gen

  17. 17 Schemasの型定義

  18. 18

  19. 19

  20. 20 現在のワークフロー 1. Swaggerファイルを更新 (バックエンド/フロントエンド共同でメンテ) 2. 型定義をPrivate Registryに公開 3. フロントエンド開発用のStub

    Serverを更新(シンプルなExpress Server) 4. GatewayのRequest / Response translatorsを更新 → APIの実装ではなくInterfaceについて逐次合意を取ることで高速な開発が可能に → APIの仕様変更はTypeScriptの型エラーとして検知可能。壊れにくい仕組みづくり

  21. 21 サンプルコード • https://github.com/andoshin11/sample-petstore-api • https://github.com/andoshin11/sample-nuxt-pet-store