Building Kotlin Muiltiplatform Apps for Android & iOS

This presentation is a walk through on how to build a multiplatform app for Android & iOS. We look at how to structure and setup a project for Android and iOS. Then, we look how to a build an Android & iOS app with this structure. The sample app is built using Model View Presenter. We explore how to share our models and presenters in a multiplatform project. We also look at the limitations that you will come across along the way.

Transcript

1. Kotlin Multiplatform for Android & iOS Mohit Sarveiya
2. Kotlin Multiplatform for Android & iOS • Why Kotlin Multiplatform? • Project Structure • Setting up project for Android & iOS • Sharing Presenters and Models in MVP • Objective-C/Swift interop with Kotlin
3. • Why Kotlin Multiplatform? • Project Structure • Setting up project for Android & iOS • Sharing Presenters and Models in MVP • Objective-C/Swift interop with Kotlin Kotlin Multiplatform for Android & iOS
8. Architectures • Android • Model View Presenter • iOS • Model View ViewModel (ish)
9. Model View Presenter (Android) View Presenter API Analytics Validation Models
10. Model View ViewModel (iOS) View API Analytics Validation Models ViewModel
11. Duplicate Business Logic • API Requests • Data Transfer Objects • Tracking Analytics • Title and Description Validation Logic
12. Cross Platform Frameworks Xamarin React Native Flutter
13. https://flutter.io/
14. Cross platform frameworks Benefits • Good for building new apps • Write once for both Android and iOS Drawbacks • No interop with existing languages and frameworks • Hard to convert large native apps
15. Kotlin Multiplatform Server Kotlin/JVM Browser Kotlin/JS Android Kotlin/JVM iOS Kotlin/LLVM
16. Sharing code between platforms API Analytics Validation
17. • Kotlin Multiplatform Structure • Why Kotlin Multiplatform? • Kotlin Multiplatform Structure • Setting up project for Android & iOS • Sharing Presenters and Models in MVP • Objective-C/Swift interop with Kotlin Kotlin Multiplatform for Android & iOS
18. Multiplatform Structure 3 types of modules • Common Module • Platform Module (JVM & iOS) • Regular Module (Android & iOS app)
19. Multiplatform Structure Common 
 module JVM
 module iOS
 module
