Lessons learned from a shared code base

We experimented with Kotlin Multiplatform by creating a tvOS and Android TV app. Here are our learnings.

Videos of the prototypes can be found here:
- tvOS: https://youtu.be/EAXAxgsx_AI
- Android TV: https://youtu.be/gK7xERZoUu0

Transcript

1. CONFIDENTIAL FREELETICS GMBH Lessons Learned from a Shared Codebase
2. • Existing Cross Platform solutions • Kotlin Native • Future • Q&A • Demo CONFIDENTIAL FREELETICS GMBH Agenda
3. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Layered Architecture
4. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Web HTML + CSS React Redux HTTP GraphQL Web Standards like JS
5. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Web / PWA HTML + CSS React Redux HTTP GraphQL Service Worker Web Standards like JS
6. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Web Standards like JS - kind of Ionic / Cordova HTML + CSS React UI Components Redux OS Bridge i.e. Camera HTTP native
7. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Java Script React Native Native UI React Redux OS Bridge i.e. Camera HTTP native native
8. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS C# (compiles arm, Runtime) Xamarin Xamarin Forms ViewModel BLoC Redux OS Bridge i.e. Camera HTTP native Native UI native
9. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Dart (compiles native arm) Flutter UI Drawing Components BLoC Redux OS Bridge i.e. Camera HTTP native
10. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS C++ / JNI C++ / Rust / Swift Logic OS HTTP native View native ViewModel Navigation Business
11. Presentation Layer Application Layer Data Access Layer View ViewModel Business Rules Navigation Interactor Use Case Repository DAO DB - HTTP - FS Kotlin (JVM, ARM) Kotlin Native Business Logic OS HTTP native View native ViewModel Navigation
12. Business Logic OS HTTP View ViewModel Navigation Logic OS HTTP View ViewModel Navigation Business C++ / Rust Kotlin Native Native UI React Xamarin Forms Redux OS Bridge i.e. Camera HTTP Xamarin React Native UI Drawing Components BLoC Redux OS Bridge i.e. Camera HTTP Flutter HTML React Redux HTTP GraphQL Ionic Web OS Bridge
13. Why do I talk about Kotlin Native? CONFIDENTIAL FREELETICS GMBH
14. So, what is Kotlin Native? CONFIDENTIAL FREELETICS GMBH
15. How to build a Kotlin Native App? CONFIDENTIAL FREELETICS GMBH
16. CONFIDENTIAL FREELETICS GMBH Project Structure
17. CONFIDENTIAL FREELETICS GMBH Expect / Actual In CommonMain In AndroidMain In TvOSMain expect fun log(tag: String, message: String) import android.util.Log actual fun log(tag: String, message: String) { Log.d(tag, message) } import platform.Foundation.NSLog actual fun log(tag: String, message: String) { NSLog("${tag}: ${message}") }
18. FreeleticsTV How Freeletics would look like on a TV... CONFIDENTIAL FREELETICS GMBH
19. CONFIDENTIAL FREELETICS GMBH tvOS https://youtu.be/EAXAxgsx_AI
20. CONFIDENTIAL FREELETICS GMBH AndroidTV https://youtu.be/gK7xERZoUu0
21. Use an architecture that allows to share as much code as possible! CONFIDENTIAL FREELETICS GMBH Main goals
22. Architecture Android tvOS common common
23. CONFIDENTIAL FREELETICS GMBH Workout StateMachine inState<CountdownState> { observeWhileInState(countdownStopWatch.timeElapsed()) { _, _, setState -> setState { state -> val timeLeft = state.timeLeft - 1 if (timeLeft >= 0) { CountdownState(timeLeft) } else { createFirstExerciseState(rounds) } } } } data class CountdownState( val timeLeft: Int )
24. CONFIDENTIAL FREELETICS GMBH Workout StateMachine inState<ExerciseState> { on<NextExerciseAction> { action, getState, setState -> setState { state -> createNextExerciseState(state, rounds) } } } data class ExerciseState( override var secondsElapsed: Long = 0, override var currentRoundIndex: Int = 0, override var currentExerciseIndex: Int = 0, override var workoutProgress: Int = 0, override var nextExercise: RoundExercise? )
25. CONFIDENTIAL FREELETICS GMBH Workout StateMachine class MyStateMachine ( initialState: MyState ): FlowReduxStateMachine<MyState, MyAction>(initialState) { inState<StateOne> { on<ActionOne> { action, getState, setState -> setState { //create new state } } //on {...} } inState<StateTwo> { observeWhileInState(someFlowWhichEmitsValues) { value, getState, setState -> setState { //create new state } } //on {...} } }
26. CONFIDENTIAL FREELETICS GMBH Testing the StateMachine Given("a workout with a single round") { //initialize StateMachine and required data here val state = stateMachine.state.record() And("the user wants to do the workout") { When("it starts") { Then("it starts with a countdown and 5 seconds left") { state shouldEmitNext WorkoutState.CountdownState(5) } } for (i in 4 downTo 0) { When("One countdown second elapsed") { countdown.nextTick() Then("Time left in CountdownState is $i") { state shouldEmitNext WorkoutState.CountdownState(i) } } } //When(...) When("Next Button clicked") { stateMachine.nextExercise() Then("next exercise state is emitted") { state shouldEmitNext RepExerciseState(...) } } }
27. Use an architecture that allows to share as much code as possible! How did we achieve that goal? - Fragment / ViewController -> ViewModel -> StateMachine -> Repository -> DB/API - Make it easy to render the UI! (By using a state machine which is easy to read and test) CONFIDENTIAL FREELETICS GMBH Main goals
28. CONFIDENTIAL FREELETICS GMBH How much code did I share? Android Code: ~2500 LOC TvOS Code: ~1400 LOC Shared Code: ~4600 LOC
29. - TvOS wasn’t even supported when we started - Libraries had a hard time catching up to changes - Coroutines can only be used in Kotlin - Features have to be possible on both platforms (e.g. background services) - There is not always an answer for your problem CONFIDENTIAL FREELETICS GMBH Challenges
30. Would you use Kotlin Native in a real project? CONFIDENTIAL FREELETICS GMBH
31. Future?
32. CONFIDENTIAL FREELETICS GMBH Write once, run everywhere
33. CONFIDENTIAL FREELETICS GMBH Write once, run away!
34. CONFIDENTIAL FREELETICS GMBH Learn once, write anywhere
35. CONFIDENTIAL FREELETICS GMBH inState<CountdownState> { observeWhileInState(countdownStopWatch.timeElapsed()) { ... } } inState<ExerciseState> { on<NextExerciseAction> { ... } }
36. CONFIDENTIAL FREELETICS GMBH class WorkoutScreen extends React.Component { render() { if (this.state instanceof CountdownState) return <Countdown timeLeft={this.state.timeLeft} />; else if (this.state instanceof ExerciseState) return <Exercise exercise={this.state} />; } }
37. CONFIDENTIAL FREELETICS GMBH class WorkoutScreen : View { @State var state: State var body: some View { switch(state){ case let countdown as CountdownState: Countdown(timeLeft: countdown.timeLeft) case let exercise as ExerciseState: Exercise(exercise: exercise) } } }
38. CONFIDENTIAL FREELETICS GMBH @Composable fun WorkoutScreen(state : State) { when(state){ is CountdownState -> Countdown(state.timeLeft) is ExcerciseState -> Exercise(state) } }
39. Q&A
40. Demo
41. CONFIDENTIAL FREELETICS GMBH KEEP CALM AND SHIP IT