Upgrade to Pro — share decks privately, control downloads, hide ads and more …

fun HelloKMP(): GladToMeetYou

HyunWoo Lee
December 10, 2023

fun HelloKMP(): GladToMeetYou

2023 GDG Devfest Songdo에서 진행한 fun HelloKMP(): GladToMeetYou 발표의 Speaker Deck입니다.

HyunWoo Lee

December 10, 2023
Tweet

More Decks by HyunWoo Lee

Other Decks in Programming

Transcript

  1. fun HelloKMP():
    GladToMeetYou
    Incheon/Songdo

    View full-size slide

  2. 안녕하세요!
    이현우입니다.
    (전) Mathpresso(QANDA) Android Engineer
    GDSC Konkuk University Lead (23-24)
    Kotlin User Groups Seoul Organizer

    View full-size slide

  3. Kotlin User Groups
    Kotlin User Groups(KUG)는 Kotlin
    개발에 지대한 관심을 가지는
    개발자들에게 지식 공유의 장을 마련하고
    개발에 도움이 되는 컨텐츠를
    제공/공유하는 개발 커뮤니티입니다.
    https://github.com/Kotlin-User-Grou
    ps-Seoul

    View full-size slide

  4. 오늘 저는 이런걸 다뤄보려고
    합니다
    ● Kotlin Multiplatform
    ● Kotlin 팀이 그려가고 있는 미래: Compose Multiplatform
    ● Fleet: Awesome IDE For KMP

    View full-size slide

  5. Kotlin:
    Myth and Truth
    Incheon/Songdo

    View full-size slide

  6. Kotlin is designed to be a pragmatic tool

    View full-size slide

  7. Supports multi-paradigm, multiplatform

    View full-size slide

  8. - Kotlin/JVM
    - Kotlin/JS
    - Kotlin/Wasm
    - Kotlin/Native
    - Darwin(macOS/iOS)
    - Linux
    - Windows

    View full-size slide

  9. DEVIEW 2023 - 그 여자 APP, 그 남자 SDK: Kotlin Multiplatform
    적용기

    View full-size slide

  10. - Kotlin/JVM
    - Kotlin/JS
    - Kotlin/Wasm
    - Kotlin/Native
    - Darwin(macOS/iOS)
    - Linux
    - Windows
    Kotlin Wasm
    https://kotlinlang.org/docs/wasm-overview.html
    Kotlin Native
    https://kotlinlang.org/docs/native-overview.html
    Kotlin JS
    https://kotlinlang.org/docs/js-overview.html#kotlin-js-ir-c
    ompiler

    View full-size slide

  11. What is
    Kotlin
    Multiplatform
    Incheon/Songdo

    View full-size slide

  12. Server
    Android iOS Web

    View full-size slide

  13. Server
    Android iOS Web Desktop

    View full-size slide

  14. Server
    Android iOS Web Desktop

    View full-size slide

  15. Server
    Android iOS Web Desktop
    공통 로직으로 짜여져 있다면?

    View full-size slide

  16. Server
    Android iOS Web Desktop
    “Kotlin” Multiplatform

    View full-size slide

  17. It’s quite different

    View full-size slide

  18. Flutter, React Native
    ● 이론
    ○ 하나의 언어로 UI~전체 로직 구성
    가능
    ○ 빠르게 기능/화면
    ● 현실
    ○ OS 의존적인 기능/UI는 네이티브
    코드로 작성해야됨
    ○ MethodChannel
    ○ Native Module
    ○ 네이티브단 코드 이해가 수반됨
    ○ (특정 플랫폼) 서드 파티
    라이브러리 유지보수 미비

    View full-size slide

  19. Kotlin Multiplatorm

    View full-size slide

  20. Kotlin Multiplatform - 절망편
    ● 간단한 기능을 제공하는 모바일
    앱이더라도 Kotlin, Swift 그리고 UI
    코드 작성방식을 반드시
    알아둬야됨
    ○ iOS 개발자분들도 계신다면
    이 부담이 좀 줄어듦
    ○ 그런데 iOS 개발자들은 이
    방향을 좋아할까?
    ● shared(common) 모듈이
    바이너리로 변환되는 경우
    ○ 디버깅/sealed 타입 대참사

    View full-size slide

  21. Kotlin Multiplatform - 절망편
    ● 간단한 기능을 제공하는 모바일
    앱이더라도 Kotlin, Swift 그리고 UI
    코드 작성방식을 반드시
    알아둬야됨
    ○ iOS 개발자분들도 계신다면
    이 부담이 좀 줄어듦
    ○ 그런데 iOS 개발자들은 이
    방향을 좋아할까?
    ● shared(common) 모듈이
    바이너리로 변환되는 경우
    ○ 디버깅/sealed 타입 대참사
    ■ icerock/moko-kswift

    View full-size slide

  22. Kotlin Multiplatform - 절망편
    ● 간단한 기능을 제공하는 모바일
    앱이더라도 Kotlin, Swift 그리고 UI
    코드 작성방식을 반드시
    알아둬야됨
    ○ iOS 개발자분들도 계신다면
    이 부담이 좀 줄어듦
    ○ 그런데 iOS 개발자들은 이
    방향을 좋아할까?
    ● shared(common) 모듈이
    바이너리로 변환되는 경우
    ○ 디버깅/제네릭 타입 대참사

    View full-size slide

  23. Kotlin Multiplatform - 절망편
    ● (iOS) Coroutines/Flow의
    Cancellation이 지원이 안됨
    ○ cancel을 할 수 있는 handler
    객체를 내주거나 서드파티
    라이브러리 활용
    ○ rickclephas/KMP-NativeCor
    outines
    ● 서드파티 라이브러리/트러블 슈팅
    기록들이 타 플랫폼에 비해 많이
    부족
    ● 객체지향/아키텍처에 관련된 지식
    필요

    View full-size slide

  24. Kotlin Multiplatform - 희망편
    ● 모바일에서 OS 의존적인
    기능들을 활용하기 훨씬 쉬움
    ● 안드로이드 개발자 입장에서
    친숙한 개발 환경으로
    크로스플랫폼 앱 만들 수 있음

    View full-size slide

  25. Kotlin Multiplatform - 희망편
    ● Windows, Web 같은 경우
    Kotlin/JS, Kotlin/Native 활용하여
    구축 가능
    ● Jetbrains와 Google에서
    지원해주는 First/Second 파티
    라이브러리가 많음
    ○ Kotlinx libraries
    ○ Ktor
    ○ Androidx libraries

    View full-size slide

  26. KMP Ecosystem is skyrocketing

    View full-size slide

  27. https://github.com/terrakok/kmp-awesome

    View full-size slide

  28. KMP에 사용할 수 있는
    라이브러리를
    더 자세히 알아보고 싶다면?

    View full-size slide

  29. KMP 개발을 위해 알아두면 좋은 라이브러리
    소개
    DI 프레임워크 찍먹하기
    이후 이상훈님의 세션에서 더 자세한 내용을 확인하실 수 있습니다!

    View full-size slide

  30. Many companies select KMP
    kotl.in/kmp-case-studies

    View full-size slide

  31. 한국에도 KMP를 활용하는 회사가 있습니다.

    View full-size slide

  32. 한국에도 KMP를 활용하는 회사가 있습니다.
    PRISM Live Studio (NAVER ETECH)
    https://www.youtube.com/watch?v=B27Yu9uQvqY
    LINGER STUDIO
    https://www.youtube.com/watch?v=5Q5eSB_1eQE
    PREAT
    https://medium.com/preat/launching-on-ios-android-with-kotlin-compose-m
    ultiplatform-cc90848cc5f3

    View full-size slide

  33. 이런 멋진 기술들을 직접 활용한
    Sample App들을 보고 싶다면?

    View full-size slide

  34. https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-samples.html

    View full-size slide

  35. KMP로 번역기 만들기
    이후 유광무님의 세션에서 더 자세한 내용을 확인하실 수
    있습니다!

    View full-size slide

  36. Simple KMP
    Project Analysis
    Incheon/Songdo

    View full-size slide

  37. Project init

    View full-size slide

  38. Project init
    https://www.jetbrains.com/help/kotlin-multiplatform
    -dev/multiplatform-setup.html

    View full-size slide

  39. Project init

    View full-size slide

  40. Project init

    View full-size slide

  41. Project init

    View full-size slide

  42. Project init

    View full-size slide

  43. Project init
    https://www.jetbrains.com/help/kotlin-multiplatform
    -dev/multiplatform-project-configuration.html

    View full-size slide

  44. Project init - New Template Wizard 󰩃
    kmp.jetbrains.com

    View full-size slide

  45. Project init - New Template Wizard 󰩃

    View full-size slide

  46. TroubleShooting - :shared:testClasses not found

    View full-size slide

  47. TroubleShooting - :shared:testClasses not found

    View full-size slide

  48. Project Structure

    View full-size slide

  49. Project Structure - Android App

    View full-size slide

  50. Project Structure - Android App

    View full-size slide

  51. Project Structure - iOS App

    View full-size slide

  52. Project Structure - iOS App

    View full-size slide

  53. Project Structure - iOS App

    View full-size slide

  54. Project Structure - iOS App

    View full-size slide

  55. Project Structure - shared module

    View full-size slide

  56. Project Structure - shared module

    View full-size slide

  57. Project Structure - shared module

    View full-size slide

  58. Project Structure - shared module
    플랫폼별로 사용할
    함수 추상화

    View full-size slide

  59. expect, actual 키워드로 플랫폼간 명세
    (추상)과 구현체(구체)를 구분할 수 있음
    중요한 점
    ● commonMain과 각 OS 구현체는
    동일한 패키지에 구현되어야 함
    Expected and actual classes(beta)

    View full-size slide

  60. Stablized Kotlin
    Multiplatform
    Stable 🎉 since 10/31
    What’s different?
    Incheon/Songdo

    View full-size slide

  61. EXPER. ALPHA STABLE
    BET
    A
    2020 2021 2022 2023 2024

    View full-size slide

  62. What is stabilized
    플랫폼
    Compatibility
    보장
    보다 쉬운
    빌드 환경 설정 Faster Builds
    Better
    Runtime
    Performance
    새로운
    공식 문서
    (Kt - Swift)

    View full-size slide

  63. What is stabilized
    Platform Stability Level
    Android Stable
    iOS Stable
    Desktop(JVM) Stable
    Server-side(JVM) Stable
    Web based on Kotlin/JS Stable
    Web based on Kotlin/Wasm Alpha
    watchOS Best effort (Safe to use in most scenarios)
    tvOS Best effort (Safe to use in most scenarios)

    View full-size slide

  64. Template for configuring multiplatform project

    View full-size slide

  65. Template for configuring multiplatform project

    View full-size slide

  66. Template for configuring multiplatform project

    View full-size slide

  67. Template for configuring multiplatform project
    Kotlin 1.9.20부터 sourceSet을
    Gradle Plugin 단에서 자동으로
    설정

    View full-size slide

  68. Template for configuring multiplatform project

    View full-size slide

  69. Template for configuring multiplatform project

    View full-size slide

  70. Template for configuring multiplatform project
    등록되어있지 않은 target의 sourceSet을 사용할 경우
    컴파일 단에서 친절한 경고를 띄움

    View full-size slide

  71. 안정화 이후의 성능
    향상
    Gradle Configuration
    Cache support
    (Cocoapods)
    Incremental compilation
    of klib artifacts
    New custom memory
    allocator in Kotlin/Native
    Kotlin/Native compiler
    cache management

    View full-size slide

  72. kotl.in/kmp-portal

    View full-size slide

  73. FAQ
    ● Android는 반드시 Jetpack Compose로 작성해야하나요?
    ● 아닙니다. XML 기반으로 뷰 작성하셔도 됩니다.

    View full-size slide

  74. FAQ
    ● 주로 어떤 IDE를 활용하여 코드를 작성하시나요?
    ● 저는 주로 stable 버전의 Android Studio를 활용하거나 XCode를
    활용합니다.

    View full-size slide

  75. FAQ
    ● Kotlin Multiplatform를 어느 시기에, 어떤 팀에서 채택하면 좋을까요?
    ● (Official Answer)
    ● 플랫폼 의존적인 코드가 많은데 (Camera, Bluetooth) 크로스 플랫폼을
    사용하고자 할 때
    ● Kotlin, Jetpack Compose을 활용하여 크로스 플랫폼 앱을 만들고자 할

    ● 안드로이드, 데스크톱 여러 가지 플랫폼이 기존에 개발되어있는데 공통
    로직을 빼내어서 단일 팀에서 관리하고자 할 때
    ● 다양한 플랫폼을 점진적으로 추가를 해야하는 앱을 개발해야할 때

    View full-size slide

  76. Compose
    Multiplatform
    Incheon/Songdo

    View full-size slide

  77. Compose Multiplatform
    jb.gg/compose
    기존 크로스플랫폼 프레임워크처럼
    UI도 Compose 기반으로 작성할 수
    있게 해주는 프레임워크
    Kotlin Multiplatform과 호환

    View full-size slide

  78. Compose Multiplatform

    View full-size slide

  79. Compose Multiplatform

    View full-size slide

  80. Compose Multiplatform

    View full-size slide

  81. Compose Multiplatform - Init

    View full-size slide

  82. Compose Multiplatform - Init

    View full-size slide

  83. Compose Multiplatform - 1.5.10
    Material3 Components
    - ModalBottomSheet
    - DropdownMenuBox
    - SearchBar
    향상된 iOS에서의 렌더링 성능
    New Documentation
    Compiler Caching
    Faster Incremental Build

    View full-size slide

  84. Fleet with KMP
    Incheon/Songdo

    View full-size slide

  85. Fleet + KMP = 👍
    ● Next-Generation IDE
    ● VS Code와 같은 에디터 형식의 Light Mode와 IntelliJ Code Engine을 활용한
    스마트 모드 병행 운영 가능

    View full-size slide

  86. Fleet + KMP = 👍
    ● Remote로 동작 가능
    ● Session 기능으로 타인이
    본인의 IDE 접속해서 협업할
    수 있는 기능 제공

    View full-size slide

  87. Fleet is polyglot

    View full-size slide

  88. Fleet with KMP

    View full-size slide

  89. Fleet with Swift
    ● Kotlin, Swift 언어간 리팩토링, 플랫폼 프로덕트 디버깅, 코드간
    네비게이션 등 KMP를 더욱 잘 활용할 수 있는 기능 지원 예정

    View full-size slide

  90. 감사합니다.
    Kotlin Multiplatform
    같이 키워나가봐요
    l2hyunwoo
    l2hyunwoo
    l2hyunwoo

    View full-size slide