Inicio Noticias Jetpack Compose For Web - Llevando orden al caos

Jetpack Compose For Web – Llevando orden al caos

La saga Jetpack Compose continúa con su última entrega, Web, que es un intento de unificar el desarrollo en plataformas Android, de escritorio y web. Componga esto, Componga aquello, es fácil perder la pista. ¡Así que pongamos este caos en orden!

El punto de partida fue el kit de herramientas Jetpack Compose UI para Android, lo que significaba que se podía escribir mucho menos código UI de forma declarativa. Lo expliqué en Android Jetpack Compose es bienvenido, pero ¿qué pasa con la deserción? en septiembre de 2020. Esa fue la versión Alpha.

En noviembre de 2020, Jetpack Compose para escritorio se lanzó en su versión Milestone 1, destinada a simplificar y acelerar el desarrollo de la interfaz de usuario para aplicaciones de escritorio al permitir el uso compartido extendido del código de la interfaz de usuario entre Android y aplicaciones de escritorio. Este fue el tema de Introducción a Jetpack Compose para escritorio, donde examiné si una base de código compartida al 100% en diferentes plataformas es un sueño inútil o no. Compose Desktop ha prometido que puede compartir conocimientos y gran parte del código de la interfaz de usuario escrito para Android en, por ejemplo, Windows, sin ningún problema. Hasta cierto punto, esto se confirma en la realidad.

En diciembre de 2020, hubo el Milestone 2 para Jetpack Compose Desktop que trajo actualizaciones como la introducción de una capa de interoperabilidad Swing, para que los desarrolladores puedan combinar elementos Compose con elementos Swing regulares para reducir la fricción durante la migración de sus aplicaciones existentes a Compose for Desktop. Consulte Jetpack Compose para Desktop Milestone 2 para obtener más detalles.

Luego, en marzo de 2021, se lanzó la versión beta de Compose UI,
considerado tan estable que puede escribir aplicaciones listas para producción con él. También agregó soporte para Coroutine, Input y Gestures, y una nueva API de animación. Consulte el kit de herramientas de interfaz de usuario de Google Jetpack Compose ahora en versión beta para obtener más información.

Parece que el tren de Compose es imparable y ahora también tenemos Compose para la Web (una vista previa de tecnología), que esta vez tiene como objetivo permitir el mismo código de interfaz de usuario compartido entre aplicaciones de escritorio, Android y web. SDK de desarrollo de plataforma proporcionado por JetBrains, que es la tecnología que admite el uso compartido de código.

El desarrollo del navegador en Compose Web se realiza mediante la API de DOM Composable, que le brinda un control total sobre el modelo de objetos de documento. Usted especifica el estado, el comportamiento y la lógica de su interfaz de usuario receptiva utilizando los conceptos de Jetpack Compose, pero expresa su diseño y diseño en Compose DSL construyendo y definiendo elementos HTML.

En otras palabras, exprese su código HTML como:

fun main () {renderComposable (“root”) {plataforma var para recordar {
mutableStateOf (“una plataforma”)} P {Text (“¡Bienvenido a Redactar para $ plataforma!”) Botón (attrs = {onClick {plataforma = “Web”}}) {Texto (“… ¿para qué?”)} } A (“https://www.jetbrains.com/lp/compose-web”) {Text (“¡Más información!”)}}}

El otro punto de venta es que puede usar widgets multiplataforma que imitan la funcionalidad que ya conoce de Jetpack Compose para escritorio y Android en la versión web. Aproximando el comportamiento de las implementaciones basadas en lienzo utilizadas en los otros objetivos de Jetpack Compose, el Se recrea la apariencia de los componentes por encima del DOM, obviamente bajo las limitaciones del motor de diseño del navegador.

Sin embargo, aunque puede reutilizar el estado y el comportamiento de su aplicación desde otras plataformas en esta versión de vista previa de la web, no puede reutilizar los widgets existentes directamente. Afortunadamente, existe una solución a través del mecanismo de retención / efectividad de Kotlin Multiplatform que puede usar para crear sus propios widgets comunes con implementaciones para las tres plataformas, lo que permite una verdadera reutilización en dispositivos móviles, computadoras de escritorio y web.

Sin embargo, esto en esencia significa que debido a que las plataformas son diferentes, no es posible abstraerlo todo. En algún momento u otro, debe cambiar a una plataforma específica, y en lo que respecta a Kotlin, Jetpack Compose Desktop cumple este caso al exponer las API relevantes de las plataformas subyacentes.

Y aquí viene el mecanismo de espera / real de Kotlin, que es como una interfaz y su implementación. Usted define “diversión intencionada” que contiene el formato de API general y usa “diversión real” para proporcionar la implementación específica de la plataforma.

En cuanto a la parte de renderizado, está previsto habilitar el renderizado en Skia, el motor de gráficos 2D utilizado en Google Chrome, a través de Skiko (Skia para Kotlin).

Juego de Falling Balls

Ahora puedes experimentar con la web siguiendo las instrucciones Introducción a Compose para la web. Para ayudarte a comprender mejor, Jetbrains ha publicado el código fuente de Compose para la página de destino web y el del juego The Falling Balls, ambos escritos con componer para la web. El primero es un ejemplo de una API DOM componible y una hoja de estilo DSL, mientras que el segundo es un ejemplo que demuestra el uso de widgets multiplataforma, compartiendo código UI entre Compose para escritorio y Web.

Marc Gomez
Vine a por tabaco y ya me quedé aquí. Cuando no estoy en el sótano de Tecnopasion suelo pasear por las calles de Barcelona.
RELATED ARTICLES

Dejar respuesta

Please enter your comment!
Please enter your name here