Unlimited power of Data-Driven UI

1. Unlimited power of data-driven UI by @DAlooG // 2018 @ Mobius conf
2. О себе — инженер в Sigma Software — 7 лет мобильной разработки — 100% запуск чужих продуктов by @DAlooG // 2018 @ Mobius conf 2
3. О чем поговорим? — про проблемы разработки UI — про однонаправленный поток данных — про тестирование UI — про анимации by @DAlooG // 2018 @ Mobius conf 3
4. Проблемы разработки UI by @DAlooG // 2018 @ Mobius conf 4
5. Моё обычное приложение — 80% бюджета уйдет на UI (дизайн, тестирование, разработка) — 100% приложений изменят свой UI после релиза — новый функционал всегда влияет на уже готовый UI — тестирование UI ограничено возможностями уже написанной системы by @DAlooG // 2018 @ Mobius conf 5
6. UI это итеративный процесс by @DAlooG // 2018 @ Mobius conf 6
7. Нужно много дешевых итераций by @DAlooG // 2018 @ Mobius conf 7
8. Идеальный код UI — дешево тестировать — дешево добавлять новый функционал — дешево удалять функционал — дешево двигать функционал между экранами by @DAlooG // 2018 @ Mobius conf 8
9. Как снизить стоимость UI разработки? — быстрые итерации — масштабировать по людям — не трогать то что работает by @DAlooG // 2018 @ Mobius conf 9
10. Почему этого трудно добиться в iOS? — системные зависимости в UI слое — жизненный цикл UIKit — UI в конце цикла поставки — зависимость от реализации back-end by @DAlooG // 2018 @ Mobius conf 10
11. by @DAlooG // 2018 @ Mobius conf 11
12. Попытка №1: MVVM + FRP — выносим логику из VC — держим ссылку на VM в VC — слушаем изменения VM by @DAlooG // 2018 @ Mobius conf 12
13. by @DAlooG // 2018 @ Mobius conf 13
14. Проблемы MVVM — зависимость от порядка изменения полей — накопление ошибки переходных состояний — реактивная сложность — жизненный цикл UI by @DAlooG // 2018 @ Mobius conf 14
15. Попытка №2: Presenter — внешний компонент у View — посылает команды внутрь View — принимает команды из View — знает про жизненный цикл View by @DAlooG // 2018 @ Mobius conf 15
16. by @DAlooG // 2018 @ Mobius conf 16
17. Попытка №2: шаблон Presenter protocol View { func enableLoginAction() func disableLoginAction() func beginUserLoading() ... } by @DAlooG // 2018 @ Mobius conf 17
18. class Presenter { let view: View let network: NetworkService func login() { view.disableLoginAction() view.beginUserLoading() network.login().onComplete { view.enableLoginAction() view.endUserLoading() } } } by @DAlooG // 2018 @ Mobius conf 18
19. class Presenter { let view: View let network: NetworkService func login() { view.disableLoginAction() view.beginUserLoading() network.login().onComplete { view.enableLoginAction() view.endUserLoading() } } } by @DAlooG // 2018 @ Mobius conf 19
20. Недостатки Presenter: — зависимость от порядка операция — зависимость от жизненного цикла — иногда зависимость от предыдущих операций — внутреннее состояние ожидания ввода by @DAlooG // 2018 @ Mobius conf 20
21. Однонаправленный поток данных by @DAlooG // 2018 @ Mobius conf 21
22. Попытка №3: Props — внутренний компонент у View — полностью изолирован — просто данные — не несет контекста рендеринга by @DAlooG // 2018 @ Mobius conf 22
23. by @DAlooG // 2018 @ Mobius conf 23
24. class ViewController { struct Props { let useraname: Field let password: Field let login: LoginAction } render(props: Props) { ... } } by @DAlooG // 2018 @ Mobius conf 24
25. struct ViewController.Props.Field { let value: String let update: CommandWith<String> } enum ViewController.Props.LoginAction { case possible(Command) case inProgress case disabled } by @DAlooG // 2018 @ Mobius conf 25
26. Props это внутренний компонент — меняется только вместе с UI — дублирование кода — не использует доменный словарь — рендерится только одним View by @DAlooG // 2018 @ Mobius conf 26
27. Props не связан с другими слоями — способен противостоять огромным изменениям — позволяет итерировать дизайн без логики — не требует вложений в проектирование by @DAlooG // 2018 @ Mobius conf 27
28. Props не обладает состоянием — семантика значения а не ссылки — неизменяемые значения — композиция — поддерживает enum by @DAlooG // 2018 @ Mobius conf 28
29. View это рендеринг потока Props by @DAlooG // 2018 @ Mobius conf 29
30. Обратная связь: Command by @DAlooG // 2018 @ Mobius conf 30
31. Что такое Command? final class CommandWith<T> { private let action: (T) -> () func perform(with value: T) { action(value) } } by @DAlooG // 2018 @ Mobius conf 31
32. Command это — замыкание 2.0 — гарантирует однонаправленность — помогает в отладке by @DAlooG // 2018 @ Mobius conf 32
33. by @DAlooG // 2018 @ Mobius conf 33
34. by @DAlooG // 2018 @ Mobius conf 34
35. Хорошие Props это — гарантия отсутствия невозможных состояний — краткое описание возможностей View — формат для хранения и передачи представления — однозначное описание UI by @DAlooG // 2018 @ Mobius conf 35
36. Как хорошо рендерить Props? func render(props: Props) { self.lablel.text = props.title ... } by @DAlooG // 2018 @ Mobius conf 36
37. Как хорошо рендерить Props? func render(props: Props) { self.props = props self.tableView.reloadData() } by @DAlooG // 2018 @ Mobius conf 37
38. Как хорошо рендерить Props? func render(props: Props) { self.props = props self.view.setNeedsLayout() } by @DAlooG // 2018 @ Mobius conf 38
39. Как выбрать ячейку в таблице? struct ListViewController.Props { let items: [Item] struct Item { let name: String let select: Command } } by @DAlooG // 2018 @ Mobius conf 39
40. Про тестирование UI by @DAlooG // 2018 @ Mobius conf 40
41. Как писать snapshot1 тесты? func testSomeState() { let props = .init(...) controller.render(props: props) verify(controller, for: Device.iPhoneX.portrait) verify(controller, for: Device.iPhoneX.landscapeLeft) verify(controller, for: Device.iPadPro9.portrait.oneThird) } 1 https://github.com/AndriiDoroshko/SnappyShrimp by @DAlooG // 2018 @ Mobius conf 41
42. Использование в реальном2 проекте: 2 https://github.com/aol-public/OneMobileSDK-controls-ios/tree/master/SnapshotTests by @DAlooG // 2018 @ Mobius conf 42
43. UI storybooks — очень быстрые итерации — исследовательское тестирование — проверка граничных условий верстки by @DAlooG // 2018 @ Mobius conf 43
44. by @DAlooG // 2018 @ Mobius conf 44
45. import Moscapsule let mqttClient: MQTTClient = { let mqttConfig = MQTTConfig( clientId: "iOS Application", host: "127.0.0.1", port: 1883, keepAlive: 60) return MQTT.newConnection(mqttConfig) }() if let data = try? JSONEncoder().encode(self.props) { mqttClient.publish(data, topic: "CardListViewController") } by @DAlooG // 2018 @ Mobius conf 45
46. by @DAlooG // 2018 @ Mobius conf 46
47. mqttClient.subscribe("CardListViewController/setProps", qos: 0) mqttCommands.insert(CommandWith { message in guard message.topic == "CardListViewController/setProps" else { return } guard let payload = message.payload else { return } do { self.props = try JSONDecoder().decode(Props.self, from: payload) } catch { print(error) } }.dispatched(on: .main)) by @DAlooG // 2018 @ Mobius conf 47
48. Про анимацию Props by @DAlooG // 2018 @ Mobius conf 48
49. by @DAlooG // 2018 @ Mobius conf 49
50. by @DAlooG // 2018 @ Mobius conf 50
51. func addAnimation(view: UIView, keyPath: String, onComplete: @escaping () -> ()) { let animation = CABasicAnimation(keyPath: keyPath) animation.duration = animationsDuration animation.delegate = AnimationDelegate(didStop: { _, completed in guard completed else { return } onComplete() }) view.layer.add(animation, forKey: keyPath) } by @DAlooG // 2018 @ Mobius conf 51
52. Как анимировать позицию? addAnimation(view: sideBarView, keyPath: "position") { self.sideBarView.isHidden = true } sideBarBottomConstraint.constant = { guard #available(iOS 11, *) else { return view.frame.height - sideBarView.frame.height } return view.frame.height - sideBarView.frame.height - view.safeAreaInsets.top }() sideBarVisibleConstraint.isActive = false sideBarInvisibleConstraint.isActive = true sideBarBottomConstraint.isActive = true by @DAlooG // 2018 @ Mobius conf 52
53. Как анимировать прозрачность? addAnimation(view: shadowView, keyPath: "opacity") { self.shadowView.isHidden = true } shadowView.alpha = 0 by @DAlooG // 2018 @ Mobius conf 53
54. Как применять Props во время анимации func renderShadowView() { switch (currentUIProps.controlsViewHidden, nextUIProps.controlsViewHidden) { case (false, true): hideShadowView() case (true, false): showShadowView() default: guard shadowView.layer.animationKeys() == nil else { return } shadowView.isHidden = nextUIProps.controlsViewHidden } } by @DAlooG // 2018 @ Mobius conf 54
55. А теперь всё вместе3 if nextUIProps.bottomItemsHidden { addAnimation(view: seekerView, keyPath: "position") { self.seekerView.isHidden = true self.seekerView.alpha = 0 setupSeekerView() } seekerToSafeAreaConstraint.isActive = false bottomItemsSeekerConstraint.isActive = true bottomItemsVisibleConstraint.isActive = false bottomItemsInvisibleConstraint.isActive = false bottomItemsAndSeekerAnimatedConstraint.isActive = true } else { addAnimation(view: seekerView, keyPath: "opacity", onComplete: setupSeekerView) if currentUIProps.bottomItemsHidden { addAnimation(view: seekerView, keyPath: "position", onComplete: setupSeekerView) } bottomItemsAndSeekerAnimatedConstraint.isActive = false seekerToSafeAreaConstraint.isActive = false bottomItemsSeekerConstraint.isActive = true seekerView.alpha = 0 } 3 https://github.com/aol-public/OneMobileSDK-controls-ios/blob/master/PlayerControls/ sources/DefaultControlsViewController.swift by @DAlooG // 2018 @ Mobius conf 55
56. Сложные Props struct A { let b: enum B { case c(enum C { case d(struct D { ... by @DAlooG // 2018 @ Mobius conf 56
57. Enum и вложенные значения enum ViewController.Props.LoginAction { case possible(Command) case inProgress case disabled } func render(props: Props.LoginAction) { self.loginButton.isEnabled = ??? self.loadingIndicator.isHidden = ??? } by @DAlooG // 2018 @ Mobius conf 57
58. Призмы!4 extension Props.LoginAction { var possible: Command? { guard case let .possible(command) = self else { return nil } return command } var isInProgress: Bool { guard case .inProgress = self else { return false } return true } var isDisabled: Bool { guard case .disabled = self else { return false } return true } 4 https://medium.com/flawless-app-stories/enums-and-sourcery-5da57cda473b by @DAlooG // 2018 @ Mobius conf 58
59. Enum и вложенные значения enum ViewController.Props.LoginAction { case possible(Command) case inProgress case disabled } func render(props: Props.LoginAction) { self.loginButton.isEnabled = ??? self.loadingIndicator.isHidden = ??? } by @DAlooG // 2018 @ Mobius conf 59
60. Enum и вложенные значения enum ViewController.Props.LoginAction { case possible(Command) case inProgress case disabled } func render(props: Props.LoginAction) { self.loginButton.isEnabled = props.possible != nil self.loadingIndicator.isHidden = props.isInProgress == false } by @DAlooG // 2018 @ Mobius conf 60
61. Вопросы? — Twitter: @DAlooG — Email: dalog@me.com by @DAlooG // 2018 @ Mobius conf 61