#MBLTdev: Конференция мобильных разработчиков Спикер: Юрий Буянов Разработчик мобильных приложений, Одноклассники http://mbltdev.ru/

1. MVVM в реальных
проектах
Юрий Буянов
“Одноклассники”

2. MVVM

3. MVC

4. “Massive View Controller”
• Занимается вообще всем
• Сильная связанность с View layer
• Трудно тестировать
• Трудно переиспользовать

5. Model-View-ViewModel
View
(+ViewController) Lightweight View
ViewModel
Model
UI logic
Business logic

6. Model-View-ViewModel
View
(+ViewController) Lightweight View
ViewModel
Model
UI logic
Business logic
Bindings!

7. ViewModel
• Не знает ничего про ViewController
• Не использует UIKit
• Отображает (?) состояние UI с помощью KVO-
совместимых свойств или RAC-сигналов
• Действия представлены в виде методов или RAC-
команд
• Легко тестируема (и должна тестироваться)

8. View
(ViewController)
• Декларативно привязывает состояние UI к
состоянию VM
• Обрабатывает чистую логику UI (вёрстка,
анимации, ориентирование)
• Может зависеть от нескольких ViewModel

9. Биндинги
- (void)viewDidLoad
{
[super viewDidLoad];
RAC(self.trackTitleLabel, text) = RACObserve(self.viewModel, trackTitle);
RAC(self.playBtn, enabled) = RACObserve(self.viewModel, loading).not;
}
- (IBAction)nextBtnTap:(id)sender {
[self.viewModel nextBtnPressed];
}

11. View
UI customization
layout
animations
orientation changes
ViewModel
Model interaction (network,
storage)
Model-related UI state
???
Navigation
Image Loading
Action Confirmations
UI-only actions
…

12. Навигация

14. Ad hoc
UINavigationController
Sections
Controller
Talks
Controller
ctrl = [[TalksController alloc] init]
2 push
1 инициализация

15. @implementation SectionsController
- (IBAction)mobileBtnTap:(id)sender {
UIViewController *ctrl = [[TalksController alloc] init];
[self.navigationController pushViewController:ctrl animated:YES];
}
@end

16. Ненужная связанность (coupling)
@implementation SectionsController
- (IBAction)mobileBtnTap:(id)sender {
UIViewController *ctrl = [[TalksController alloc] init];
[self.navigationController pushViewController:ctrl animated:YES];
}
@end

17. Ad Hoc + MVVM
UINavigationController
Sections
Controller
Talks Controller
4 push
2
создаёт
Sections
ViewModel
Talks
ViewModel
1 действие
создаёт
3

18. @implementation SectionsViewModel
- (void)mobileBtnPressed {
MobileTalksViewModel *vm = [[MobileTalksViewModel alloc] init];
UIViewController *ctrl = [[TalksController alloc] initWithVM:vm];
[self.navigationController pushViewController:ctrl animated:YES];
}
@end

