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
FrontEnd:DDD
Search
Takepepe
June 21, 2017
Programming
3
2.9k
FrontEnd:DDD
Frontend de KANPAI! #01 - これからフロントエンドに求められる力 -
https://frokan.connpass.com/event/57554/
Takepepe
June 21, 2017
Tweet
Share
More Decks by Takepepe
See All by Takepepe
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
7
840
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
3.1k
フロントエンドの書くべきだったテスト、書かなくてよかったテスト
takefumiyoshii
39
15k
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
takefumiyoshii
24
8.4k
Next.js でリアーキテクトした話 / story-of-re-architect-with-nextjs
takefumiyoshii
12
8.6k
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
takefumiyoshii
54
20k
フロントエンドの複雑さに耐えるため実践したこと / readyfor-nextjs-first
takefumiyoshii
25
11k
Redux の利点を振り返る
takefumiyoshii
26
8.6k
Type-only Migrate by AST
takefumiyoshii
1
630
Other Decks in Programming
See All in Programming
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
450
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
480
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
460
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
390
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
5.1k
Quine, Polyglot, 良いコード
qnighy
4
620
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4.2k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
440
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
170
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
GitHub's CSS Performance
jonrohan
1030
460k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
YesSQL, Process and Tooling at Scale
rocio
168
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Code Review Best Practice
trishagee
64
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Transcript
Copyright © DeNA Co.,Ltd. All Rights Reserved. FrontEnd:DDD June 21,
2017 Takefumi Yoshii Design Division DeNA Co., Ltd. Frontend de KANPAI! #01
Copyright © DeNA Co.,Ltd. All Rights Reserved. FrontEnd:DDD ! 吉井健⽂
@Takepepe ! 広告制作会社 -> DeNA ! WebDesigner -> FrontendEngineer ! Flash -> jQuery -> React ! ⼆児のパパ 2 ⾃⼰紹介
Copyright © DeNA Co.,Ltd. All Rights Reserved. FrontEnd:DDD ! サービス事業開発(ヘルスケア)
! Rails / React / Redux / CSS ! ServersideEngineer:〜10⼈ ! FrontendEngineer:〜3⼈ ! Designer:〜2⼈ 3 担当事業について 本⽇の内容は⼤規模で⻑期運⽤を前提としたプロダクトをスコープとしています。 実践しているものもあれば、プロトタイプレベル程度で留めているもあります。
Copyright © DeNA Co.,Ltd. All Rights Reserved. FrontEnd:DDD 4 ドメイン駆動設計(DDD)
アプリケーションを継続的に改良していくため、 ユビキタス⾔語(チームの共通⾔語)を通じて、反復的に ドメインモデル(ビジネスロジックの核⼼)をグロースさせていく。 【参考⽂献】エリック・エヴァンスのドメイン駆動設計(通称DDD本) 複雑なアプリケーション開発のためのアーキテクチャ。 アプリケーション開発の核⼼はドメインモデリングにあるとされ、 分析モデルと実装モデルが同期している必要性が説かれている。
Copyright © DeNA Co.,Ltd. All Rights Reserved. FrontEnd:DDD 5 ドメイン駆動設計(DDD)
本⽇のコンテキストは「フロントエンド実装の活動領域」 「jQueryの⼿続き的な実装で乗り切ったレガシーな部分と、 React / Angular / Vue.js などを導⼊した部分が混在している」 という「フロントドメインあるある」を例に、克服すべき課題を挙げ、 DDDの概念を適⽤することで、どう解決するのかを考察する。
Copyright © DeNA Co.,Ltd. All Rights Reserved. 6
Copyright © DeNA Co.,Ltd. All Rights Reserved. 7
Copyright © DeNA Co.,Ltd. All Rights Reserved. 8 SPA の外で⾶び交う
Event … Store に隠蔽された State …
Copyright © DeNA Co.,Ltd. All Rights Reserved. 9 Real と
Virtual で重なり合うモーダル … observe 漏れのウィジェット …
Copyright © DeNA Co.,Ltd. All Rights Reserved. 10 求められる指揮者「ドメインモデル」は フレームワークの外界にある!
Copyright © DeNA Co.,Ltd. All Rights Reserved. 11 DDD:JS
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:JS 先のあるある事例の様な場合、SPA・⾮SPAのルーティング配下問わず、 フレームワークと異なるレイヤーでの状態管理が必須に。
また、SPA配下では状態管理が統合できている構造が必要になる。 SPA外に発⾏するイベント・SPA外から受け付けるイベント これもまた統合できている構造が必要になる。 DDD本の第4章「レイヤードアーキテクチャ」で⽰されている 責務の分離図を⾒てみる。 12 課題の概要
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:JS 13 DDD本
第4章 レイヤードアーキテクチャ
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:JS 14 DDD
: React Redux ⼀例
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:JS 15 DDD
: jQuery Widget ⼀例
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:JS ドメインモデルとインフラストラクチャを据えることで、 バラバラだった機能を統合することができる。
! ユーザー情報などは「ドメインモデル」 ! グローバルUIは「ドメインモデル」 ! SPAのみで利⽤する様な jsonAPI等 は「アプリケーションモデル」 管理対象のコンテキストに適切な場所に、ビジネスロジックを据える。 ドメインモデル・アプリケーションモデルにビジネスロジックを 集中させることでフレームワーク依存度が下がり、再利⽤性が⾼まる。 16 ドメイン・アプリケーションの境界線
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:JS モデルの実装は Immutable.js
が良い。 分散されがちな細かい表⽰ロジックやラベルの合成が集中できる。 Reduxでは副作⽤を委譲することができ、ドメインモデルの統合も容易。 インフラストラクチャに位置するサービスは、EventEmitterを継承。 サービス化を進めることで、redux-* が不要になることに気づく。 サービスが複雑になってきたら rx に頼りそう。 17 ReactRedux:モデリング – 状態管理 -
Copyright © DeNA Co.,Ltd. All Rights Reserved. FrontEnd:DDD ! FluxとDDDの統合⽅法
- かとじゅんの技術⽇誌 @かとじゅん ! 複雑なJavaScriptアプリケーションを考えながら作る話 @azu_re ! React使い必⾒! Immutable.jsでReactはもっと良くなる 18 参考⽂献 考察・資料作成にあたり参考にさせていただきました。 感謝いたします!
Copyright © DeNA Co.,Ltd. All Rights Reserved. 19 DDD:CSS
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:CSS ! イベントが存在しない分、JSよりは分り易い依存関係
! CSS のモデルは UIコンポーネント ! Bootstrap はモデルとして機能していると⾔える ! 利⽤者はプレゼンテーショナルな定義と微調整のみで良い ! モデルを抽象化、エンティティとして利⽤ ! UI/UX の拡張に伴い、モデルをマイグレートさせる ! UI/UX がグロースすることで、モデルが豊かになっていくことが理想 20 CSS設計:ドメインモデル
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:CSS ! CSS設計に応じて、4つの層のどこに属している定義なのか意識
! プレフィクスで分離されているCSS設計なら認識しやすい ! ドメイン・アプリケーションのコンテキストを分離 ! FLOCSSでいう Components と Projects の分離 担当事業で採⽤しているCSS設計図にDDDの4つの層を当ててみる。 21 CSS設計:モデリング
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:CSS 22 担当事業のCSS設計
- 2つの ITCSS × AtomicDesign × BEM -
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:CSS 23 担当事業のCSS設計
- ドメイン・アプリケーションの境界と依存関係 -
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:CSS 24 担当事業のCSS設計
– マイグレートの⽅向 -
Copyright © DeNA Co.,Ltd. All Rights Reserved. DDD:CSS ! ⼿続き的な定義は⼀旦プレゼンターに委ねる
! エンティティが表⾯化した時、モデル・ドメインにマイグレート ! BOXモデルが関⼼の分離を侵⾷しない様に注意 ! アプリケーションプレゼンターなら css modules もアリ ! それでも、責務の識別 と e2eテストツール の都合からBEMに落ち着く 【その他設計上の規約】 ! 詳細度とコンテキストの解決は最初から整備しておく ! ⾼階コンポーネントModifier から受ける作⽤を必要に応じて開けておく ! 状態でコンポーネントを管理するのではなく、コンポーネントが状態を管理 ! マルチクラスModifierを採⽤、カプセル化 ! ⽤法容量を守った⾶び道具 25 CSS設計:モデルのマイグレート
Copyright © DeNA Co.,Ltd. All Rights Reserved. 26 【総括】 ビジネス要件に⾒合った
設計を選択しよう
Copyright © DeNA Co.,Ltd. All Rights Reserved. 27 【総括】 過剰な分離は本末転倒
移⾏期を⾒逃さない様に
Copyright © DeNA Co.,Ltd. All Rights Reserved. 28 ご清聴ありがとうございました