Kotlin Multiplatform in Action - Alexandr Pogrebnyak - IceRockDev

DEVELOPMENT
1
Kotlin Multiplatform in Action
Alexandr Pogrebnyak
Droidcon Tel Aviv
19.12.19.

DEVELOPMENT
● About us
● What is Kotlin Multiplatform?
● Our experience in Kotlin Multiplatform
● moko.icerock.dev – a set of multiplatform libraries
● moko-widgets
2

DEVELOPMENT
● 5 years in mobile development
● 80+ mobile projects (iOS & Android)
● 40+ developers in 2 offices
3

DEVELOPMENT
Focus on:
4
Avoid logic reduplication and
keep UI native

DEVELOPMENT
5
Code Sharing in IceRock
Flutter
React Native
J2ObjC
New programming language
Integration with OS via middle layer
Non-native UI
Legacy tech stacks
Asynchronous work with OS
Need to adopt Java-code to ObjC
Native UI
Hot reload

DEVELOPMENT
6
Kotlin Multiplatform
+
Kotlin/Native
Code Sharing at IceRock
Kotlin looks like Swift
Inner libraries already in Kotlin
Shift to native env at any moment
Familiar programming language
Native UI
Full access to Android OS and iOS features
and SDKs
There are some limitations in Kotlin > Swift direction
Devs worry about integration

DEVELOPMENT
7
Kotlin Multiplatform at IceRock
Kotlin MPP and Kotlin/Native since July 2018
1 year achievement
Reduce time and cost for both platforms by 1.5x
1.5x speed
50% of shared code on average
50:50
Easy learning curve for Android and iOS developers
Easy to learn, hard to master

DEVELOPMENT
8
Android Windows macOS Linux Java Java Script WebAssemblyiOS

DEVELOPMENT
9
expect class Logger(tag: String) {
fun log(string: String)
}
fun main() {
val logger = Logger("MPP")
logger.log("hello world!")
}
commonMain

DEVELOPMENT
10
iosMain
import platform.Foundation.NSLog
actual class Logger actual constructor(private val
tag: String) {
actual fun log(string: String) {
NSLog("[$tag] $string")
}
}
import android.util.Log
actual class Logger actual constructor(private val
tag: String) {
actual fun log(string: String) {
Log.v(tag, string)
}
}
androidMain

DEVELOPMENT
11
androidMain
└── kotlin
└── com.icerockdev.library
└── Logger.kt
commonMain
└── kotlin
└── Logger.kt
iosMain
└── kotlin
└── Logger.kt

DEVELOPMENT
12
Kotlin Multiplatform - past
View
AuthActivity AuthViewController ProfileViewController ProfileActivity
Presentation
AuthViewModel ProfileViewModel PostsViewModel AddPostViewModel
Domain
UserInteractor PostsInteractor Validator Payment
Data
User Post UserRepository PostRepository
RestUser RestPost UserApi PostApi

DEVELOPMENT
13
Kotlin Multiplatform - now
View
AuthScreen ProﬁleScreen
Presentation
AuthViewModel ProﬁleViewModel PostsViewModel
Domain
UserInteractor PostsInteractor Validator
Data
User Post UserRepository
RestUser RestPost UserApi
powered by

DEVELOPMENT
14
Shared Code in a Typical Project - past
Shared code
62%
Android-speciﬁc
16%
iOS-speciﬁc
22%

DEVELOPMENT
15
Shared Code in a Typical Project - now
Android-speciﬁc
3%
iOS-speciﬁc
2%
Shared code
95%
powered by

DEVELOPMENT
16
moko.icerock.dev
Community

DEVELOPMENT
17moko.icerock.dev

DEVELOPMENT
18moko.icerock.dev

DEVELOPMENT
19
Fast start
github.com/icerockdev/moko-template
codelabs.kmp.icerock.dev

DEVELOPMENT
21
A moko-template (sample project)
https://github.com/icerockdev/moko-template.git
Features:
Install:
git clone Done!
app_name
app_icon
applicationId
● Shared business logic
● Kotlin Gradle DSL
● Modular-based architecture
● Independent feature and domain modules
● ViewModels, LiveData, Resource management, Runtime permissions access,
Media access, UI from shared code, Network layer generation from OpenAPI…

DEVELOPMENT
22
github.com/icerockdev/moko-template
widgets branch

DEVELOPMENT
Goal #1
1 Kotlin developer => 2 native mobile apps
23
goals

DEVELOPMENT
Goal #2
Fast start = the codebase should grow without
rewrites
24
goals

DEVELOPMENT
The basic architecture concepts:
1. compliance with platform rules
2. declare structure, not rendering
3. compile-time safety
4. reactive data handling
25
concepts

