Kotlin en la Web
Creando una App completa paso a paso
Antonio Leiva
(Formador, GDE Android y Kotlin)
Slide 2
Slide 2 text
📅 Agenda
Slide 3
Slide 3 text
📅 Agenda
1.
🦋 Historia y Evolución
Slide 4
Slide 4 text
📅 Agenda
1.
🦋 Historia y Evolución
2.
🌐 Compose Multiplatform para Web
Slide 5
Slide 5 text
📅 Agenda
1.
🦋 Historia y Evolución
2.
🌐 Compose Multiplatform para Web
3.
📚 Ecosistema de Librerías
Slide 6
Slide 6 text
📅 Agenda
1.
🦋 Historia y Evolución
2.
🌐 Compose Multiplatform para Web
3.
📚 Ecosistema de Librerías
4.
🚀 Demo y Conclusiones
Slide 7
Slide 7 text
🥳 Kotlin/JS: El Primer Acercamiento
¿Qué es Kotlin/JS?
Slide 8
Slide 8 text
🥳 Kotlin/JS: El Primer Acercamiento
¿Qué es Kotlin/JS?
Transpila código Kotlin a JavaScript
Slide 9
Slide 9 text
🥳 Kotlin/JS: El Primer Acercamiento
¿Qué es Kotlin/JS?
Transpila código Kotlin a JavaScript
Permite usar Kotlin en navegadores web
Slide 10
Slide 10 text
🥳 Kotlin/JS: El Primer Acercamiento
¿Qué es Kotlin/JS?
Transpila código Kotlin a JavaScript
Permite usar Kotlin en navegadores web
Interoperabilidad con librerías JavaScript existentes
Slide 11
Slide 11 text
Kotlin/JS: Características
Ventajas:
Slide 12
Slide 12 text
Kotlin/JS: Características
Ventajas:
Tipos estáticos y null-safety
Slide 13
Slide 13 text
Kotlin/JS: Características
Ventajas:
Tipos estáticos y null-safety
Corrutinas para asincronía
Slide 14
Slide 14 text
Kotlin/JS: Características
Ventajas:
Tipos estáticos y null-safety
Corrutinas para asincronía
DSLs para HTML y CSS
Slide 15
Slide 15 text
Kotlin/JS: Características
Ventajas:
Tipos estáticos y null-safety
Corrutinas para asincronía
DSLs para HTML y CSS
Acceso al DOM tipado
Slide 16
Slide 16 text
Kotlin/JS: Características
Ventajas:
Tipos estáticos y null-safety
Corrutinas para asincronía
DSLs para HTML y CSS
Acceso al DOM tipado
Dependencias de Node (con npm)
Slide 17
Slide 17 text
Ejemplo de DOM tipado
import kotlinx.browser.document
fun main() {
document
.getElementById("my-element")
?.textContent = "Hello, Kotlin/JS!"
val email = document.getElementById("email") as HTMLInputElement
email.value = "hadi@jetbrains.com"
}
Slide 18
Slide 18 text
Ejemplo de dependencias de Node
En el build.gradle.kts
dependencies {
implementation(npm("react", "> 14.0.0 <=16.9.0"))
}
Slide 19
Slide 19 text
Entornos de ejecución
Browser: para desarrollo de clientes web.
Node.js: para ejecutar código JavaScript fuera de un navegador
web, por ejemplo, para un servidor web.
Kotlin para JS: Ejemplos rápidos
Usar código JavaScript con js():
fun printHello() {
js("console.log('Hello, Kotlin/JS!')")
}
Slide 23
Slide 23 text
Kotlin para JS: Ejemplos rápidos
Modificador external:
external fun alert(message: Any?): Unit
external class Node {
val firstChild: Node
fun append(child: Node): Node
fun removeChild(child: Node): Node
}
external val window: Window
Slide 24
Slide 24 text
Kotlin para JS: Ejemplos rápidos
Tipo dinámico (dynamic), para interoperar con sistemas no
tipados:
val dyn: dynamic = ...
dyn.whatever(1, "foo", dyn)
dyn.whatever(*arrayOf(1, 2, 3))
Slide 25
Slide 25 text
🎯 Kotlin/WASM: El nuevo target
Actualmente en Alpha
Slide 26
Slide 26 text
🎯 Kotlin/WASM: El nuevo target
Actualmente en Alpha
Aplica todo lo que sabemos de Kotlin/JS
Slide 27
Slide 27 text
🎯 Kotlin/WASM: El nuevo target
Actualmente en Alpha
Aplica todo lo que sabemos de Kotlin/JS
¿Por qué fue creado?
🤔
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
🛠️ Kotlin/WASM: Compose Multiplatform
Soporte en Alpha
Slide 30
Slide 30 text
🛠️ Kotlin/WASM: Compose Multiplatform
Soporte en Alpha
Permite usar Compose en el frontend web
Slide 31
Slide 31 text
🛠️ Kotlin/WASM: Compose Multiplatform
Soporte en Alpha
Permite usar Compose en el frontend web
Reutiliza el código de otros targets (Android, iOS, Desktop)
Slide 32
Slide 32 text
🛠️ Kotlin/WASM: Compose Multiplatform
Soporte en Alpha
Permite usar Compose en el frontend web
Reutiliza el código de otros targets (Android, iOS, Desktop)
Muy enfocado en WebApps
Slide 33
Slide 33 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Compose Multiplatform: Frontend web
Slide 34
Slide 34 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Compose Multiplatform: Frontend web
Arquitectura de UI: MVVM con ViewModels de Android
Slide 35
Slide 35 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Compose Multiplatform: Frontend web
Arquitectura de UI: MVVM con ViewModels de Android
Ktor Client: HTTP client
Slide 36
Slide 36 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Compose Multiplatform: Frontend web
Arquitectura de UI: MVVM con ViewModels de Android
Ktor Client: HTTP client
Kotlinx.serialization: Serialización/deserialización de datos
Slide 37
Slide 37 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Compose Multiplatform: Frontend web
Arquitectura de UI: MVVM con ViewModels de Android
Ktor Client: HTTP client
Kotlinx.serialization: Serialización/deserialización de datos
Kotlinx.coroutines: Asincronía
Slide 38
Slide 38 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Coil: Carga de imágenes
Slide 39
Slide 39 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Coil: Carga de imágenes
SqlDelight: base de datos (aún en desarrollo)
Slide 40
Slide 40 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Coil: Carga de imágenes
SqlDelight: base de datos (aún en desarrollo)
KStore: Almacenamiento en ficheros
Slide 41
Slide 41 text
📚 Kotlin/WASM: ¿Qué librerías usamos?
Coil: Carga de imágenes
SqlDelight: base de datos (aún en desarrollo)
KStore: Almacenamiento en ficheros
Koin: Inyección de dependencias