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
M-V-VM. Basics.
Search
DAloG
June 27, 2014
Programming
3
470
M-V-VM. Basics.
In this slides (EN, and RU texts) i will try to explain basics of MVVM pattern.
DAloG
June 27, 2014
Tweet
Share
More Decks by DAloG
See All by DAloG
State normalization (RU)
dalog
0
190
Redux + MQTT
dalog
1
770
От задач к проблемам
dalog
1
250
Unlimited power of Data-Driven UI
dalog
4
640
Data-Driven View Controllers. Tips and Tricks
dalog
5
1.9k
2 years of Redux in iOS. Lessons learned
dalog
0
370
Why unidirectional architecture matter for iOS.
dalog
1
290
Mobile backend without REST
dalog
2
100
Self managed teams 101
dalog
0
150
Other Decks in Programming
See All in Programming
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
860
Goで作る、開発・CI環境
sin392
0
230
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Six Lessons from altMBA
skipperchong
28
3.9k
Speed Design
sergeychernyshev
32
1k
Optimizing for Happiness
mojombo
379
70k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Fireside Chat
paigeccino
37
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Facilitating Awesome Meetings
lara
54
6.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Transcript
M-V-VM. Обоснование. Теоретические размышления об абстракции интерфейса пользователя. DAloG @
CocoaHeads/2014(June)
История
История • Паттерн не формализован • Мартин фаулер публикует статью
• Microsoft делает WPF • ReactiveCocoa (Rx) начинает продвижение • objc.io доносит идею в массы.
Мода
Мода • Binding - это удобно • RAC - это
модно • TDD - это полезно • … • PROFIT!!!
Основы
Основы View
Основы View Layout Structure Content
Основы (pre iPad) Layout Structure Content Дизайнер Приложение
Основы (iPad) Layout Structure Content Дизайнер Приложение
Основы (iOS 7) Layout Structure Content Дизайнер Приложение
Основы (iOS 8) Layout Structure Content Дизайнер Приложение
Акцент Content
Content • Цвет • Текст • Шрифт • Состояние (активно,
пассивно) • Анимация
Content
Content Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content
Content
Content Статичный Динамичный
Content Статичный Динамичный
Content Статичный ViewModel
View Content ViewModel Structure Layout
ViewModel • Динамическое состояние интерфейса • Прием информации от интерфейса
• Связь с иерархией ViewModel’ей
@interface XXUserCredentialsViewModel: NSObject ! ! /// Динамическое состояние интерфейса! @property
(readonly) NSString* name;! @property (readonly) NSString* password;! @property (readonly) BOOL canLogin;! ! /// Прием информации от интерфейса! - (void) setName:(NSString*) name;! - (void) setPassword:(NSString*) password;! - (void) loginUser;! ! /// Связь с иерархией ViewModel’ей! @property (readonly) XXTimelineViewModel* timeline;! ! @end
@interface XXUserCredentialsViewModel: NSObject ! ! /// Динамическое состояние интерфейса! @property
(readonly) NSString* name;! @property (readonly) NSString* password;! @property (readonly) BOOL canLogin;! ! /// Прием информации от интерфейса! - (void) setName:(NSString*) name;! - (void) setPassword:(NSString*) password;! - (void) loginUser;! ! /// Связь с иерархией ViewModel’ей! @property (readonly) XXTimelineViewModel* timeline;! ! @end
@interface XXUserCredentialsViewModel: NSObject ! ! /// Динамическое состояние интерфейса! @property
(readonly) NSString* name;! @property (readonly) NSString* password;! @property (readonly) BOOL canLogin;! ! /// Прием информации от интерфейса! - (void) setName:(NSString*) name;! - (void) setPassword:(NSString*) password;! - (void) loginUser;! ! /// Связь с иерархией ViewModel’ей! @property (readonly) XXTimelineViewModel* timeline;! ! @end
@interface XXUserCredentialsViewModel: NSObject ! ! /// Динамическое состояние интерфейса! @property
(readonly) NSString* name;! @property (readonly) NSString* password;! @property (readonly) BOOL canLogin;! ! /// Прием информации от интерфейса! - (void) setName:(NSString*) name;! - (void) setPassword:(NSString*) password;! - (void) loginUser;! ! /// Связь с иерархией ViewModel’ей! @property (readonly) XXTimelineViewModel* timeline;! ! @end
@interface XXUserCredentialsViewModel: NSObject ! ! /// Динамическое состояние интерфейса! @property
(readonly) NSString* name;! @property (readonly) NSString* password;! @property (readonly) BOOL canLogin;! ! /// Прием информации от интерфейса! - (void) setName:(NSString*) name;! - (void) setPassword:(NSString*) password;! - (void) loginUser;! ! /// Связь с иерархией ViewModel’ей! @property (readonly) XXTimelineViewModel* timeline;! ! @end
@interface XXUserCredentialsViewModel: NSObject ! ! …! - (void) loginUser;! !
@property (readonly) XXLoginProcessViewModel* ! ! ! ! ! ! ! ! ! loginProcess;! …! ! @end
M-V-VM ViewModel View Model
M-V-VM ViewModel View Model @model; @viewModel;
Закон восходящих абстракций @model; @viewModel; • Любая абстракция не имеет
доступа к более конкретным сущностям. • IoC используется для прохождения через этот барьер, и только для этого.
M-V-VM ViewModel View Model @model; @viewModel;
M-V-VM ViewModel View Model View
M-V-VM ViewModel View Model View ViewModel View
M-V-VM ViewModel View Model View ViewModel View Model
M-V-VM ViewModel View Model View View Model
M-V-VM ViewModel View Model View View Model Storyboard
M-V-VM ViewModel View Model @model; @viewModel;
Тестирование View Mock View @viewModel; UI
Тестирование VM ViewModel XCAssert() Mock @model; @viewModel;
M-V-VM ViewModel View Model @model; @viewModel;
M-V-VM ViewModel View @model;
MVC Model UIViewController @model; UIView @view;
M-(V-C)-VM ViewModel UIViewController Model UIView
Тестирование View Mock View @viewModel; UI
M-V-VM ViewModel View Model @model; @viewModel;
Model Model @model; Adapter Service
Model Model @model; Adapter Service Network CoreData
Model • Абстракция всего проложения (use case) • Сокрытие конкретных
сервисов • Бизнес правила
Model = ! Application Model = Domain Model
M-V-VM ViewModel View Model @model; @viewModel;
Синхронизация • Динамическая (RAC, KVO) • Статическая (Time, Notification)
RAC — деталь механизма синхронизации.
Тестирование VM ViewModel XCAssert() Mock @model; @viewModel;
Итого
Итого MVVM - инструмент для обеспечения тестирования пользовательского интерфейса путем
его абстрагирования.
Итого MVVM - инструмент для обеспечения тестирования пользовательского интерфейса путем
его абстрагирования.
Минусы • Высокая неявная связность • Низкое зацепление • Сложность
в поддержке • Трудоемкость
M-V-VM ViewModel View Model View ViewModel View Model
Альтернативы • As Is • Fat Data Source - apple
way. http://oleb.net/ blog/2014/06/apples-take-on-app-architecture/ • Active Model - [self.ui …]. http://www.objc.io/ issue-13/viper.html
Дополнительные материалы • MSDN (WPF) • ReactiveViewModel - RAC connected.
• Clean architecture - http://blog.8thlight.com/ uncle-bob/2012/08/13/the-clean-architecture.html • Presentation Model - http://martinfowler.com/ eaaDev/PresentationModel.html • objc.io - http://www.objc.io/issue-13/mvvm.html
Вопросы. • Алексей Демедецкий • Twitter: @DAlooG • Skype: nobidon