DEVELOPMENT
26
code
class App : BaseApplication() {
override fun setup() {
val theme = Theme()
registerScreenFactory(MainScreen::class) { MainScreen(theme) }
}
override fun getRootScreen(): KClass<out Screen<Args.Empty>> {
return MainScreen::class
}
}
common

DEVELOPMENT
27
code
class MainApplication : Application() {
override fun onCreate() {
super.onCreate()
mppApplication = App().apply {
setup()
}
}
companion object {
lateinit var mppApplication: App
}
}
class MainActivity : HostActivity() {
override val application: BaseApplication
get() = MainApplication.mppApplication
}
android

DEVELOPMENT
28
code
@UIApplicationMain
class AppDelegate: NSObject, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: ..., didFinishLaunchingWithOptions ...) -> Bool {
let app = App()
app.setup()
let screen = app.createRootScreen()
let rootViewController = screen.createViewController()
window = UIWindow(frame: UIScreen.main.bounds)
window?.rootViewController = rootViewController
window?.makeKeyAndVisible()
return true
}
}
ios

DEVELOPMENT
29
code
class MainScreen(
private val theme: Theme
) : WidgetScreen<Args.Empty>() {
override fun createContentWidget() = with(theme) {
container(size = WidgetSize.AsParent) {
center {
text(
size = WidgetSize.WrapContent,
text = const(MR.strings.hello_world.desc())
)
}
}
}
}
common

DEVELOPMENT
30
code
class MainScreen(
center {
text(
)
}
}
}
}
common

DEVELOPMENT
31
code
class MainScreen(
center {
text(
)
}
}
}
}
common

DEVELOPMENT
32
code
class MainScreen(
center {
text(
)
}
}
}
}
common

DEVELOPMENT
33
code
class MainScreen(
center {
text(
)
}
}
}
}
common

DEVELOPMENT
34
code
class MainScreen(
center {
text(
)
}
}
}
}
common

DEVELOPMENT
36
code
class App : BaseApplication() {
override fun setup() {
val theme = Theme {
// custom styles here
}
registerScreenFactory(MainScreen::class) { MainScreen(theme) }
}
override fun getRootScreen(): KClass<out Screen<Args.Empty>> {
return MainScreen::class
}
}
common

DEVELOPMENT
37
code
val theme = Theme {
textFactory = DefaultTextWidgetViewFactory(
DefaultTextWidgetViewFactoryBase.Style(
textStyle = TextStyle(
size = 24,
color = Colors.black
),
padding = PaddingValues(padding = 16f)
)
)
}
common

DEVELOPMENT
38
code
val theme = Theme {
size = 24,
),
)
)
}
common

DEVELOPMENT
39
code
val theme = Theme {
size = 24,
),
)
)
}
common

DEVELOPMENT
Simple is simple.
How about some complexity?
41
code

DEVELOPMENT
43
code
image center
between
2 ﬁelds and a button
in the center

DEVELOPMENT
44
code
class LoginScreen(
constraint(size = WidgetSize.AsParent) {
// ...
}
}
}
common

DEVELOPMENT
45
code
val logoImage = +image(
size = WidgetSize.Const(SizeSpec.WrapContent, SizeSpec.WrapContent),
image = const(Image.resource(MR.images.logo))
)
}
}
common

DEVELOPMENT
46
code
val logoImage = +image(...)
val emailInput = +input(
size = WidgetSize.WidthAsParentHeightWrapContent,
id = Id.EmailInputId,
label = const("Email".desc() as StringDesc),
field = viewModel.emailField
)
val passwordInput = +input(
id = Id.PasswordInputId,
label = const("Password".desc() as StringDesc),
field = viewModel.passwordField
)
}
common

DEVELOPMENT
47
code
val emailInput = +input(...)
val passwordInput = +input(...)
val loginButton = +button(
size = WidgetSize.Const(SizeSpec.AsParent, SizeSpec.Exact(50f)),
text = const("Login".desc() as StringDesc),
onTap = viewModel::onLoginPressed
)
}
common

DEVELOPMENT
48
code
val loginButton = +button(...)
constraints {
passwordInput centerYToCenterY root
passwordInput leftRightToLeftRight root
emailInput bottomToTop passwordInput
emailInput leftRightToLeftRight root
loginButton topToBottom passwordInput
loginButton leftRightToLeftRight root
logoImage centerXToCenterX root
logoImage.verticalCenterBetween(
top = root.top,
bottom = emailInput.top
)
}
common

DEVELOPMENT
49
code
constraints {
top = root.top,
)
}
common

DEVELOPMENT
50
code
constraints {
top = root.top,
)
}
common

DEVELOPMENT
51
code
constraints {
top = root.top,
)
}
common

