Kotlin MVVM: Making iOS and Android apps as similar as possible

In this presentation from 2018, we present our functional approach to MVVM on Android and iOS. In summary, we try to reduce overhead by making the ViewModels on iOS and Android as similar as possible. In order to achieve that, we remove all SDK dependencies from the ViewModels until it's pure Kotlin/Swift Code.

Transcript

1. MVVM with Kotlin: Making iOS and Android apps as similar as possible Malte Bucksch 1
2. Malte Bucksch 2
3. Goal: Sharing logic between native apps Malte Bucksch 3
4. Agenda I. The problem we’re solving II. Comparison between architecture patterns III. Our approach with MVVM IV. How Kotlin helps us V. Testing with MVVM VI. Reusability of ViewModels Malte Bucksch 4
5. Malte Bucksch 5 TEAM Mixing business logic and view logic Testable app architecture Beautiful native UI Awesome app Sharing logic between Android and iOS
6. MVC: Model-View-Controller Malte Bucksch 6
7. “Model View Controller (MVC) is one of the most quoted (and most misquoted) patterns around” – Martin Fowler (martinfowler.com) Malte Bucksch 7
8. What is MVC after all? Malte Bucksch 8 Wikipedia Apple Martin Fowler
9. Common practice with MVC Malte Bucksch 9 View View Controller Fragment ViewController
10. MVVM: Model-View-ViewModel Malte Bucksch 10 View View Model Model Presentation User Input Business Logic Data User action Update Update Notify
11. Malte Bucksch 11 Data View ViewModel
12. Our approach with MVVM • Platform-independent ViewModels • Functional core using Input-to-Output mapping Malte Bucksch 12
13. MVC Malte Bucksch 13 View View Controller Fragment ViewController
14. MVVM Malte Bucksch 14 View ViewModel View ViewModel
15. I have a dream today Malte Bucksch 15 View ViewModel View
16. I have a dream today Malte Bucksch 16 View ViewModel View ViewModel
17. Let’s build a translation app Malte Bucksch 17
18. Let’s build a translation app Malte Bucksch 18 Deactivated
19. View Models Malte Bucksch 19 View View Model Inputs Outputs
20. Malte Bucksch 20 ViewModel Translate Input Output Combine with german text Input Output
21. f(input) = output f(english) = german Malte Bucksch 21
22. ViewModel Implementation Example Malte Bucksch 22
23. ViewModel Implementation Malte Bucksch 23 ReactiveX RxJava / RxSwift
24. ViewModel Interface 24 interface TranslatorViewModelInput { val englishText: BehaviorSubject<String> val saveTrigger: PublishSubject<Unit> } interface TranslatorViewModelOutput { val germanText: Observable<String> val isSavingAllowed: Observable<Boolean> val savedGermanTranslation: Observable<String> } interface TranslatorViewModel { val input: TranslatorViewModelInput val output: TranslatorViewModelOutput } class TranslatorViewModelImpl : TranslatorViewModel, TranslatorViewModelInput, TranslatorViewModelOutput { override val input = this override val output = this … Usage val viewModel: TranslatorViewModel = createTranslatorViewModel() viewModel.germanText viewModel.englishText viewModel.output.germanText viewModel.input.englishText
25. ViewModel Implementation Malte Bucksch 25 class TranslatorViewModelImpl : TranslatorViewModel, TranslatorViewModelInput, TranslatorViewModelOutput { override val input = this override val output = this // *** inputs *** override val englishText = BehaviorSubject.createDefault("") override val saveTrigger = PublishSubject.create<Unit>() // *** outputs *** override val germanText = input.englishText .map { TranslatorEngine.translateToGerman(it) } override val isSavingAllowed = input.englishText .map { !it.isEmpty() } override val savedGermanTranslation = input.saveTrigger.withLatestFrom(germanText) .map { (_, german) -> german } }
26. Binding to ViewModels via Kotlin Fragment Malte Bucksch 26 // *** supply inputs *** viewModel.input.englishText.receiveTextChangesFrom(englishInputEditText) viewModel.input.saveTrigger.receiveClicksFrom(saveTextButton) // *** subscribe to outputs *** viewModel.output.germanText .subscribe { germanOutputTextView.text = it } viewModel.output.isSavingAllowed .subscribe { saveTextButton.isEnabled = it } viewModel.output.savedGermanTranslation .subscribe { germanText -> showMessage("Saved to clipboard") germanText.saveToClipboard() }
27. How Kotlin helps us Malte Bucksch 27
28. Kotlin and Swift are very similar Malte Bucksch 28
29. Shared Kotlin/Swift Features • Optionals • String Interpolation • Extension functions • Functional operations for lists/arrays • Type inference • Lambdas • Type alias • … Malte Bucksch 29
30. Kotlin vs. Swift: Variables and constants Malte Bucksch 30 var myVariable = 42 myVariable = 50 let myConstant = 42 var myVariable = 42 myVariable = 50 val myConstant = 42
31. Kotlin vs. Swift: String interpolation Malte Bucksch 31 let apples = 3 let oranges = 5 let fruitSummary = "I have \(apples + oranges) " + "pieces of fruit." val apples = 3 val oranges = 5 val fruitSummary = "I have ${apples + oranges} " + "pieces of fruit."
32. Kotlin vs. Swift: Maps Malte Bucksch 32 val occupations = mutableMapOf( "Malcolm" to "Captain", "Kaylee" to "Mechanic") occupations["Jayne"] = "Public Relations" var occupations = [ "Malcolm": "Captain", "Kaylee": "Mechanic"] occupations["Jayne"] = "Public Relations"
33. Kotlin vs Swift ViewModel Malte Bucksch 33 interface TranslatorViewModelInput { val englishText: BehaviorSubject<String> val saveTrigger: PublishSubject<Unit> } interface TranslatorViewModelOutput { val germanText: Observable<String> val isSavingAllowed: Observable<Boolean> val savedGermanTranslation: Observable<String> } interface TranslatorViewModel { val input: TranslatorViewModelInput val output: TranslatorViewModelOutput } protocol TranslatorViewModelInput { var englishText: BehaviorSubject<String> { get } var saveTrigger: PublishSubject<Void> { get } } protocol TranslatorViewModelOutput { var germanText: Observable<String> { get } var isSavingAllowed: Observable<Bool> { get } var saveGermanTranslation: Observable<String> { get } } protocol TranslatorViewModel { var input: TranslatorViewModelInput { get } var output: TranslatorViewModelOutput { get } }
34. Kotlin vs Swift ViewModel Malte Bucksch 34 class TranslatorViewModelImpl: TranslatorViewModel, TranslatorViewModelInput, TranslatorViewModelOutput { var input: TranslatorViewModelInput { return self } var output: TranslatorViewModelOutput { return self } // MARK: - Inputs var englishText = BehaviourSubject<String>(value: "") var saveTrigger = PublishSubject<Void>() … class TranslatorViewModelImpl: TranslatorViewModel, TranslatorViewModelInput, TranslatorViewModelOutput { override val input = this override val output = this // *** inputs *** override val englishText = BehaviorSubject.createDefault("") override val saveTrigger = PublishSubject.create<Unit>() …
35. Kotlin vs Swift ViewModel Malte Bucksch 35 … // MARK: - Outputs lazy var germanText: Observable<String> = { input.englishText .map { TranslatorEngine.translateToGerman($0) } }() lazy var isSavingAllowed: Observable<Bool> = { input.englishText .map { $0.isEmpty } }() … // *** outputs *** override val germanText = input.englishText .map { TranslatorEngine.translateToGerman(it) } override val isSavingAllowed = input.englishText .map { !it.isEmpty() } override val savedGermanTranslation = input.saveTrigger.withLatestFrom(germanText) .map { (_, german) -> german }
36. Testing ViewModels Malte Bucksch 36
37. View Model Tests Malte Bucksch 37 View View Model Input Output
38. View Model Tests Malte Bucksch 38 Unit Test View Model Input Output
39. ViewModel Tests Malte Bucksch 39 @Test fun testTranslation() { val viewModel: TranslatorViewModel = TranslatorViewModelImpl() viewModel.input.englishText.onNext("Dog") viewModel.output.germanText.test().assertValue("Hund") }
40. Local unit tests for UI testing Malte Bucksch 40 Fast local unit tests Avoid UI testing frameworks
41. ViewModel reusability Malte Bucksch 41
42. ViewModel reusability Malte Bucksch 42 Android View View Model Input Output
43. ViewModel reusability Malte Bucksch 43 Android Fragment View Model Input Output
44. ViewModel reusability Malte Bucksch 44 Unit Test View Model Input Output
45. ViewModel reusability Malte Bucksch 45 JavaFX View View Model Input Output
46. ViewModel reusability Malte Bucksch 46 Java/Kotlin REST API View Model Input Output
47. ViewModel reusability Malte Bucksch 47 Kotlinx (HTML) View View Model Input Output
48. One ViewModel to rule them all Malte Bucksch 48
49. Wrap up Advantages • Logic can be reused within iOS and Android • Functional way of writing UI with isolated side effects • Great testability Malte Bucksch 49
50. Wrap up Advantages • Logic can be reused within iOS and Android • Functional way of writing UI with isolated side effects • Great testability Disadvantages • Boiler plate for interfaces • Steep learning curve • Less intuitive if programmer is not used to functional-style programming Malte Bucksch 50
51. Wrap up Improvement points • Optimize project workflow to make people reuse code • Write ViewModels in exact same programming language Malte Bucksch 51
52. Questions? More resources on MVVM https://github.com/quickbirdstudios https://github.com/kickstarter/android-oss https://github.com/kickstarter/ios-oss https://bit.ly/2qSFPqO (Talk at UI Konf about Swift/Kotlin similarity) malte@quickbirdstudios.com Malte Bucksch 52