The Hitchhikers Guide Through Kotlin Multiplatform Extended

D8a3623b157508fecdae1f8e756f362f?s=47 cmota
September 09, 2019

The Hitchhikers Guide Through Kotlin Multiplatform Extended

Since the early days of mobile that we keep seeing new frameworks being designed to overcome one of the biggest challenges:
- How can I develop for both Android and iOS?

Although it’s initial promises, when we talk about performance, maintainability or even customization we keep discarding these solutions and we always choose native.

Fast forward to the present, and now we have two new languages: Android is Kotlin first and iOS, Swift. And if you put them side by side you can see a lot of similarities between both what will ease switching between one to the other if you have to develop for both platforms.

But what I told that you could just develop in Kotlin and run it seamlessly on all devices? Here comes Kotlin Multiplatform!

D8a3623b157508fecdae1f8e756f362f?s=128

cmota

September 09, 2019
Tweet

Transcript

  1. 1.

    The Hitchhikers Guide Through The Hitchhikers Guide Through Kotlin Multiplatform

    Kotlin Multiplatform @cafonsomota revised and updated edition revised and updated edition
  2. 3.
  3. 4.

    a brief history of time “In the beginning the Universe

    was created. This had made many people angry and has been widely regarded as a bad move.”
  4. 9.

    Photo by Fabian Grohs on Unsplash a wild application idea

    appears! develop it for Android and iOS.
  5. 10.

    -hire a team of specialised developers -define requirements -design mockups

    for both platforms -plan features development -start development/ write unit tests -write t-specs for SQA validation -cross-checking validation between both platforms (or jacks) Steps
  6. 11.

    ~2xthe team the cost the status meetings required the time

    spent on development the time spent on testing native the time spent on bug fixing
  7. 12.

    Photo by Fabian Grohs on Unsplash a wild application idea

    appears! develop it for Android and iOS and web.
  8. 13.

    ~3xthe team the cost the status meetings required the time

    spent on development the time spent on testing the time spent on bug fixing
  9. 14.
  10. 17.

    - smaller team - typically half of the cost needed

    on native - small learning curve for web developers (advantages) Cross-platform
  11. 18.

    - chained to the framework implementation of UI - new

    updates from the OS will take time to adopt - performance is not the same - some native code might need to be written - OS/ device features are dependent on the fw support - dart (flutter) is not widely used language (for now) (disadvantages) Cross-platform
  12. 22.
  13. 23.

    - developed by JetBrains - open source - concise, safe,

    interoperable, tool-friendly - supported/ used by Google for Android Development - it’s more than “just for Android” Kotlin Server-side Android Kotlin JS Native
  14. 26.

    public class Conference { private String mName; private String mLocal;

    private List<String> mTechs; public Conference(String name, String local, List<String> techs) { mName = name; mLocal = local; mTechs = techs; } public String getName() { return mName; } public void setName(String name) { Conference.java (less code) Concise
  15. 27.

    data class Conference (val name: String, val location: String, val

    techs: List<String>) (less code) Concise Conference.kt
  16. 29.

    -getOrElse() -find() -filter() -filterNot() -filterNotNull() -flatMap() -mapNotNull() -all() -any() -sumBy()

    -zip() -… -take() -takeLast() -sortBy() -sortByDescending() -groupBy() -map() (collections) Language features
  17. 30.

    > [1, null, 2, null, 3, 4, 5, 6, 7,

    8, 9] (collections) Language features output mutableListOf(1, null, 2, null, 3, 4, 5, 6, 7, 8, 9)
  18. 31.

    > [1, 2, 3, 4, 5, 6, 7, 8, 9]

    (collections) Language features output mutableListOf(1, null, 2, null, 3, 4, 5, 6, 7, 8, 9) .filterNotNull()

  19. 32.

    > [2, 4, 6, 8] .filter { it % 2

    == 0 }
 (collections) Language features output mutableListOf(1, null, 2, null, 3, 4, 5, 6, 7, 8, 9) .filterNotNull()

  20. 33.

    > [8, 6, 4, 2] .sortedDescending() (collections) Language features output

    .filter { it % 2 == 0 }
 mutableListOf(1, null, 2, null, 3, 4, 5, 6, 7, 8, 9) .filterNotNull()

  21. 34.

    - small learning curve involved - easily to go from

    JavaScript/ Swift into Kotlin and back (from a developers’ point of view) Easy to learn
  22. 35.

    var variable = 42 variable = 1 let value =

    42 var variable = 42 variable = 1 val value = 42 *adapted from http://nilhcem.com/swift-is-like-kotlin/ (variables and constants) Kotlin vs Swift Kotlin Swift
  23. 36.

    fun greet(name: String, day: String): String { return "Hello $name,

    today is $day." } greet(“Porto", “Saturday") *updated from http://nilhcem.com/swift-is-like-kotlin/ func greet(_ name: String,_ day: String) -> String { return "Hello \(name), today is \(day)." } greet(“Porto", “Saturday") Kotlin Swift (functions) Kotlin vs Swift
  24. 37.

    kotlin multiplatform “‘Resistance is useless!’ How can anyone maintain a

    positive mental attitude if you’re saying things like that?”
  25. 39.

    (advantages) - language features - kotlin first! - low risk

    - you decide what’s worth to share across projects - interoperability - consistency across platforms - strong community support Kotlin Multiplatform
  26. 41.

    view view view view model parser network presentation presentation presentation

    presentation network network network parser parser parser model model model presentation presentation presentation desktop web iOS android
  27. 42.

    business logic business logic business logic model parser network presentation

    model parser network presentation model parser network presentation model parser network presentation business logic view view view view desktop web iOS android
  28. 43.

    android iOS web desktop model parser network presentation common view

    view view view java/kotlin objective-c/ swift (kotlin) JS supported in jvm
  29. 46.
  30. 49.

    commonMain src/commonMain/sample/Platform.kt - define actual on android - define actual

    on iOS targets: android and iOS expect object Platform { val name: String }
  31. 50.

    src/iOSMain/sample/Platform.kt actual object Platform { actual val name: String =

    "Android" } actual object Platform { actual val name: String = "iOS" } src/androidMain/sample/Platform.kt platform-dependent code
  32. 52.

    *.kt common expect JVM actual *.kt, *.java, *.jar Native actual

    *.kt, *C, Swift, Framework JS actual *.kt, *.js, NPM
  33. 55.

    demo "For a moment, nothing happened. Then, after a second

    or so, nothing continued to happen.”
  34. 57.

    - user interface - RecyclerView and more (Android) - UITableViewController

    and more (iOS) - multiple network request - parse response objects - store on local database - notify the UI - that there’s new content available to be draw - reload list project structure
  35. 58.

    android iOS Room CoreData Retrofit Alamofire GSON/ Moshi JSONSerialization MVP,

    MVVM, MVI MVVM, ELM RxJava RxSwift Tests Tests Activity UIViewController RecyclerView UITableView
  36. 59.

    Room CoreData Retrofit Alamofire GSON/ Moshi JSONSerialization MVP, MVVM, MVI

    MVVM, ELM RxJava RxSwift Tests Tests Activity UIViewController RecyclerView UITableView android iOS
  37. 60.

    Room CoreData Retrofit Alamofire GSON/ Moshi JSONSerialization MVP, MVVM, MVI

    MVVM, ELM RxJava RxSwift Tests Tests Activity UIViewController RecyclerView UITableView android iOS Activity UIViewController RecyclerView UITableView unnecessary duplication
  38. 65.

    class SessionizeAPI(engine: HttpClientEngine) { private val client = HttpClient(engine) {

    install(JsonFeature) { serializer = KotlinxSerializer() } } suspend fun fetchSpeakers(): List<SpeakerEntity> { val response = client.get<HttpResponse>{ url ("$URL")} val json = response.readText() return Json.parse(SpeakerEntity.serializer().list, json) } } network src/commonMain/data/SessionizeAPI.kt ktor multiplatform network database android parser view platform specific presenter presenter domain model common (shared) code
  39. 66.

    kotlinx.serialization network src/commonMain/data/SessionizeAPI.kt class SessionizeAPI(engine: HttpClientEngine) { private val client

    = HttpClient(engine) { install(JsonFeature) { serializer = KotlinxSerializer() } } suspend fun fetchSpeakers(): List<SpeakerEntity> { val response = client.get<HttpResponse>{ url ("$URL")} val json = response.readText() return Json.parse(SpeakerEntity.serializer().list, json) } } multiplatform network database android parser view platform specific presenter presenter domain model
  40. 67.

    json response [{ "id": "2bc1e95f-1243-4ad0-8a11-75541fee10e0", "firstName": "Carlos", "lastName": "Mota", "fullName":

    "Carlos Mota", "bio": "… GDG Coimbra organizer and Kotlin evangelist, he also has a huge passion for travel, photography, space and the occasional run.", "tagLine": "Lead Software Engineer at WIT Software", "profilePicture": “https://sessionize.com/imag...7ef8707ae.jpg”, "sessions": [{ "id": 131513, "name": "The Hitchhikers Guide Through Kotlin Multiplatform" }], … },… https://sessionize.com/api/v2/3hvwlgcc/view/speakers
  41. 68.

    json response [{ "id": "2bc1e95f-1243-4ad0-8a11-75541fee10e0", "firstName": "Carlos", "lastName": "Mota", "fullName":

    "Carlos Mota", "bio": "… GDG Coimbra organizer and Kotlin evangelist, he also has a huge passion for travel, photography, space and the occasional run.", "tagLine": "Lead Software Engineer at WIT Software", "profilePicture": “https://sessionize.com/imag...7ef8707ae.jpg”, "sessions": [{ "id": 131513, "name": "The Hitchhikers Guide Through Kotlin Multiplatform" }], … },… https://sessionize.com/api/v2/3hvwlgcc/view/speakers
  42. 69.

    kotlinx.serialization src/commonMain/data/entities/SpeakerEntity.kt multiplatform network database android parser view platform specific

    presenter presenter domain model parser @Serializable data class SpeakerEntity ( val id: String, val firstName: String, val lastName: String, val fullName: String, val bio: String, val tagLine: String, val profilePicture: String, val sessions: List<SessionShortEntity>, val isTopSpeaker: Boolean, val links: List<String>, val questionAnswers: List<String>, val categories: List<String>)
  43. 70.

    kotlinx.serialization src/commonMain/data/entities/SpeakerEntity.kt multiplatform network database android parser view platform specific

    presenter presenter domain model parser @Serializable data class SpeakerEntity ( val id: String, val firstName: String, val lastName: String, val fullName: String, val bio: String, @SerialName("tagLine") val jobTitle: String, val profilePicture: String, val sessions: List<SessionShortEntity>, val isTopSpeaker: Boolean, val links: List<String>, val questionAnswers: List<String>, val categories: List<String>)
  44. 71.

    database CREATE TABLE SpeakerModel ( id TEXT NOT NULL PRIMARY

    KEY, speaker TEXT as Speaker NOT NULL ); insertOrReplaceSpeaker: INSERT OR REPLACE INTO SpeakerModel(id, speaker) VALUES (?, ?); selectAllSpeakers: SELECT * FROM SpeakerModel; SQLDelight src/commonMain/sqldelight/data/model/SpeakerModel.sq multiplatform network database android parser view platform specific presenter presenter domain model
  45. 73.

    database SQLite Compiler Generated code SQLDelight multiplatform network database android

    parser view platform specific presenter presenter domain model
  46. 74.
  47. 75.

    app/build/sqldelight/ScheduleDb/data/app/ScheduleDbImpl.kt database class SpeakerModelQueriesImpl(private val db: ScheduleDbImpl, private val driver:

    SqlDriver) : TransacterImpl(driver), SpeakerModelQueries { … override fun insertOrReplaceSpeaker(id: String, speaker: Speaker) { driver.execute(2113668020, """INSERT OR REPLACE INTO SpeakerModel(id, speaker) |VALUES (?1, ?2)""", 2) { bindString(1, id) bindString(2, db.SpeakerModelAdapter.speakerAdapter.encode(speaker)) } notifyQueries(2113668020, {db.speakerModelQueries.selectAllSpeakers}) } } generated class SQLDelight multiplatform network database android parser view platform specific presenter presenter domain model
  48. 76.

    model class SpeakerDao(database: ScheduleDb) { private val db = database.speakerModelQueries

    internal fun insertOrReplace(speaker: Speaker) { db.insertOrReplaceSpeaker( id = speaker.id, speaker = speaker) } internal fun getAllSpeakers(): List<Speaker> { val data = db.selectAllSpeakers().executeAsList() … src/commonMain/domain/dao/SpeakerDao.kt multiplatform network database android parser view platform specific presenter presenter domain model
  49. 77.

    model @Serializable data class Speaker ( val id: String, val

    fullName: String, val bio: String, val tagLine: String, val profilePicture: String, val sessions: List<Info>, val categories: List<String>) fun SpeakerEntity.toSpeaker() = Speaker( id = id, fullName = fullName, bio = bio, …) src/commonMain/domain/model/Speaker.kt multiplatform network database android parser view platform specific presenter presenter domain model
  50. 78.

    domain class GetSpeakers(val api: SessionizeAPI, val dao: SpeakerDao) { suspend

    operator fun invoke(onSuccess: (List<Speaker>) -> Unit, onFailure: (Exception) -> Unit) { try { val result = api.fetchSpeakers() val speakers = Speaker.toSpeaker(result) dao.insertOrReplace(speakers) coroutineScope { launch(uiDispatcher) { onSuccess(speakers) } } } catch (e: Exception) { onFailure(e) } src/commonMain/domain/GetSpeakers.kt multiplatform network database android parser view platform specific presenter presenter domain model
  51. 79.

    class SpeakersListPresenter(val speakers: GetSpeakers, val coroutineContext: CoroutineContext) { lateinit var

    view: ISpeakersData fun attachView(currView: ISpeakersData) { view = currView fetchSpeakersList() } … presenter multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/presentation/SpeakersListPresenter.kt
  52. 80.

    class SpeakersListPresenter(val speakers: GetSpeakers, val coroutineContext: CoroutineContext) { lateinit var

    view: ISpeakersData fun attachView(currView: ISpeakersData) { view = currView fetchSpeakersList() } … presenter multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/presentation/SpeakersListPresenter.kt onCreate()/ viewDidLoad()
  53. 81.

    class SpeakersListPresenter(val speakers: GetSpeakers, val coroutineContext: CoroutineContext) { lateinit var

    view: ISpeakersData fun attachView(currView: ISpeakersData) { view = currView fetchSpeakersList() } … presenter multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/presentation/SpeakersListPresenter.kt
  54. 82.

    presenter multiplatform network database android parser view platform specific presenter

    presenter domain model src/commonMain/presentation/cb/ISpeakersData.kt interface ISpeakersData { fun onSpeakersDataFetched(speakers: List<Speaker>) fun onSpeakersDataFailed(e: Exception) }
  55. 83.

    class SpeakersListPresenter(val speakers: GetSpeakers, val coroutineContext: CoroutineContext) { lateinit var

    view: ISpeakersData fun attachView(currView: ISpeakersData) { view = currView fetchSpeakersList() } private fun fetchSpeakersList() { PresenterCoroutineScope(coroutineContext).launch { speakers( onSuccess = { view?.onSpeakersDataFetched(it) }, onFailure = { view?.onSpeakersDataFailed(it) }) … presenter multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/presentation/SpeakersListPresenter.kt
  56. 84.

    class SpeakersListPresenter(val speakers: GetSpeakers, val coroutineContext: CoroutineContext) { lateinit var

    view: ISpeakersData fun attachView(currView: ISpeakersData) { view = currView fetchSpeakersList() } private fun fetchSpeakersList() { PresenterCoroutineScope(coroutineContext).launch { speakers( onSuccess = { view?.onSpeakersDataFetched(it) }, onFailure = { view?.onSpeakersDataFailed(it) }) … presenter multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/presentation/SpeakersListPresenter.kt
  57. 85.

    object ServiceLocator { private val sessionizeAPI by lazy { SessionizeAPI(PlatformServiceLocator.httpClientEngine)

    } private val getSpeakers: GetSpeakers get() = GetSpeakers(sessionizeAPI, speakerDao) private val speakerDao by lazy { SpeakerDao(PlatformServiceLocator.databaseEngine) } val getSpeakersPresenter: SpeakersListPresenter get() = SpeakersPresenter(getSpeakers) … presenter multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/ServiceLocator.kt
  58. 86.
  59. 87.

    platform specific expect object PlatformServiceLocator { val httpClientEngine: HttpClientEngine val

    databaseEngine: ScheduleDb } multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/PlatformServiceLocator.kt
  60. 88.

    platform specific expect object PlatformServiceLocator { val httpClientEngine: HttpClientEngine val

    databaseEngine: ScheduleDb } multiplatform network database android parser view platform specific presenter presenter domain model src/commonMain/PlatformServiceLocator.kt
  61. 89.

    actual object PlatformServiceLocator { actual val httpClientEngine: HttpClientEngine by lazy

    { OkHttp.create() } actual val databaseEngine: SqlDriver by lazy { AndroidSqliteDriver(ScheduleDb.Schema, context, "droidcon.db") … platform specific androidMain iOSMain multiplatform network database android parser view platform specific presenter presenter domain model
  62. 90.

    actual object PlatformServiceLocator { actual val httpClientEngine: HttpClientEngine by lazy

    { OkHttp.create() } actual val databaseEngine: SqlDriver by lazy { AndroidSqliteDriver(ScheduleDb.Schema, context, "droidcon.db") … platform specific androidMain actual object PlatformServiceLocator { actual val httpClientEngine: HttpClientEngine by lazy { Ios.create() } actual val databaseEngine: SqlDriver by lazy { NativeSqliteDriver(ScheduleDb.Schema, "droidcon.db") … iOSMain multiplatform network database android parser view platform specific presenter presenter domain model
  63. 91.

    actual object PlatformServiceLocator { actual val httpClientEngine: HttpClientEngine by lazy

    { OkHttp.create() } actual val databaseEngine: SqlDriver by lazy { AndroidSqliteDriver(ScheduleDb.Schema, context, "droidcon.db") … platform specific androidMain actual object PlatformServiceLocator { actual val httpClientEngine: HttpClientEngine by lazy { Ios.create() } actual val databaseEngine: SqlDriver by lazy { NativeSqliteDriver(ScheduleDb.Schema, "droidcon.db") … iOSMain multiplatform network database android parser view platform specific presenter presenter domain model
  64. 92.

    src/commonAndroid/presenter/activities/MainActivity.kt android class MainActivity : AppCompatActivity(), ISpeakersData { val presenter

    by lazy { ServiceLocator.getSpeakersPresenter } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) presenter.attachView(this) } override fun onSpeakersDataFetched(list: List<Speaker>){ setup(list) … multiplatform network database android parser view platform specific presenter presenter domain model
  65. 93.

    src/commonAndroid/presenter/activities/MainActivity.kt android class MainActivity : AppCompatActivity(), ISpeakersData { val presenter

    by lazy { ServiceLocator.getSpeakersPresenter } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) presenter.attachView(this) } override fun onSpeakersDataFetched(list: List<Speaker>){ setup(list) … multiplatform network database android parser view platform specific presenter presenter domain model
  66. 94.

    src/commonAndroid/presenter/adapters/SpeakersListAdapter.kt android multiplatform network database android parser view platform specific

    presenter presenter domain model override fun onBindViewHolder(viewHolder: SpeakerViewHolder, position: Int) { val speaker = speakers[position] Glide.with(viewHolder.speakerPhoto) .load(speaker.profilePicture) .apply(RequestOptions.circleCropTransform()) .into(viewHolder.speakerPhoto) viewHolder.speakerName.text = speaker.fullName viewHolder.talkTitle.text = speaker.talkTitle viewHolder.container.setOnClickListener { action.onUserClickAction(speaker, it) } }
  67. 95.

    src/commonAndroid/presenter/adapters/SpeakersListAdapter.kt android override fun onBindViewHolder(viewHolder: SpeakerViewHolder, position: Int) { val

    speaker = speakers[position] Glide.with(viewHolder.speakerPhoto) .load(speaker.profilePicture) .apply(RequestOptions.circleCropTransform()) .into(viewHolder.speakerPhoto) viewHolder.speakerName.text = speaker.fullName viewHolder.talkTitle.text = speaker.talkTitle viewHolder.container.setOnClickListener { action.onUserClickAction(speaker, it) } } you can keep using your android libraries multiplatform network database android parser view platform specific presenter presenter domain model
  68. 96.

    iosApp/iosApp/SpeakerTableViewController.swift iOS multiplatform network database iOS parser view platform specific

    presenter presenter domain model class SpeakerTableViewController: UITableViewController, ISpeakersData lazy var presenter = ServiceLocator.init().getSpeakerPresenter override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) presenter.attachView(view: self) } func onSpeakersDataFetched(speakers: [Speaker]) { setup(speakers) …
  69. 97.

    iosApp/iosApp/SpeakerTableViewController.swift iOS multiplatform network database iOS parser view platform specific

    presenter presenter domain model class SpeakerTableViewController: UITableViewController, ISpeakersData { lazy var presenter = ServiceLocator.init().getSpeakersPresenter override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) presenter.attachView(view: self) } func onSpeakersDataFetched(speakers: [Speaker]) { setup(speakers) …
  70. 98.

    iosApp/iosApp/SpeakerTableViewController.swift iOS multiplatform network database iOS parser view platform specific

    presenter presenter domain model override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cellIdentifier = "SpeakerTableViewCell" let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as SpeakerTableViewCell let speaker = speakers[indexPath.row] cell.talkName.text = speaker.talkTitle cell.speakerName.text = speaker.fullName cell.speakerImage.image = speaker.profilePicture return cell }
  71. 102.

    (impressions) Kotlin Multiplatform I could just focus on doing what

    I know best - UI. I have no idea how things are being done in the backend, yet I know that when I ask for data I receive it. - iOS Developer
  72. 103.

    - it’s in experimental state - although there are projects

    in production - you can spend some time resolving compilation issues - specially if you try to target all platforms - not possible to debug kotlin from Xcode - there’s a plugin for Xcode from TouchLab - lookout for plugins/ libraries updates (in progress) Kotlin Multiplatform
  73. 104.

    - strong community - a lot of people are using

    kotlin nowadays - Google and JetBrains are pushing Kotlin in - you can ask questions directly on https://kotlinlang.slack.com - 2x faster to develop your features business logic - 2x faster writing unit tests - one tech stack - consistency across platforms (conclusions) Kotlin Multiplatform
  74. 105.

    - be extremely careful with all updates - IDEA, jdk,

    kotlin, libraries - everything. - start small, don’t try to reach 100% of shared logic - keep versioning in mind - remember that’s still on experimental state (suggestions) Kotlin Multiplatform
  75. 106.

    - Kotlin Slack - Android @ Portugal Slack - Kotlin

    Official - Kotlin Training - Kotlin by: https://jakewharton.com/presentations/ http://antonioleiva.com/kotlin (useful links) more information