Kotlin en la Web: Creando una completa paso a paso

Embárcate en un viaje práctico a través del desarrollo web con Kotlin. Desde la creación de una interfaz de usuario atractiva hasta la implementación de la capa de persistencia, pasando por la integración de APIs y el despliegue final.

Esta charla te guiará paso a paso en la construcción de una aplicación web completa, revelando las mejores prácticas y trucos para aprovechar al máximo las capacidades de Kotlin en el desarrollo web.

Transcript

1. Kotlin en la Web Creando una App completa paso a paso Antonio Leiva (Formador, GDE Android y Kotlin)
2. 📅 Agenda
3. 📅 Agenda 1. ­ 🦋 Historia y Evolución
4. 📅 Agenda 1. ­ 🦋 Historia y Evolución 2. ­ 🌐 Compose Multiplatform para Web
5. 📅 Agenda 1. ­ 🦋 Historia y Evolución 2. ­ 🌐 Compose Multiplatform para Web 3. ­ 📚 Ecosistema de Librerías
6. 📅 Agenda 1. ­ 🦋 Historia y Evolución 2. ­ 🌐 Compose Multiplatform para Web 3. ­ 📚 Ecosistema de Librerías 4. ­ 🚀 Demo y Conclusiones
7. 🥳 Kotlin/JS: El Primer Acercamiento ¿Qué es Kotlin/JS?
8. 🥳 Kotlin/JS: El Primer Acercamiento ¿Qué es Kotlin/JS? ­ Transpila código Kotlin a JavaScript
9. 🥳 Kotlin/JS: El Primer Acercamiento ¿Qué es Kotlin/JS? ­ Transpila código Kotlin a JavaScript ­ Permite usar Kotlin en navegadores web
10. 🥳 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
11. Kotlin/JS: Características Ventajas:
12. Kotlin/JS: Características Ventajas: ­ Tipos estáticos y null-safety
13. Kotlin/JS: Características Ventajas: ­ Tipos estáticos y null-safety ­ Corrutinas para asincronía
14. Kotlin/JS: Características Ventajas: ­ Tipos estáticos y null-safety ­ Corrutinas para asincronía ­ DSLs para HTML y CSS
15. Kotlin/JS: Características Ventajas: ­ Tipos estáticos y null-safety ­ Corrutinas para asincronía ­ DSLs para HTML y CSS ­ Acceso al DOM tipado
16. 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)
17. 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" }
18. Ejemplo de dependencias de Node En el build.gradle.kts dependencies { implementation(npm("react", "> 14.0.0 <=16.9.0")) }
19. 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.
20. Entornos de ejecución kotlin { js { browser { // ... } } }
21. Entornos de ejecución kotlin { js { nodejs { // ... } } }
22. Kotlin para JS: Ejemplos rápidos Usar código JavaScript con js(): fun printHello() { js("console.log('Hello, Kotlin/JS!')") }
23. 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
24. 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))
25. 🎯 Kotlin/WASM: El nuevo target Actualmente en Alpha
26. 🎯 Kotlin/WASM: El nuevo target Actualmente en Alpha ­ Aplica todo lo que sabemos de Kotlin/JS
27. 🎯 Kotlin/WASM: El nuevo target Actualmente en Alpha ­ Aplica todo lo que sabemos de Kotlin/JS ­ ¿Por qué fue creado? 🤔
29. 🛠️ Kotlin/WASM: Compose Multiplatform Soporte en Alpha
30. 🛠️ Kotlin/WASM: Compose Multiplatform Soporte en Alpha ­ Permite usar Compose en el frontend web
31. 🛠️ Kotlin/WASM: Compose Multiplatform Soporte en Alpha ­ Permite usar Compose en el frontend web ­ Reutiliza el código de otros targets (Android, iOS, Desktop)
32. 🛠️ 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
33. 📚 Kotlin/WASM: ¿Qué librerías usamos? Compose Multiplatform: Frontend web
34. 📚 Kotlin/WASM: ¿Qué librerías usamos? Compose Multiplatform: Frontend web ­ Arquitectura de UI: MVVM con ViewModels de Android
35. 📚 Kotlin/WASM: ¿Qué librerías usamos? Compose Multiplatform: Frontend web ­ Arquitectura de UI: MVVM con ViewModels de Android ­ Ktor Client: HTTP client
36. 📚 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
37. 📚 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
38. 📚 Kotlin/WASM: ¿Qué librerías usamos? Coil: Carga de imágenes
39. 📚 Kotlin/WASM: ¿Qué librerías usamos? Coil: Carga de imágenes ­ SqlDelight: base de datos (aún en desarrollo)
40. 📚 Kotlin/WASM: ¿Qué librerías usamos? Coil: Carga de imágenes ­ SqlDelight: base de datos (aún en desarrollo) ­ KStore: Almacenamiento en ficheros
41. 📚 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
42. Vamos al lío: Demo 🚀
43. 🙋‍♀️🙋‍♂️ ¿Preguntas? 🌐 🎥 🐦 🦋 https://devexpert.io @devexpert_io @devexpert_io @antonioleiva.com