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
790
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
3k
フロントエンドの書くべきだったテスト、書かなくてよかったテスト
takefumiyoshii
39
15k
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
takefumiyoshii
24
8.3k
Next.js でリアーキテクトした話 / story-of-re-architect-with-nextjs
takefumiyoshii
12
8.6k
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
takefumiyoshii
54
19k
フロントエンドの複雑さに耐えるため実践したこと / readyfor-nextjs-first
takefumiyoshii
25
11k
Redux の利点を振り返る
takefumiyoshii
26
8.6k
Type-only Migrate by AST
takefumiyoshii
1
620
Other Decks in Programming
See All in Programming
CSC509 Lecture 07
javiergs
PRO
0
140
The future of development – Are our jobs getting harder or easier?
hollycummins
1
220
Memory API: Patterns, Use Cases, and Performance
josepaumard
2
210
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
410
知られざるNaNの世界
hole
3
1.1k
CSC305 Lecture 09
javiergs
PRO
0
120
RailsのPull requestsのレビューの時に私が考えていること
yahonda
3
470
(Deep|Web) Link support with expo-router
mrtry
0
190
Golang と Erlang
taiyow
7
1.8k
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
640
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
340
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
460
Featured
See All Featured
Optimizing for Happiness
mojombo
376
69k
4 Signs Your Business is Dying
shpigford
180
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
RailsConf 2023
tenderlove
28
870
Become a Pro
speakerdeck
PRO
24
4.9k
Automating Front-end Workflow
addyosmani
1365
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Language of Interfaces
destraynor
154
24k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Docker and Python
trallard
40
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Scaling GitHub
holman
458
140k
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 ご清聴ありがとうございました