Code Monkey home page Code Monkey logo

kmm-production-sample's Introduction

KMM RSS Reader

This is an open-source, mobile, cross-platform application built with Kotlin Multiplatform Mobile. It's a simple RSS reader, and you can download it from the App Store and Google Play. It's been designed to demonstrate how KMM can be used in real production projects.

Desktop and Web experiment

Project structure

This repository contains a common Kotlin Multiplatform module, a Compose (Android+Desktop) project, an iOS project and a Web project. The common module is connected with the Compose project via the Gradle multi-project mechanism. For use in iOS applications, the shared module compiles into a framework that is exposed to the Xcode project via the internal integration Gradle task. This framework connects to the Xcode project that builds an iOS application. For web the shared module transpiles into a commonjs2 module and connect the a React.js application using NPM and webpack.

You can achieve the same structure by creating a project with the KMM Plugin project wizard or cloning the basic sample project.

Architecture

Kotlin Multiplatform Mobile is a flexible technology that allows you to share only what you want to share, from the core layer to UI layers.

This sample demonstrates sharing not only the data and domain layers of the app but also the application state:

Shared data and domain layers

There are two types of data sources. The network service is for getting RSS feed updates, while local storage is for caching the feed, which makes it possible to use the application offline. Ktor HTTP Client is used for making API requests. Kotlinx.serialization is used to serialize feed data and store it locally with MultiplaformSettings. This logic is organized in the shared module of the com.github.jetbrains.rssreader.core package.

Shared application state

The Redux pattern is used for managing the application state. The simplified Redux architecture is implemented in the shared module. The Store class dispatches the actions that can be produced either by a user or by some async work, and generates the new state. It stores the actual state and facilitates subscription to state updates via Kotlin's StateFlow. To provide additional information about state updates, the Store class also produces effects that, for example, can be used to display this information via alerts. This logic is organized in the shared KMM module of the com.github.jetbrains.rssreader.app package.

Native UI

The UI layer is fully native and implemented using SwiftUI for iOS, Jetpack Compose for Android, Compose Multiplatform for Desktop and React.js for web browser.

On the iOS side, the Store from the KMM library is wrapped into the ObservableObject and implements the state as a @Published wrapped property. This publishes changes whenever a dispatched action produces a new state after being reduced in the shared module. The store is injected as an Environment Object into the root view of the application, and is easily accessible from anywhere in the application. SwiftUI performs all aspects of diffing on the render pass when your state changes.

For subscribing to state updates, the simple wrapper is used. This wrapper allows you to provide a callback that will be called when each new value (the state in our case) is emitted.

React Web App

Getting started with the react web app

On the Web side, the Store from the KMM library is exposed through a top level object declaration acting as view model.
This is necessary because sealed classes used to represent dispatchable actions are not exportable to JavaScript.
In this view model we use MainScope to collect StateFlow updates and make them avalaible to JavaScript by way of callback. Finally the state is consumed through the React Context API.

Multiplatform features used

โœ… Platform-specific API usage. RSS feeds usually only support the XML format. The kotlinx.serialization library currently doesn't support parsing XML data, but there is no need to implement your own parser. Instead, platform libraries (XmlPullParser for Android, NSXMLParser for iOS and DOMParser for web) are used. The common FeedParser interface is declared in the commonMain source set. Platform implementations are placed in the corresponding iOSMain, AndroidMain and jsMain source sets. They are injected into the RSSReader class (the KMM module entry point) via the create factory method, which is declared in the RSSReader class companion object.

kmm-production-sample's People

Contributors

terrakok avatar katerinapetrova avatar ybonnetain avatar guilhe avatar itsandreramon avatar i-redbyte avatar

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.