Giter VIP home page Giter VIP logo

dbaroncelli / d-kmp-sample Goto Github PK

View Code? Open in Web Editor NEW
754.0 30.0 86.0 109.92 MB

D-KMP Architecture official sample: it uses a shared KMP ViewModel and Navigation for Compose and SwiftUI apps.

License: Apache License 2.0

Kotlin 76.17% Swift 23.83%
kotlin kotlin-multiplatform android ios swiftui kmp-viewmodel jetpack-compose kotlin-multiplatform-mobile kmp kmm d-kmp mvi declarative-ui stateflow sqldelight ktor-client multiplatform-settings compose-desktop

d-kmp-sample's Introduction

D-KMP architecture - official sample

This is the official sample of the D-KMP architecture, presenting a simple master/detail app, for Android, iOS and Desktop.
(the Web version will be added at a later stage, when "Compose for Web" and "Kotlin/Wasm" become more mature)

Key features of the D-KMP architecture:

  • it uses the latest declarative UI toolkits: Compose for Android and SwiftUI for iOS
  • it fully shares the ViewModel (including navigation logic and data layer) via Kotlin MultiPlatform
  • coroutine scopes are cancelled/reinitialized automatically, based on the current active screens and the app lifecycle (using LifecycleObserver on Android and the SwiftUI lifecycle on iOS)
  • it implements the MVI pattern and the unidirectional data flow
  • it implements the CQRS pattern, by providing Command functions (via Events and Navigation) and Query functions (via StateProviders)
  • it uses Kotlin's StateFlow to trigger UI layer recompositions
  • the navigation state is processed in the shared code, and then exposed to the UI layer:
    • on SwiftUI it seamlessly integrates with the new iOS 16 navigation patterns (NavigationStack and/or NavigationSplitView)
    • on Compose it's a "remembered" data class which works on any platform (unlike Jetpack Navigation, which only works on Android)

you can find more info on these articles:

Data sources used by this sample:

these are other data sources, not used by this sample, for which popular KMP libraries exist:

Instructions to write your own D-KMP app:

If you want to create your own app using the D-KMP Architecture, here are the instructions you need:

SHARED CODE:

View Model

  • ๐Ÿ› ๏ธ in the viewmodel/screens folder: create a folder for each screen of the app, containing these 3 files (as shown in the sample app structure above):
    • screenEvents.kt, where the event functions for that screen are defined
    • screenInit.kt, where the initialization settings for that screen are defined
    • screenState.kt, where the data class of the state for that screen is defined
  • ๐Ÿ› ๏ธ in the NavigationSettings.kt file in the screens folder, you should define your level 1 navigation and other settings
  • ๐Ÿ› ๏ธ in the ScreenEnum.kt file in the screens folder, you should define the enum with all screens in your app
  • โœ… the ScreenInitSettings.kt file in the screens folder doesn't need to be modified
  • โœ… the 6 files in the viewmodel folder (DKMPViewModel.kt, Events.kt, Navigation.kt, ScreenIdentifier.kt, StateManager.kt, StateProviders.kt) don't need to be modified
  • โœ… also DKMPViewModelForAndroid.kt in androidMain and DKMPViewModelForIos.kt in iosMain don't need to be modified

Data Layer

  • ๐Ÿ› ๏ธ in the datalayer/functions folder: create a file for each repository function to be called by the ViewModel's StateReducers
  • ๐Ÿ› ๏ธ in the datalayer/objects folder: create a file for each data class used by the repository functions
  • ๐Ÿ› ๏ธ in the datalayer/sources folder: create a folder for each datasource, where the datasource-specific functions (called by the repository functions) are defined
  • โœ… the datalayer/Repository.kt file should be modified only in case you want to add an extra datasource



PLATFORM-SPECIFIC CODE:

Android

Schermata 2021-06-26 alle 16 54 32

Schermata 2021-06-26 alle 17 03 13

  • โœ… the App.kt file doesn't need to be modified
  • โœ… the MainActivity.kt file doesn't need to be modified
  • The composables are used by both Android and Desktop apps:
    • ๐Ÿ› ๏ธ the Level1BottomBar.kt and Level1NavigationRail.kt files in the navigation/bars folder should be modified to custom the Navigation bars items
    • โœ… the TopBar.kt file in the navigation/bars folder doesn't need to be modified
    • โœ… the OnePane.kt and TwoPane.kt files in the navigation/templates folder don't need to be modified
    • โœ… the HandleBackButton.kt file in the navigation folder doesn't need to be modified
    • โœ… the Router.kt file in the navigation folder doesn't need to be modified
    • ๐Ÿ› ๏ธ in the ScreenPicker.kt file in the navigation folder, you should define the screen composables in your app
    • ๐Ÿ› ๏ธ in the screens folder: create a folder for each screen of the app, containing all composables for that screen
    • โœ… the MainComposable.kt file doesn't need to be modified

iOS

ios-files

  • ๐Ÿ› ๏ธ the Level1BottomBar.swift and Level1NavigationRail.swift files in the composables/navigation/bars folder should be modified to custom the Navigation bars items
  • โœ… the TopBar.swift file in the composables/navigation/bars folder doesn't need to be modified
  • โœ… the OnePane.swift and TwoPane.swift files in the composables/navigation/templates folder don't need to be modified
  • โœ… the Router.swift file in the composables/navigation folder doesn't need to be modified
  • ๐Ÿ› ๏ธ in the ScreenPicker.swift file in the views/navigation folder, you should define the screen composables in your app
  • ๐Ÿ› ๏ธ in the views/screens folder: create a folder for each screen of the app, containing all SwiftUI views for that screen
  • โœ… the App.swift file doesn't need to be modified
  • โœ… the AppObservableObject.swift file doesn't need to be modified

Desktop

Schermata 2021-06-26 alle 16 54 15

Schermata 2021-06-26 alle 17 03 13

  • โœ… the main.kt file doesn't need to be modified
  • The composables are used by both Android and Desktop apps:

Web (not yet implemented)

  • The best technology to implement a Web App in Kotlin will be Compose for Web backed by Kotlin/Wasm. However Kotlin/Wasm is still at a very early stage: the first version was just released in February 2023, with Kotlin 1.8.20.
  • Compose For Web and Kotlin/Wasm will allow us to build Compose projects seamlessly for the Web, using the same composables we are already using for the Desktop and Android.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.