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
巨大な機能を VIPER + MicroViewController でいい感じに実装した話
Search
yuichiro_takahashi
January 21, 2020
Technology
1
750
巨大な機能を VIPER + MicroViewController でいい感じに実装した話
こちらの勉強会の登壇資料です
iOS Clean Architecture勉強会 sponsored by Sansan
https://connpass.com/event/158269/
yuichiro_takahashi
January 21, 2020
Tweet
Share
More Decks by yuichiro_takahashi
See All by yuichiro_takahashi
App Clip - in a nutshell
yuichirokato
0
280
Mobile Programming Protocol Extension
yuichirokato
0
74
Mobile Programming Protocol
yuichirokato
0
79
Mobile Programming enum
yuichirokato
0
150
Mobile Programming Optional
yuichirokato
0
130
Mobile Programming Struct
yuichirokato
0
120
Mobile Programming Initializer Beta
yuichirokato
0
110
Mobile Programming Inheritance
yuichirokato
0
140
Mobile Programing Property & Method
yuichirokato
0
150
Other Decks in Technology
See All in Technology
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Producing Creativity
orderedlist
PRO
340
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
It's Worth the Effort
3n
181
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
BBQ
matthewcrist
82
9k
Rails Girls Zürich Keynote
gr2m
93
13k
Transcript
巨大な機能を VIPER + MicroViewController でいい感じに実装した話 Sansan株式会社 髙橋 佑一朗
- 髙橋佑一朗 (@ChaaaaaaaaaaanU) - Sansan 株式会社 - iOS アプリエンジニア -
Flutter やってます - ゲーム大好き - DbD, Bloodborne, Dark Souls, Pokemon, Smabro, etc... Who am I?
- Why VIPER? - What’s happened? - What MicroViewController -
How do we combine them? - Summary - Next Step Agenda
Why VIPER?
- アプリが複雑化し ViewController が FatViewController へ進化 - 更に各ロジックがほとんど ViewController に記述されていて密接に絡み合って
いる - テストも書けないし、コードの見通しも悪くなってしまった - どこかを直すとどこかが壊れるピ◯ゴラスイッチ状態 Why VIPER? - 課題感
- 昔の Sansan のアーキテクチャ Why VIPER? - 移行前
- 単一責任の原則に則った、責務の分離が容易になった - チームの共通認識として実装時のコミュニケーションが円滑になった - 各コンポーネントは Interface に依存させているためテストが容易に - ViewController
の責務が View の表示とユーザイベントの制御だけになり激痩 せ Why VIPER? - 導入した結果
What’s happened?
- 名刺詳細の人物詳細へのリニューアル - 名刺に紐づく人物の情報を表示する画面 - 最新の名刺情報と経歴、メモ、コンタクト、接点のある同僚 など、表示する情報がとても多い - 更に自分が持っている名刺についての情報を表示するタブが もう一つある
- 情報量的にとてもリッチになり、様々な情報が一つの画面で 閲覧できるためユーザ的には価値が高い What’s happened? - 人物詳細
どう実装する?
単一の VIPER Module として実装すると Fat になるのは 火を見るより明らか
- 機能が大きすぎて一つの VIPER Module として実装するのは無理がある - 各機能毎に独立した ViewController を用意して一つ一つの Module
を小さく保 ちたい - 機能毎に分割するとそこそこ ViewController の量が増えるので各 ViewController の通信の Interface を統一したい - TableViewCell に ViewController を attach するのは意外と面倒そう What’s happened? - 課題感
What MicroViewController?
- Mercari 発のアーキテクチャで iOSDC 2018 にて発表 - 画面はもちろん画面を構成するボタンやラベルまで全て ViewController で構成
するアーキテクチャ - 画面を構成する全てのパーツが自身に紐づくロジックを持っており、画面遷移な ど複雑になりがちな処理をすっきりさせられる - 全てのUIパーツが独立した ViewController であるため並列での作業が行いや すい - MicroViewController の導入を支援する Mew というライブラリが公開されてい る What MicroViewController?
- // MicroViewController のイメージ What MicroViewController?
How do we combine them?
How do we combine them? - 人物詳細の構造
How do we combine them? - 人物詳細の構造
How do we combine them? - 人物詳細の構造
How do we combine them? - VC間の通信
How do we combine them? - VC間の通信 public protocol Injectable
{ associatedtype Input func input(_ input: Input) } Mewより抜粋: https://github.com/mercari/Mew
How do we combine them? - VC間の通信 eventHandler(output) childVC.input(input) or
dequeued()
How do we combine them? - 第一層 - 人物詳細の大元のモジュール -
ここはまだ標準的な VIPER - この層の役割は以下の三つ - 人物詳細画面のコアとなる人物の基本データを取得する - 人物詳細画面全体にかかわるエラーやイベントの制御 - 人物詳細全体の遷移処理を行う > 遷移に必要なデータと遷移のイベントは子や孫から渡ってくる
How do we combine them? - 初期化と依存性の注入
How do we combine them? - 遷移処理
- PersonDetail モジュールの子供達 - ここから Router がいなくなる - この三つのモジュールは PersonDetail
の Router でインスタンス化される - この層の役割は主に以下の三つ - 子供達の管理 - 子供達が自身を描画するのに必要データの取得 - 子供から受け取った各種イベントを PersonDetail へ伝播させる How do we combine them? - 第二層
How do we combine them? - モジュールの組み立て
How do we combine them? - 子の生成
- Summary, OwnBizCard モジュールの子供達 - 大家族 - ここの ViewController は
自身で依存性の解決を行う - この層の役割は主に以下の二つ - 親から受け取ったデータを表示する(正常系、エラー系共に) - 遷移などのイベントを必要なデータと共に親へ伝える How do we combine them? - 第三層
How do we combine them? - 自身の組み立て
- Instantiatable と Router の責務が被ってしまった (依存性の解決) - 更に遷移は大元の Router で行うようにしているため必要性がなくなってしまっ
た - 各 ViewController から遷移させるようにすれば Router の必要性は出てくるが どっちつかずになってしまいそう - 今は以下のルールで運用 - 原則 Instantiatable を利用しない - Instantiatable を利用しなくてはならない場合は Router は作成しない - 遷移は Interactable 経由で大元の Router にイベントを伝えて遷移させる How do we combine them? - なぜ Router は消えたか?
Summary
- メリット - 当初抱えていた課題間は大方解消されていてかなりやりやすかった - Input, Output の Interface が統一されているのでデータの受け渡しについて混乱す
ることはなかった - 面倒な ViewController の管理も Mew が引き受けてくれるのでとても楽 Summary - この構成のメリット
- デメリット - Instantiatable と Router の落とし所を見つけるのが少し大変だった - モジュールが多くなるのでファイル数とコード量が凄まじい -
二つのアーキテクチャを正しく理解しないといけない(自分もチームのメンバーも) - 基本的にデータの受け渡しが Input, Output 経由でのフロー同期なので距離が離れ た viewcontroller のデータの受け渡しはかなり冗長 - Mewのメンテナンスがちょっと心配 Summary - この構成のデメリット
Next Step
Next Step - 今後 - Instantiatable を拡張して Router を渡せるようにしたい (もう少し
VIPER に寄 せたい) - ファイル数とボイラープレートの量が尋常じゃないのでもう少し減らしたい - Qiita にそんな記事があったような
Thank you so much!