Copenhagen
Denmark
BUILDING PROGRESSIVE
WEB APPS IN KOTLIN
Erik Hellman
@ErikHellman
Actual Cross Platform!
Types - They’re pretty great!
lib.dom.d.ts
Type definitions for
JavaScript DOM APIs
JavaScript can be weird...
TypeScript can also be weird! :)
“It’s complicated…”
Kotlin/JS
Kotlin/JS - build.gradle.kts
{
}
{
}
{
{
}
{
}
}
Kotlin/JS - Main.kt
{
}
Kotlin/JS - main.js
Error
test
console
Object
window
test
test
Kotlin/JS - main.js
main
console
main
main
Progressive Web Apps
manifest.json
Web App Manifest
Service Worker
Web UI
Web App Manifest - manifest.json
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
Service Worker
index.html
main.js
service-worker.js
Service Worker - index.html
Service Worker - main.js
navigator
navigator
console
console
Service Worker - service-worker.js
self
console
self
console
self
URL
location
caches
Service Worker
Kotlin/JS - Service Workers
Kotlin/JS - Main.kt
{
{
}
{
it}
}
Kotlin/JS Output
Input
Output
Kotlin/JS - Main.kt
{
{
}
{
it}
}
How can we create this file?
First solution - 2 Gradle modules!
2 copies of Kotlin/JS stdlib!!!
Second solution - use the same script!
Kotlin/JS - Main.kt
{
{ }
{ }
}
Same script as we’re currently
running in!
{
}
{ ->
}
{ ->
}
Kotlin/JS - Main.kt
Throws ReferenceError in a Service Worker!
{
}
{ ->
}
{ ->
}
Kotlin/JS - Main.kt
Reference to Service Worker scope
Implementing the Service Worker
Kotlin/JS - Installing Service Worker
->
it
Reference to Service Worker scope
Kotlin/JS - Implementing oine cache
{ ->
{
it
it
}
}
Calling your HTTP API with Kotlin/JS
Kotlinx.serialization + ktor client
{
}
{
}
Kitten API response
Kotlin data classes
kotlinx.serialization
Ktor client + kotlinx.serialization
{
}
Kotlin/JS & Coroutines
JavaScript - async/await
navigator
console
console
Kotlin/JS - Coroutines
Promises.kt
{ ->
{
it}
{
it}
}
Kotlin/JS UI
kotlinx.html
kotlinx.html
{
{ }
{
}
}
kotlinx.html
{ }
React
React
{
}
{
}
Create a React/Kotlin app
NPM packages
{
{
}
{
}
}
NPM dependencies in Gradle?!?
Declare the API in Kotlin
Use the JavaScript library in Kotlin
{ it}
{ it}
{ it}
{ it}
{
it
}
...using coroutines
Impossible to convert to Kotlin?
to the rescue!
can
call
anything
without
compile
error
Dukat
Experimental!!!
gradle.properties
Generate externals task
left-pad/index.d.ts
Generated externals: index.module_left-pad.kt
Is Kotlin/JS ready for production use?
“It depends…”
Conclusions
● JavaScript output can be very big
● Kotlin wrappers needed
● Undocumented build system
● Missing code splitting (for Service Workers etc.)
● Looks promising!
The state of Kotlin/JS - 13:00 Today!
#KotlinConf
THANK YOU
AND
REMEMBER
TO VOTE
Erik Hellman @ErikHellman
