It’s great to see a multi-terminal BASED UI debugging tool with one set of code for multi-terminal, so let’s share it with you.

1, the preface

It’s a new tool from a company called JetBrains. It’s called: “Jetpack Compose for the Web”, the project is based on Google’s modern UI toolkit Jetpack Compose, which allows you to write responsive Web UIs using Kotlin.

Jetpack Compose is a new Android toolkit for building native interfaces. It simplifies and speeds up interface development on Android. Use less code, powerful tools, and an intuitive Kotlin API to make your application lively and exciting quickly.

The UI code and preview are shown below:Jetpack Compose for The Web simplifies and speeds up UI development for Web applications. The goal is to share UI code between the Web, desktop, and Android apps. It is currently in technical preview.

fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random()

renderComposable("greetingContainer") {
    var greeting by remember { mutableStateOf(greet()) }
    Button(attrs = { onClick { greeting = greet() } }) {
        Text(greeting)
    }
}
Result: Servus
Copy the code

2, Compose for Web to build user interface

With Compose for Web, developers build a responsive user interface for the Web by using Kotlin and applying the Jetpack Compose concept and API to express the state, behavior, and logic of the application.

Composable DOM API

  • Express design and layout through DOM elements and HTML tags
  • Build UI representations using type-safe HTML DSLS
  • Create style sheets using type-safe CSS DSLS to give you complete control over the appearance of your application
  • Integrate with other JavaScript libraries through DOM subtrees
fun main() {
    renderComposable("root") {
        var platform by remember { mutableStateOf("a platform") }
        P {
            Text("Welcome to Compose for $platform! ")
            Button(attrs = { onClick { platform = "Web" } }) {
                Text("...for what?")
            }
        }
        A("https://www.jetbrains.com/lp/compose-web") {
            Text("Learn more!")
        }
    }
}
Copy the code

Multi-platform widgets with Web support

  • Use and build the Compose widget that runs on Android, the desktop, and the Web by leveraging Kotlin’s Expect-actual mechanism to provide a platform-specific implementation
  • An experimental set of layout primitives and apis that are similar to Compose for Desktop/Android

3. Sample code

Write simple counters using the Composable DOM

fun main() {
    val count = mutableStateOf(0)
    renderComposable(rootElementId = "root") {
        Button(attrs = {
            onClick { count.value = count.value - 1 }
        }) {
            Text("-")
        }
        Span(style = { padding(15.px) }) { /* we use inline style here */
            Text("${count.value}")
        }
        Button(attrs = {
            onClick { count.value = count.value + 1 }
        }) {
            Text("+")
        }
    }
}
Copy the code

Declare and use style sheets

object MyStyleSheet : StyleSheet() { val container by style { /* define a class `container` */ border(1.px, LineStyle.Solid, Color.RGB(255, 0, 0)) } } @Composable fun MyComponent() { Div(attrs = { classes(MyStyleSheet.container) /* use `container` class */ }) { Text("Hello world!" ) } } fun main() { renderComposable(rootElementId = "root") { Style(MyStyleSheet) /* mount the stylesheet */ MyComponent() } }Copy the code

Declare and use CSS variables

object MyVariables : CSSVariables { val contentBackgroundColor by variable<Color>() /* declare a variable */ } object MyStyleSheet: StyleSheet() { val container by style { MyVariables.contentBackgroundColor(Color("blue")) /* set its value */ } val content by style { backgroundColor(MyVariables.contentBackgroundColor.value()) /* use it */ } } @Composable fun MyComponent() { Div(attrs = { classes(MyStyleSheet.container) }) { Span(attrs = { classes(MyStyleSheet.content) }) { Text("Hello world!" )}}}Copy the code

Source | programmers programming