20. Common Module • Kotlin only code • Platform independent declarations using expect keyword • Kotlin Standard Common Library (kotlin-stdlib-common)
21. Platform Independent Declarations expect class Platform() { val platform: String }
22. Platform Independent Declarations class Platform() { val platform: String } expect
23. What can expect be applied to? • Classes • Functions • Annotations
24. Platform Independent Declarations expect class Platform() { val platform: String } class Greeting { fun greeting(): String = "Hello, ${Platform().platform}" }
25. Platform Module • Kotlin only code • Platform implementations using actual keyword • Interop with Objective-C libraries (iOS)
26. Platform Specific Declaration (JVM) expect class Platform() { val platform: String }
27. Platform Specific Declaration (JVM) actual class Platform actual constructor() { actual val platform: String = “Android" } expect class Platform() { val platform: String }
28. Platform Specific Declaration (iOS) actual class Platform actual constructor() { actual val platform: String = “iOS” } expect class Platform() { val platform: String }
29. Multiplatform Structure Common 
 module JVM
 module
30. Compile Android App Common 
 module JVM
 module
31. Compile Android App Kotlin 
 Compiler Common 
 module JVM
 module
32. Compile Android App Kotlin 
 Compiler Library android.jar Common 
 module JVM
 module
33. Compile Android App Kotlin 
 Compiler Library android.jar Common 
 module JVM
 module
34. Compile Android App class Greeting { fun greeting(): String = “Hello, ${Platform().platform}" } public final class Greeting public constructor() { public final fun greeting(): kotlin.String { !/* compiled code !*/ } } android.jar
35. Running Android App Greeting().greeting() !// Hello, Android
36. Multiplatform Structure Common 
 module iOS
 module Framework
37. Compile iOS App Common 
 module iOS 
 module Kotlin Native
 Compiler
38. Compile iOS App Common 
 module iOS 
 module Kotlin Native
 Compiler Framework Objective-C
39. Compile iOS App Common 
 module iOS 
 module Kotlin Native
 Compiler Framework Objective-C
40. Compile iOS App class Greeting { fun greeting(): String = “Hello, ${Platform().platform}" }
41. Compile iOS App !__attribute!__((objc_subclassing_restricted)) @interface SharedGreeting : KotlinBase -(instancetype)init NS_SWIFT_NAME(init()) NS_DESIGNATED_INITIALIZER; -(NSString *)greeting NS_SWIFT_NAME(greeting()); @end;
42. Compile iOS App SharedGreeting.init().greeting() !// Hello, iOS
43. • Setting up project for Android & iOS • Why Kotlin Multiplatform? • Project Structure • Setting up project for Android & iOS • Sharing Presenters and Models in MVP • Objective-C/Swift interop with Kotlin Kotlin Multiplatform for Android & iOS
44. IDE(s) Intellij IDEA CLion Android Studio XCode
45. Setting up Kotlin multiplatform project 1. Common Module
 2. JVM Platform Module
 3. iOS Platform Module
 4. Android App
 5. iOS App
46. Setup Common Module Common 
 module JVM
 module iOS
 module
47. Directory Structure Shared build.gradle Common build.gradle JVM iOS build.gradle build.gradle
48. Directory Structure Shared build.gradle Common build.gradle JVM iOS build.gradle build.gradle
49. Common Module apply plugin: 'kotlin-platform-common' group = 'com.learn.shared' version = 1.0 dependencies { !// Set up compilation dependency on common Kotlin stdlib compile “org.jetbrains.kotlin:kotlin-stdlib-common:$kotlin_version" }
50. Directory Structure Shared build.gradle Common build.gradle JVM iOS build.gradle build.gradle
51. JVM Platform Module apply plugin: 'kotlin-platform-jvm' group = 'com.learn.shared' version = 1.0 dependencies { !// Specify Kotlin/JVM stdlib dependency. implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" !// Specify dependency on a common project for Kotlin multiplatform build. expectedBy project(':shared:common') }
52. Directory Structure Shared build.gradle Common build.gradle JVM iOS build.gradle build.gradle
53. iOS Platform Module apply plugin: 'konan' !// Specify targets to build the framework: iOS and iOS simulator konan.targets = ['ios_arm64', 'ios_x64'] konanArtifacts { !// Declare building into a framework. framework('Shared') { !// The multiplatform support is disabled by default. enableMultiplatform true } } dependencies { !// Specify dependency on a common project for Kotlin multiplatform build expectedBy project(':shared:common') }
54. iOS Platform Module apply plugin: 'konan' !// Specify targets to build the framework: iOS and iOS simulator konan.targets = ['ios_arm64', 'ios_x64'] konanArtifacts { !// Declare building into a framework. framework('Shared') { !// The multiplatform support is disabled by default. enableMultiplatform true } } dependencies { !// Specify dependency on a common project for Kotlin multiplatform build expectedBy project(':shared:common') } apply plugin: 'konan'
55. iOS Platform Module apply plugin: 'konan' !// Specify targets to build the framework: iOS and iOS simulator konan.targets = ['ios_arm64', 'ios_x64'] konanArtifacts { !// Declare building into a framework. framework('Shared') { !// The multiplatform support is disabled by default. enableMultiplatform true } } dependencies { !// Specify dependency on a common project for Kotlin multiplatform build expectedBy project(':shared:common') } !// Specify targets to build the framework: iOS and iOS simulator konan.targets = ['ios_arm64', 'ios_x64']
56. Konan Targets • android_arm32 • android_arm64 • ios_x64 • linux_x64 • mingw_x64 • macos_x64 • linux_arm32_hfp • linux_mips32 • linux_mipsel32 • wasm32
57. konanArtifacts { !// Declare building into a framework. framework('Shared') { !// The multiplatform support is disabled by default. enableMultiplatform true } } iOS Platform Module apply plugin: 'konan' !// Specify targets to build the framework: iOS and iOS simulator konan.targets = ['ios_arm64', 'ios_x64'] konanArtifacts { !// Declare building into a framework. framework('Shared') { !// The multiplatform support is disabled by default. enableMultiplatform true } } dependencies { !// Specify dependency on a common project for Kotlin multiplatform build expectedBy project(':shared:common') }
58. Kotlin Artifacts • program • library • bitcode • interop • framework
59. dependencies { !// Specify dependency on a common project for Kotlin multiplatform build expectedBy project(':shared:common') } iOS Platform Module apply plugin: 'konan' !// Specify targets to build the framework: iOS and iOS simulator konan.targets = ['ios_arm64', 'ios_x64'] konanArtifacts { !// Declare building into a framework. framework('Shared') { !// The multiplatform support is disabled by default. enableMultiplatform true } } dependencies { !// Specify dependency on a common project for Kotlin multiplatform build expectedBy project(':shared:common') }
60. Shared Code Setup Complete Common 
 module JVM
 module iOS
 module
61. Setup App Modules Common 
 module JVM
 module iOS
 module iOS
 App Android 
 App
62. apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { … } dependencies { … implementation ‘com.learn.shared:jvm:1.0' … } Android App
63. iOS App 1. Configure build settings 2. Configure build phase
64. iOS Build Settings
65. iOS Build Phase
66. Complete Setup Common 
 module JVM
 module iOS
 module Android 
 App iOS
 App
67. • Sharing Presenters and Models in MVP Kotlin Multiplatform for Android & iOS • Why Kotlin Multiplatform? • Project Structure • Setting up project for Android & iOS • Sharing Presenters and Models in MVP • Objective-C/Swift interop with Kotlin
68. Multiplatform App in MVP
69. Multiplatform App in MVP • Get videos from API • Track video selection to Localytics • Play the video
70. API GET /videos { "videos": [ { "id": 1, 
 “title": "Big Buck Bunny", "desc": "The Big Buck Bunny video.", "url": “https:!//clips.mohit.com/big_buck_bunny.mp4” }, { "id": 2, "title": "Timelapse Video of Sky", "desc": "Awesome timelapse video.", "url": “https:!//clips.mohit.com/timelapse_video_of_sky.mp4” }
 ] }
71. Common module data class Video(val id: Int, val title: String, val desc: String, val url: String )
72. Limitation: Common HTTP Library Common 
 HTTP Library Android
 App iOS
 App ❌
73. Alternatives 1. Build common HTTP client for JVM and Native
 2. Use Dependency Injection to inject API requests
 3. Use NSURLConnection in iOS and Retrofit in Android
74. Common HTTP Library
75. JVM & iOS Platform Modules runSuspend { HttpClient().request { with(url) { protocol = URLProtocol.HTTPS host = endpoint port = 443 } } }.then { response !-> println(response.body) client.close() }
76. Alternative: Using DI to inject API Behavior Common
 module Retrofit Alamofire
77. Common module interface VideosInteractor { fun fetchVideos(callback: FetchDataCallback<List<Video!>>) }
78. Generated Objective-C for interface @protocol SharedVideosInteractor @required -(void)fetchVideosUri:
 callback:(id<SharedFetchDataCallback>)callback 
 NS_SWIFT_NAME(fetchVideos(callback:)); @end;
79. Mappings https://github.com/JetBrains/kotlin-native/blob/master/OBJC_INTEROP.md
80. iOS App class VideosInteractorImpl : NSObject, SharedVideosInteractor { func fetchVideos(callback: SharedFetchDataCallback) { Alamofire.request(uri).responseJSON { response in if let json = response.result.value { let videos = self.parseResponse(response: json) callback.onFetchedData(data: videos) } else { callback.onError() } } }
81. Android App class VideosInteractorImpl : VideosInteractor { override fun fetchVideos(fetchedCallback: FetchDataCallback<List<Video!>>) { RetrofitFactory.create().videos().enqueue(object: Callback<List<Video!>> { override fun onResponse(call: Call<List<Video!>>?, response: Response<List<Video!>> val videos = response!?.body() if (videos !!= null) { fetchedCallback.onFetchedData(videos) } else { fetchedCallback.onError() } } override fun onFailure(call: Call<List<Video!>>?, t: Throwable?) { fetchedCallback.onError() } }) }
82. Limitation: Serialization Common 
 Serialization Library Android
 App iOS
 App ❌
83. Limitation: Serialization Library
84. Alternative Approaches • Use example-gen branch from Kotlin Serialization library • Create a Codable protocol extension for you model on iOS • Manually decode JSON on iOS
85. Multiplatform App in MVP View Presenter Interactor Analytics
86. Multiplatform App in MVP Presenter Interactor Analytics Shared
87. Multiplatform App in MVP View
 (Android) Presenter Interactor Analytics Shared View
 (iOS)
88. MVP Contract (Common Module) class FeedContract { interface View { fun showVideos(videos: List<Video>) fun showErrorMessage(message: String) fun showVideoDetails(video : Video) } … }
89. MVP Contract (Common Module) class FeedContract { … interface Presenter : BasePresenter<View> { fun onSelectedVideo(video: Video) } }
90. Presenter (Common Module) class FeedPresenter( private val videosInteractor: VideosInteractor ): FeedContract.Presenter {
 override fun onViewAttached(view: FeedContract.View) { this.view = view videosInteractor.fetchVideos(object: FetchDataCallback<List<Video!>> { override fun onFetchedData(data: List<Video>) { view.showVideos(data) } override fun onError() { view.showErrorMessage("Failed to load feed.") } }) }
91. iOS Generated Classes in Objective-C • Kotlin Base • FeedContract is a protocol • VideosInteractor is a protocol • Feed Presenter
92. ViewController iOS App class FeedViewController: UITableViewController, SharedFeedContractView { override func viewDidLoad() { super.viewDidLoad() let videosInteractor = VideosInteractorImpl() feedPresenter = SharedFeedPresenter(videosInteractor: videosInteractor) feedPresenter!?.onViewAttached(view: self) } func showVideos(videos: [SharedVideo]) { self.videos = videos tableView.reloadData() }

93. Multiplatform App in MVP View
 (Android) Presenter Interactor Analytics Shared View
 (iOS)
94. • Why Kotlin Multiplatform? • Project Structure • Setting up project for Android & iOS • Sharing Presenters and Models in MVP • • Objective-C/Swift interop with Kotlin Kotlin Multiplatform for Android & iOS
95. Playing Videos Android • ExoPlayer iOS • AVKit
96. Playing Videos on iOS with Kotlin
97. cinterop cinterop C/Objective-c 
 Library Kotlin Bindings
98. Playing Videos on iOS with Kotlin
99. Kotlin Bindings for AVKit @kotlinx.cinterop.ExternalObjCClass 
 public open class AVPlayer : platform.darwin.NSObject { 
 public companion object : platform.AVFoundation.AVPlayerMeta, 
 kotlinx.cinterop.ObjCClassOf<platform.AVFoundation.AVPlayer> { } @kotlinx.cinterop.ObjCConstructor public constructor(
 uRL: platform.Foundation.NSURL) { !/* compiled code !*/ } 
 …
100. Playing video on iOS with Kotlin fun playVideo(view: UIView) {
 val videoURL = NSURL(string = 
 “https:!//clips.mohit.com/big_buck_bunny.mp4”) val player = AVPlayer(videoURL) val playerLayer = AVPlayerLayer() playerLayer.player = player playerLayer.frame = view.bounds view.layer.addSublayer(playerLayer) player.play() }
101. Playing video on iOS with Kotlin class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() Shared().playVideo(view: self.view) } … }
102. Future • One IDE • Official common HTTP and Serialization Library • Support for pure Swift modules
103. Thank you! twitter.com/heyitsmohit /msya github.com