We use the architectural pattern MVVM to align our Android and iOS as much as possible to share logic between them. We use platform-independent ViewModels that can be used on both iOS and Android. Therefore the only thing that differs between the platforms is the view.

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
ControllerFragment 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
ControllerFragment 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