点击上方“芋道源码”，选择“设为星标”
管她前浪，还是后浪？
能浪的浪，才是好浪！

每天 10:33 更新文章，每天掉亿点点头发...
源码精品专栏
来源：程序员编程
看到一款基于多端的 UI 调试工具，一套代码适应多端，真的是太棒了，下面分享给大家。

1、前言

该工具是大名鼎鼎的 JetBrains 公司新推出的，名曰：“Jetpack Compose for Web ”，官方介绍称此项目基于 Google 现代 UI 工具包 Jetpack Compose，支持使用 Kotlin 编写响应式 Web UI。
Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。
UI 代码和预览如下图所示：
据介绍，Jetpack Compose for Web 可简化并加速 Web 应用的 UI 开发，目标是在 Web、桌面和 Android APP 之间实现 UI 代码共享，一套代码适应多端。目前处于技术预览阶段。
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

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能。
项目地址：https://github.com/YunaiV/ruoyi-vue-pro

2、使用 Compose for Web 构建用户界面

借助 Compose for Web，开发者通过使用 Kotlin 并应用 Jetpack Compose 的概念和 API 为 Web 构建响应式用户界面，以表达应用程序的状态、行为和逻辑。
可组合的 DOM API
  • 通过 DOM 元素和 HTML 标签表达设计和布局
  • 使用类型安全的 HTML DSL 构建 UI 表示形式
  • 通过使用类型安全的 CSS DSL 创建样式表来完全控制应用程序的外观
  • 通过 DOM 子树与其他 JavaScript 库集成
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!"
)

        }

    }

}

具有 Web 支持的多平台小部件
  • 通过利用 Kotlin 的 Expect-actual 机制来提供特定于平台的实现，从而使用和构建可在 Android、桌面和 Web 上运行的 Compose 小部件
  • 处于实验性阶段的一组布局原语 (layout primitives) 和API，这些原语和 API 与 Compose for Desktop/Android 的功能相似
基于微服务的思想，构建在 B2C 电商场景下的项目实战。核心技术栈，是 Spring Boot + Dubbo 。未来，会重构成 Spring Cloud Alibaba 。
项目地址：https://github.com/YunaiV/onemall

3、示例代码

使用 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(
"+"
)

        }

    }

}

声明和使用样式表
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()

    }

}

声明和使用 CSS 变量
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!"
)

        }

    }

}

欢迎加入我的知识星球，一起探讨架构，交流源码。加入方式，
长按下方二维码噢
：

已在知识星球更新源码解析如下：

最近更新《芋道 SpringBoot 2.X 入门》系列，已经 101 余篇，覆盖了 MyBatis、Redis、MongoDB、ES、分库分表、读写分离、SpringMVC、Webflux、权限、WebSocket、Dubbo、RabbitMQ、RocketMQ、Kafka、性能测试等等内容。
提供近 3W 行代码的 SpringBoot 示例，以及超 4W 行代码的电商微服务项目。
获取方式：点“在看”，关注公众号并回复 666 领取，更多内容陆续奉上。
文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）
继续阅读
阅读原文