DEVELOPMENT
54
code
val loginTheme = Theme(theme) {
constraintFactory = DefaultConstraintWidgetViewFactory(
DefaultConstraintWidgetViewFactoryBase.Style(
padding = PaddingValues(16f),
background = Background(
fill = Fill.Solid(Colors.white)
)
)
)
}
common

DEVELOPMENT
55
code
constraintFactory = DefaultConstraintWidgetViewFactory(...)
imageFactory = DefaultImageWidgetViewFactory(
DefaultImageWidgetViewFactoryBase.Style(
scaleType = DefaultImageWidgetViewFactoryBase.ScaleType.FIT
)
)
}
common

DEVELOPMENT
56
code
imageFactory = DefaultImageWidgetViewFactory(...)
val corners = platformSpecific(android = 8f, ios = 25f)
inputFactory = DefaultInputWidgetViewFactory(
DefaultInputWidgetViewFactoryBase.Style(
margins = MarginValues(bottom = 8f),
underLineColor = Color(0xe5e6eeFF),
labelTextStyle = TextStyle(
color = Color(0x777889FF)
)
)
)
}
common

DEVELOPMENT
57
code
val corners = platformSpecific(android = 16f, ios = 25f)
inputFactory = DefaultInputWidgetViewFactory(
DefaultInputWidgetViewFactoryBase.Style(
margins = MarginValues(bottom = 8f),
underLineColor = Color(0xe5e6eeFF),
labelTextStyle = TextStyle(
color = Color(0x777889FF)
)
)
)
}
common

DEVELOPMENT
58
code
val corners = ...
inputFactory = DefaultInputWidgetViewFactory(...)
buttonFactory = DefaultButtonWidgetViewFactory(
DefaultButtonWidgetViewFactoryBase.Style(
margins = MarginValues(top = 32f),
background = StateBackground(
normal = Background(
fill = Fill.Solid(Color(0x6770e0FF)),
shape = Shape.Rectangle(cornerRadius = corners)
),
pressed = Background(...),
disabled = Background(...)
),
textStyle = TextStyle(color = Colors.white)
)
)
}
common

DEVELOPMENT
60
code
how add different
button?

DEVELOPMENT
61
code
val registerButton = +button(
id = Id.RegistrationButtonId,
size = WidgetSize.Const(SizeSpec.WrapContent, SizeSpec.Exact(40f)),
text = const("Registration".desc() as StringDesc),
onTap = viewModel::onRegistrationPressed
)
constraints {
// ...
registerButton topToBottom loginButton
registerButton rightToRight root
}
}

DEVELOPMENT
62
code
val registerButton = +button(
id = Id.RegistrationButtonId,
size = WidgetSize.Const(SizeSpec.WrapContent, SizeSpec.Exact(40f)),
text = const("Registration".desc() as StringDesc),
onTap = viewModel::onRegistrationPressed
)
constraints {
// ...
registerButton topToBottom loginButton
registerButton rightToRight root
}
}

DEVELOPMENT
63
code
class LoginScreen(...) : WidgetScreen<Args.Empty>() {
override fun createContentWidget() = ...
object Id {
...
object RegisterButtonId : ButtonWidget.Id
}
}

DEVELOPMENT
64
code
// …
setButtonFactory(
DefaultButtonWidgetViewFactory(
// ...
)
),
LoginScreen.Id.RegistrationButtonId
)
}
common

DEVELOPMENT
65
code
padding = platformSpecific(
ios = PaddingValues(start = 16f, end = 16f),
android = null
),
fill = Fill.Solid(Colors.white),
border = Border(
color = Color(0xF2F2F8FF),
width = 2f
),
),
),
textStyle = TextStyle(color = Color(0x777889FF))
)
common

DEVELOPMENT
66
code
android = null
),
border = Border(
width = 2f
),
),
),
)
common

DEVELOPMENT
67
code
android = null
),
border = Border(
width = 2f
),
),
),
)
common

DEVELOPMENT
68
code
android = null
),
border = Border(
width = 2f
),
),
),
)
common

DEVELOPMENT
Multiple screens?
70
code

DEVELOPMENT
The basic architecture concepts:
1. compliance with platform rules
2. declare structure, not rendering
3. compile-time safety
4. reactive data handling
76
concepts

DEVELOPMENT
77
concepts
Compliance with platform rules:
1. Activity recreation on Android
2. Save instance state on Android
3. All elements are native (UI/UX)

DEVELOPMENT
78
concepts
Declare structure, not rendering

DEVELOPMENT
Compile-time safety:
1. Type match of WidgetFactory and Widget
2. Child Widgets sizes compile-time checks
3. Widgets Id match to Widget type
4. Arguments in Screens
79
concepts

DEVELOPMENT
80
concepts
Type match of WidgetFactory and Widget
val theme = Theme {
textFactory = DefaultTextWidgetViewFactory()
}
val theme = Theme {
textFactory = DefaultContainerWidgetViewFactory()
}

