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
FlutterとAngularDartを DIとClean Architectureで いい感...
Search
takayuki-hayashi
July 18, 2018
3
2.1k
FlutterとAngularDartを DIとClean Architectureで いい感じにする
takayuki-hayashi
July 18, 2018
Tweet
Share
More Decks by takayuki-hayashi
See All by takayuki-hayashi
E2Eの過去・現在・未来 そしてE2Eにおいて重要なこと
takayukihayashi
1
440
いかにしてテスト文化を醸成させたか.pdf
takayukihayashi
3
1.4k
リーダー、マネージャーが存在しない開発組織のつくり方
takayukihayashi
0
28k
AngularDartでDart入門
takayukihayashi
1
810
E2Eテスト駆動開発実践記_-_Web用.pdf
takayukihayashi
2
3.3k
KubernetesとGaugeを活用したTDD開発事例
takayukihayashi
0
840
Gaugeによるe2eテスト
takayukihayashi
5
28k
Dartエコシステムの紹介
takayukihayashi
2
560
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
How GitHub (no longer) Works
holman
310
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
A designer walks into a library…
pauljervisheath
204
24k
A better future with KSS
kneath
238
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Transcript
FlutterとAngularDartを DIとClean Architectureで いい感じにする
自己紹介 • 名前:林 尚之(はやし たかゆき) • Agile(XP)、TDD、DDDとかが好き • 株式会社ユーザベース ◦
SPEEDA日本事業 CTO • twitter: @t_hyssh 宣伝:9月の「XP祭り 2018」で登壇します
Mobile & Web Mobileの画面 Webの画面 ボタンをクリックすると数字がカウントアップ Webのスタイルがあれなのはご愛嬌・・・
「ボタンがクリックされると数字がカウントアップ」 という処理 これをFlutterとAngularDartで共通化してみる
「ボタンがクリックされると数字がカウントアップ」 という処理 ここから共通化可能なドメインロジックを抽出
「ボタンがクリックされると数字がカ ウントアップ」 ボタンをクリックするという処理は現状では完全 にUI側の処理なので除外
「数字がカウントアップ」 もうちょっといい表現にしてみる
「現在のカウントをインクリメントする」 いい感じ
「現在のカウントをインクリメントする」 この処理をAngularDartとFlutterで共通化する ためには・・・
Clean Architectureの出番
Clean Architectureの出番 Clean Architectureに則れば UseCaseとEntity(Domain Model)は外部リソースや UIに依 存しない。 ポイントは「画面の状態」保存先 (実際はインメモリ)を一番外側に
持っていく事。その状態を Gatewayを介して取得、保存す る。Gatewayの実装が AngularDartとFlutterで独自の実 装になり、実装は DIされる。
「現在のカウントをインクリメントする」 これをClean Architectureに合わせて再度修正
「現在のカウントを取得し、 インクリメントして保存する」 あとはこれをDartのコードにするだけ
Use Case
Domain イミュータブル好きなのでとりあえずイミュータブル
Port(Use Caseレイヤー) • PortはUse Caseレイヤーに存在する仕様 • ドメインの取得や保存の仕様を定義 • このPortの仕様を実装したGatewayがAngularDartとFlutterそ れぞれに存在
• 上記GatewayをDIする 依存関係逆転の原則( DIP)
Gateway(Flutter) ドメインの情報を基に状態を保存 (保存先はCountViewModelで、こいつを表示側が参照する。詳細は後ほど)
Gateway(AngularDart) ドメインの情報を基に状態を保存 (保存先はCountViewStateで、こいつを表示側が参照する。詳細は後ほど)
次はこの「状態」を AngularDartとFlutterでどうやって 表示するのか
FlutterはScoped Model AngularDartはChange Detection
Scoped Model(Flutter) • Googleが開発しているマイクロカーネルの OSであるfuchsiaのUI(Flutter)にて採用されている 状態管理の考え、アーキテクチャー • 親Widgetから子孫のWidgetに簡単にModelを渡す事が出来るようになる • Modelの更新時にModelを使用する全ての子
Widgetを再レンダリング • StatefullWidgetとState<T>を使用しなくてよくなる ◦ その代わりScopedModelDescendantを多用する • 詳細は https://github.com/brianegan/scoped_model
Scoped Modelの使用例
Scoped Modelの使用例(Model)
Scoped Modelの使用例(Widget) ここでScopedModelを使うとMaterialApp の子孫WidgetにてCountModelを参照し やすくなる
Scoped Modelの使用例(Widget) ScopedModelDescendantを使う事で builderの第3引数にmodelが渡される DI(というかService Locator)から UseCaseを取得しドメインロジックを実行
Change Detection(AngularDart) • 詳細はlacoさんのブログを見てもらうのが一番(笑) ◦ https://blog.lacolaco.net/post/translation-angular-2-change-detection-explained/ • ざっくりいうと ◦ Componentの状態や参照しているオブジェクトの状態の変更を検知して再レンダリングしてくれる
◦ なのでComponentが参照するオブジェクトを DIの管理下に置いて、前述の Gateway側で更新をすると勝手に 画面が更新される
例
AngularDartの例(Component) CountStateは単なるDartのクラス。DIの管 理下に置くための設定は必要
これらの考えを基にしつつモジュール化 などをすれば画面側のクラスは状態の 参照とUseCaseの実行(イベントの発 火)のみにする事が可能
AngularDartはDIがビルトインされてい るがFlutterはDIは外部ライブラリーが必 要 自分はGoogleから出てるのを使ってます https://github.com/google/inject.dart
Scoped Model(Flutter)、Change Detection(AngularDart)とDIで下記のよ うな単方向アーキテクチャーに Component(Widget) UseCase Gateway State(Model) *矢印は依存関係ではなく、データの流 れ
変更の通知
レイヤー詳細 Component(Widget) UseCase Gateway Model(State) Domain Component(Widget)レイヤー Gatewayレイヤー Domainレイヤー UseCaseレイヤー
<<Interface>> Port
まとめ • DIとScoped Model、依存関係逆転の原則を適用する事でAngularDartとFlutterの間で自然な 形でコードの共通化が可能 • UI(Flutter、AngularDart)に依存しなくなるのでUnit Testも書きやすくなる • 非同期にしたりStream使ってReactiveにするのも簡単
◦ なぜなら単なるDartのコードだから • 「ここまでして共通化する必要あるの?」と問われれば 「モバイルPWAとアプリで全く同じ挙動にしたいという仕様でなければ共通化は逆に足かせに なるんじゃないでしょうか」と答えますw • ただし、Clean Architectureに則れば保守性、拡張性の高いコードにしやすいと思うので共通 化しなくてもチャレンジする価値はあると思います