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.8k
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
6
520
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.3k
フロントエンドの書くべきだったテスト、書かなくてよかったテスト
takefumiyoshii
36
14k
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
takefumiyoshii
24
7.9k
Next.js でリアーキテクトした話 / story-of-re-architect-with-nextjs
takefumiyoshii
12
8.4k
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
takefumiyoshii
54
19k
フロントエンドの複雑さに耐えるため実践したこと / readyfor-nextjs-first
takefumiyoshii
25
10k
Redux の利点を振り返る
takefumiyoshii
26
8.4k
Type-only Migrate by AST
takefumiyoshii
1
590
Other Decks in Programming
See All in Programming
FoodGram
iseruuuuu
0
230
Implementing Design Systems in Swift
seyfoyun
2
530
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
160
勉強会4_アップデートされたAssistantsAPIを試す
milky04
0
110
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
290
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
130
JS RPCを理解する
yusukebe
5
300
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Productivity is Messing Around and Having Fun
hollycummins
1
180
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
780
哲学史とモデリング
tanakahisateru
2
430
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
69
8.6k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
What the flash - Photography Introduction
edds
64
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Building an army of robots
kneath
300
41k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Side Projects
sachag
451
41k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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 ご清聴ありがとうございました