Kuikly自研DSL初体验：让UI开发更简洁优雅
本文是关于Kuikly自研DSL的初体验文章，简单介绍了其语法特点和与Compose DSL的差异，并实践了用AI生成Kuikly页面的可行性，不含深入的架构和原理性分析，望道友知晓。
1、引子
哈喽，各位道友们！上一篇文章我们进行了一场"跨端框架大乱斗"，最终我们选择了Kuikly作为我们"孤寡青蛙"App的归宿。那么，从这篇文章开始，我们就正式进入"孤寡青蛙"的开发实战了！
在正式开始之前，我们先来聊聊Kuikly的UI开发方式。如果你之前了解过Compose、Flutter或者SwiftUI，那你对DSL（领域特定语言）一定不陌生。Kuikly也采用了类似的声明式UI开发方式，不过特殊的是，Kuikly同时支持两种DSL：
你可能会问："既然已经有了Kuikly DSL，为什么还要支持Compose DSL呢？"
从Kuikly的官方介绍来看，Kuikly框架最初是基于自研的DSL构建。这套DSL与框架深度绑定，能提供最极致的性能和最贴合框架特性的开发体验。而引入Compose DSL，更像是为了拥抱更广泛的开发者生态。毕竟Compose的声明式UI写法已经深入人心，提供Compose的DSL支持能让熟悉Compose的开发者更快上手。尤其是在当下Vibe Coding时代，由于Compose DSL的训练素材更多，因此对AI来说写起来理论上错误率更低。不过，本着学习和探索的精神，我们今天先体验的，还是原汁原味的Kuikly DSL。
需要注意的是，截至目前（2025年9月2日），Kuikly开源的Compose DSL是Beta版状态。=> Kuikly官方文档说明
那么，让AI写Kuikly的这套DSL到底好不好用？跟Compose DSL比又有什么区别？走，一起瞧瞧。
2、Kuikly DSL语法特点
Kuikly的DSL语法，给我的第一感觉就是：简洁、直观。我们先来看一段用Kuikly DSL写的Hello World：
kotlin
internal class HelloWorldPage : Pager() {
override fun body(): ViewBuilder {
return {
attr {
allCenter()
}
Text {
attr {
text("Hello Kuikly")
fontSize(14f)
}
}
}
}
}怎么样？是不是接近代码即文档的理想状态了，一眼就能看明白这个页面是干嘛的。
总的来说，Kuikly DSL在很大程度上借鉴了Compose DSL的语法，所以如果你有Compose的开发经验，上手Kuikly几乎是零成本。但是在一些细节上，Kuikly还是做了一些自己的优化和取舍。比如在属性的写法上，相比Compose的Modifier，Kuikly的方式更加简洁一些。在布局方面，Kuikly采用了更符合Web开发习惯的布局方式------Flexbox布局，可以直接写"flex(1f)"这种语法，这对于前端开发者或者熟悉RN开发的同学来说会更亲切。
3、实际使用示例
光说不练假把式！我们还是回到"孤寡青蛙"项目，来看看Kuikly DSL在实际项目中的表现。首先，跟着官网文档指引，让我们新建一个Kuikly的模版项目：
注意在选择DSL时，要选择"Kuikly"而不是"Compose"：
下一步，插件就帮我们生成好了一个简单的Kuikly Hello World项目，可以看到其中已经包含了5个平台对应的目录：
ok，接下来重点来了，依旧是让AI帮我们实现"孤寡青蛙"的首页。
我们先给AI一段详细的提示词（prompt），注意其中我们反复强调了不能使用Compose DSL，不然它总会忘记...
下面是AI的表演时刻： 
一顿操作后，AI完成了代码生成，还不忘总结了一下首页生成的技术亮点👍：
让我们看看它写出的代码：
和上次试用Compose一样，也是出现了一些包的导入问题，不过都比较好处理，我们直接删掉这些不存在的包，让IDE辅助自动导入。
代码主要内容情况：
嗯，代码看起来还是比较清晰的，可读性非常好。同时编译问题也不多，AI仅幻觉了少数不存在的布局语法。
让我们运行看看效果：
嗯，非常好！相比之前我们让AI用Compose DSL写的首页，UI还原度更高了。
4、开发体验与踩坑记录
开发体验方面，Kuikly的IDE支持做得还不错，从项目创建到代码编写和最后运行，整个过程非常顺滑，全程直接在Android Studio里完成。同时代码提示、语法高亮、自动补全等功能都一应俱全。当然，最让我感觉牛的还是它的跨端能力。同一套代码，不需要任何修改，就能直接在Android、iOS、H5、鸿蒙、小程序上跑起来。
当然，没有任何一个框架是完美的，Kuikly也不例外。比如，刚开始的时候，我对Kuikly的布局方式有点不适应，特别是它的一些独有的布局属性，需要花点时间去学习和理解。此外由于Kuikly还是一个比较新的框架，社区生态还不是很完善，有些问题在网上找不到现成的答案，需要自己去摸索。不过，好在Kuikly的官方文档写得还算详细，而且官方的技术支持也很给力。
那么，什么情况下推荐使用Kuikly呢？
- 新项目：如果你要从零开始一个新项目，并且希望它能跨多个平台，那Kuikly绝对是一个不错的选择。
- Android开发者：如果你本身就是Android开发者，熟悉Kotlin和Compose，那上手Kuikly几乎是无缝衔接。
- 追求极致性能：如果你对应用的性能有很高的要求，希望它能媲美原生应用，那Kuikly的Native执行+原生渲染方案会让你满意。
当然，如果你的项目已经很成熟，或者你的团队主要是前端开发者，那可能需要评估一下迁移成本和学习曲线。
5、总结
总的来说，Kuikly的这套自研DSL给我留下了非常不错的印象。它既保留了Compose DSL的简洁优雅，又在一些细节上做了优化，提供了更简单、更直观的开发体验。当然，作为一个新框架，Kuikly还有很多需要完善的地方，比如生态这块相对还比较薄弱。当然了，面对新框架我们需要多一些耐心，我相信随着Kuikly的不断迭代和社区的不断壮大，未来它应该会成为跨端领域一个不可忽视的力量。
ok，今天就简单聊到这里。下一篇文章，我们将在AI的辅助下，正式进入"孤寡青蛙"主体的功能开发，敬请期待！