DEVELOPMENT
81
concepts
Child Widgets sizes compile-time checks
}
}
container(size = WidgetSize.WrapContent) {
}
}

DEVELOPMENT
82
concepts
Child Widgets sizes compile-time checks
fun createContentWidget(): Widget<WidgetSize.Const<SizeSpec.AsParent,
SizeSpec.AsParent>>

DEVELOPMENT
83
concepts
Widgets Id match to Widget type
setContainerFactory(
DefaultContainerWidgetViewFactory(),
RootContainerId
)
setTextFactory(
DefaultTextWidgetViewFactory(),
RootContainerId
)
object RootContainerId: ContainerWidget.Id

DEVELOPMENT
84
concepts
Arguments in Screens
routeToScreen(NoArgsScreen::class)
class NoArgsScreen : WidgetScreen<Args.Empty>()

DEVELOPMENT
85
concepts
Arguments in Screens
routeToScreen(ArgsScreen::class, ArgsScreen.Arg(10))
routeToScreen(ArgsScreen::class)
class ArgsScreen : WidgetScreen<Args.Parcel<ArgsScreen.Arg>>()

DEVELOPMENT
Reactive data handling:
1. One-way binding via LiveData
2. Two-way binding via MutableLiveData
86
concepts

DEVELOPMENT
87
concepts
One-way binding via LiveData
class TimerViewModel : ViewModel() {
val text: LiveData<StringDesc>
}
val viewModel = getViewModel { TimerViewModel() }
center {
text(size = WidgetSize.WrapContent, text = viewModel.text)
}
}

DEVELOPMENT
88
concepts
Two-way binding via MutableLiveData
class InputViewModel : ViewModel() {
val nameField: FormField<String, StringDesc> = FormField("")
}
val viewModel = getViewModel { InputViewModel() }
input(
id = Id.NameInput,
label = const(MR.strings.name_label.desc()),
field = viewModel.nameField
)

DEVELOPMENT
89
concepts
Two-way binding via MutableLiveData
class FormField<D, E> {
val data: MutableLiveData<D>
val error: LiveData<E?>
val isValid: LiveData<Boolean>
}

DEVELOPMENT
90
current list of widgets
with(theme) {
constraint(...)
container(...)
linear(...)
scroll(...)
stateful(...)
tabs(...)
clickable(...)
image(...)
text(...)
input(...)
button(...)
list(...)
collection(...)
flatAlert(...)
progressBar(...)
singleChoice(...)
switch(...)
}

DEVELOPMENT
91
current list of widgets
public abstract class Widget<WS : WidgetSize> public constructor() {
public abstract val size: WS
public abstract fun buildView(viewFactoryContext: ViewFactoryContext): ViewBundle<WS>
}
public interface ViewFactory<W : Widget<out WidgetSize>> {
public abstract fun <WS : WidgetSize> build(widget: W, size: WS,
viewFactoryContext: ViewFactoryContext): ViewBundle<WS>
}

DEVELOPMENT
● Widgets declare screens and structure of screens,
but rendering is native
● Jetpack Compose & SwiftUI can be used to render
widgets
92
references

DEVELOPMENT
● 1 kotlin developer can create for both platforms
● natively for developer and customer
● no limits with any modiﬁcations (feature, screen, …)
● MVP quickly ≠ must redo natively in the future
93
beneﬁts

DEVELOPMENT
What’s available today (December, 19):
● Base widgets set
● Base navigation patterns
● Base styles for default widget-views
● A set of samples
● Actual version – 0.1.0-dev-5
94
roadmap

DEVELOPMENT
95
December-January:
● Implement in production project
● Check ﬂexibility of API to detect and ﬁx limits – you
can help with it.
Just try self and send feedback to github issues
● Screens actions API design (show toast, alert, route)
● More documentation and samples
roadmap

DEVELOPMENT
February-March:
● Release 0.1.0 (with ﬂexible API for customization)
● Codelabs and Medium posts with details of new
version
96
roadmap

DEVELOPMENT
2020 Q2-Q3:
● New widgets
● More variations of widgets renders
● More styles
● Production usage
97
roadmap

DEVELOPMENT
98
ap@icerock.dev
Try MOKO widgets today =>
@kotlinmpp github/icerockdev

Kotlin Multiplatform in Action - Alexandr Pogrebnyak - IceRockDev

Recommended

More Related Content

What's hot (20)

Similar to Kotlin Multiplatform in Action - Alexandr Pogrebnyak - IceRockDev (20)

More from DroidConTLV (20)

Recently uploaded (20)

Kotlin Multiplatform in Action - Alexandr Pogrebnyak - IceRockDev