19. @implementation SectionsViewModel
- (void)mobileBtnPressed {
MobileTalksViewModel *vm = [[MobileTalksViewModel alloc] init];
UIViewController *ctrl = [[TalksController alloc] initWithVM:vm];
[self.navigationController pushViewController:ctrl animated:YES];
}
@end
Ненужная связанность
UI-код внутри ViewModel! :(

20. Решение “В лоб”
UINavigationController
Sections
Controller
Sections 2 создаёт
ViewModel
Talks
ViewModel
1 действие

21. Решение “В лоб”
UINavigationController
Sections
Controller
Sections 2 создаёт
ViewModel
Talks
ViewModel
1 действие
3 сигнал

22. Решение “В лоб”
UINavigationController
Sections
Controller
Talks Controller
Sections 2 создаёт
ViewModel
Talks
ViewModel
1 действие
3 сигнал
4
создаёт и
связывает

23. Решение “В лоб”
UINavigationController
Sections
Controller
Talks Controller
5 push
Sections 2 создаёт
ViewModel
Talks
ViewModel
1 действие
3 сигнал
4
создаёт и
связывает

24. @implementation SectionsViewModel
- (void)mobileBtnPressed {
MobileTalksViewModel *vm = [[MobileTalksViewModel alloc] init];
[_talksViewModelsSubject sendNext:vm];
}
@end

25. @implementation SectionsController
- (IBAction)mobileBtnTap:(id)sender {
[self.viewModel mobileBtnPressed];
}
- (void)viewDidLoad {
[self.viewModel.talksViewModelsSignal
subscribeNext:^(id viewModel) {
UIViewController* ctrl = [[TalksController alloc] initWithVM:viewModel];
[self.navigationController pushViewController:ctrl animated:YES];
}];
}
@end

26. Решение “В лоб”
• Большая степень связанности в VM и
контроллере
• Негибкость
• Повторение кода
• Отдельный сигнал для каждого “маршрута”

27. Роутер
(Navigation Object)

28. MVVM + Роутер
UINavigationController
Sections
Controller
1 action 2 showTalks
Sections
ViewModel

29. MVC + Роутер
UINavigationController
Sections
Controller
showDst

30. Роутер
• Имеет доступ к навигационным контроллерам (navigation
controller, tab controller, drawer controller, menu controller)
• Создаёт и конфигурирует экземпляры VM и контроллеров
• (сам или используя DI-контейнер)
• Осуществляет переходы между экранами
• Mockable
• Отлично работает в рамках MVVM и MVC

31. Роутер
@interface Router : NSObject
- (void)showMobileTalks;
- (void)showWebTalks;
- (void)showGamesTalks;
- (void)showTalk:(Talk*)talk;
@end

32. Роутер
@implementation Router
- (void)showMobileTalks {
MobileTalksViewModel *vm = [[MobileTalksViewModel alloc] init];
UIViewController *ctrl = [[TalksController alloc] initWithVM:vm];
[self.mainNavigationController pushViewController:ctrl animated:YES];
}
@end

33. @implementation SectionsController
- (IBAction)mobileBtnTap:(id)sender {
[self.viewModel mobileBtnPressed];
}
- (void)viewDidLoad {
[self.viewModel.talksViewModelsSignal
subscribeNext:^(id viewModel) {
UIViewController* ctrl = [[TalksController alloc] initWithVM:viewModel];
[self.navigationController pushViewController:ctrl animated:YES];
}];
}
@end

34. @implementation SectionsViewModel
- (void)mobileBtnPressed {
[self.router showMobileTalks];
}
@end

35. Вложенные контроллеры
UINavigationController
Controller
Child controller
Some other controller
ViewModel
Child ViewModel
Some other ViewModel

36. Вложенные контроллеры
UINavigationController
Controller
Child controller
Some other controller
ViewModel
Child ViewModel
Some other ViewModel

37. Универсальные
приложения

38. Частный случай:
URL-based роутер
[self.router showMobileTalks];
[self.router open:@"/sections/mobile" modal:NO];

39. URL-based роутер
• Легко настраивается
• Упрощает поддержку URL-схем
• Упрощает переход от веб-приложений к нативным
• Логика навигации может “утекать” в VM/контроллер
• Сложности с передачей сложных объектов
• Подходит не для всех приложений

40. Списки
(UICollectionView, UITableView)

41. Модель ячейки
ViewController ViewModel
UICollectionView/UITableView
Cell
- (void)setViewModel:(MYCellViewModel *)viewModel
CellViewModel
CellViewModel
CellViewModel
CellViewModel
- (void)viewDidLoad
{
[super viewDidLoad];
[self.viewModel.updatedContentSignal
subscribeNext:^(id x) {
[self.collectionView reloadData];
}];
}
Cell
Cell
@property RACSubject *updatedContentSignal;
NSArray *cellViewModels

42. Статическая модель
ячейки
Cell
- (void)setViewModel:(OKPTrackCellViewModel *)viewModel {
NSParameterAssert(viewModel);
self.titleLabel.text = viewModel.title;
self.subTitleLabel.text = viewModel.subtitle;
self.someIcon.hidden = !viewModel.someFlag;
Cell ViewModel
}
@property NSString* title;
@property NSString* subtitle;
@property BOOL someFlag;

43. Динамическая модель
ячейки
Cell
- (void)setViewModel:(OKPTrackCellViewModel *)viewModel {
NSParameterAssert(viewModel);
self.titleLabel.text = viewModel.title;
self.subTitleLabel.text = viewModel.subtitle;
self.someIcon.hidden = !viewModel.someFlag;
Cell ViewModel
}
@property NSString* title;
@property NSString* subtitle;
@property BOOL someFlag; //Может изменяться!

44. Динамическая модель
ячейки
Cell
RAC(self.someIcon, hidden) = RACObserve(viewModel.someFlag).not;

45. Warning: cell reuse
Cell
RAC(self.someIcon, hidden) = RACObserve(viewModel.someFlag).not;
/// A given key on an object should only have one active signal bound to
it at any given time. Binding more than one signal to the same property
is considered undefined behavior.

46. Warning: cell reuse
Cell
RAC(self.someIcon, hidden) =[RACObserve(viewModel.someFlag).not
takeUntil:self.rac_prepareForReuseSignal];
/// Solution: unsubscribe from RACObserve signal on cell reuse

47. Ощущения
(на данном этапе)
• Технология “на вырост”
• Сделает возможным написание тестов, но не
напишет их за вас
• Хинт: используйте Dependency Injection.
• Вам придётся полюбить ReactiveCocoa

48. Спасибо