说明:本文是关于Kuikly自研DSL基础组件实战的文章,通过分析"孤寡青蛙"App主界面来介绍页面写法、组件使用和布局系统,重点展示DSL语法特点和基础组件的实际应用,不含深入的架构和原理性分析,望道友知晓 引子各位道友,上回我们体验了Kuikly自研DSL的优雅,是不是已经摩拳擦掌,准备大干一场了?别急,饭要一口一口吃,代码要一行一行写(虽然主要是AI帮我们写的,但我们还是要理解每一行代码的含义)。 今天,我们就从最基础的组件开始,逐步Review下AI实现的"孤寡青蛙"的主界面,看看Kuikly的页面写法、组件写法和布局系统。正所谓"万丈高楼平地起",打好基础才能让我们的App更稳固。 Kuikly页面写法页面定义在Kuikly中,页面通过@Page注解和继承BasePager来定义:@Page("FrogMain", supportInLocal = true)internal class 下一篇文章,我们将深入学习Kuikly的交互和动画特性。敬请期待!
Kuikly 是腾讯大前端领域 Oteam(公司级)推出的,面向客户端开发的全新跨端解决方案。 2.1 与原生性能对比(高中低端机) Kuikly 开发的页面首屏耗时,与原生基本一致; 在内存方面,由于 Kuikly 基于 KMP 编译及原生渲染,无额外引擎引入,内存增量与原生相差不大。 Kuikly测试数据基于复杂 Feeds 流 Demo 测试,Demo代码已包含在开源代码中 2.2 与其他框架性能对比: 从整体看,Kuikly 在启动和内存上都具有更好的表现。 实际效果一览 通过与原生录屏对比,可以看到 Kuikly 和原生在体验上几乎没有差别。 Android: 从左至右分别是:原生、Kuikly-内置和Kuikly-动态化。 iOS: 从左至右分别是:原生、Kuikly-内置和Kuikly-动态化。 3.
Kuikly迭代加速,框架能力持续增强完善 自开源以来,Kuikly框架始终以GitHub作为迭代仓库,保持快速版本迭代,并持续进化。 我们将邀请您参与项目规划等核心会议,成为 Kuikly 发展的“决策参与者” Kuikly专属礼品奖励: 除荣誉激励外,我们还设立了 Kuikly 专属实物礼品奖励,旨在给予贡献者更及时、更直接的鼓励与回馈 贡献参与指引:从这里开始,与 Kuikly 共同成长 无论你是刚接触 Kuikly,还是具有丰富经验的“Kuikly老手”来说,都可以通过以下方式参与到社区建设中,为Kuikly生态添砖加瓦。 或者有意持续参与贡献的开发者,可与Kuikly核心团队建立联系,一起参与Kuikly框架规划、新特性开发等。 ● 第二步,将三方社区的分享,按照Kuikly-third-party指引,提交到Kuikly社区。 欢迎将你的技术实践文章分享给我们!
Kuikly是怎么做到一码五端的Kuikly实现了 "一码五端" 的开发能力,那么Kuikly是怎么做到又快又好的呢? 一、Kuikly技术的基石Kuikly是基于JetBrain公司推出的KMM(Kotlin Multiplatform Mobile,现更名为 KMP)跨平台技术方案。 这些技术特性就是 Kuikly 的核心技术基石。 Kuikly的编译产物实际上和原生平台构建生成的产物没有区别,所以Kuikly可以有像原生开发般的性能。 RN 则是在运行时转换为原生控件,这种运行时转换肯定就不如Kuikly的原生编译产物性能好了。 四、小结总体来说,Kuikly也是一种类RN框架,但是Kuikly比RN做的更好。
上一篇文章,我们用 Kuikly 快速搞定了“孤寡青蛙”App,一码五端跑起来的感觉确实丝滑。 Kuikly 在此基础上还自研了一套 DSL,语法更贴近 UI 描述,非常简洁。 Kuikly 则在性能和 UI 表现上取得了更好的平衡。它不仅拥有接近原生的性能,还能更好地融入现代操作系统的设计语言,是追求极致体验下的不二之选。为什么“孤寡青蛙”选择 Kuikly? 回到我们的项目,选择 Kuikly 主要基于以下几点考虑:技术栈亲和:作为一名 Android 开发者,Kotlin 是我最熟悉的语言,使用 Kuikly 几乎没有学习成本。 Kuikly 作为一个新兴框架,我们很乐意去尝试并分享我们的使用体验。
Kuikly自研DSL初体验:让UI开发更简洁优雅本文是关于Kuikly自研DSL的初体验文章,简单介绍了其语法特点和与Compose DSL的差异,并实践了用AI生成Kuikly页面的可行性,不含深入的架构和原理性分析 Kuikly也采用了类似的声明式UI开发方式,不过特殊的是,Kuikly同时支持两种DSL:自研DSL(称之为Kuikly DSL)类似Compose的DSL(简单称之为Compose DSL)你可能会问 2、Kuikly DSL语法特点Kuikly的DSL语法,给我的第一感觉就是:简洁、直观。 首先,跟着官网文档指引,让我们新建一个Kuikly的模版项目:注意在选择DSL时,要选择“Kuikly”而不是“Compose”:下一步,插件就帮我们生成好了一个简单的Kuikly Hello World 参考Kuikly官方文档Kuikly GitHub仓库
一、Kuikly初体验1.1 Kuikly简介在移动应用开发领域,跨平台解决方案一直是行业追求的目标。 Kuikly官网给出了详细的上手教程,接下来我们来深入体验Kuikly流畅的开发过程吧。1.2 环境搭建工欲善其事,必先利其器! 首先跟着Kuikly详细的官方教程,把开发环境搭建好,并编写Kuikly的第一个“Hello,Kuikly”页面Kuikly是基于Kotlin MultiPlatform(KMP)实现的一套跨平台应用框架 目前Kuikly Android Studio插件提供了以下功能新建Kuikly业务工程: 一键生成Kuikly业务工程与 Android/iOS/Ohos App 宿主工程,自动集成Kuikly依赖等新建 那么,Kuikly会是你跨端的第一选择吗?
测出Kuikly的FCP耗时仅为87.76ms,不到其他框架的一半。 3 其他优势 在H5平台上与主流跨端框架对比,Kuikly还具有以下优势: 1. 四、整体技术方案 1.Kuikly的架构设计回顾 简单回归一下Kuikly的整体架构,跨端Core层处理框架核心逻辑,Render层负责不同平台渲染。 Kuikly渲染流程的优化。 如下图: 目前Kuikly适配微信小程序的方案在性能上仍有不少优化空间,后续我们会探索编译Kuikly产物为WASM, 使用预编译等方式优化Kuikly在微信小程序平台的体验。 2.探索使用WASM提升计算密集型任务的执行效率,优化Kuikly Web版的使用体验 3.扩大Kuikly Web版支持范围,下半年将开源Electron环境的适配 立即体验 Kuikly,加入开源社区
Kuikly 足以被称为“及时雨”吗,实际成效如何?我们采访了 Kuikly 的一些腾讯客户,他们用“多”、“快”、“活”、“易”四个字概括了对 Kuikly 的评价。 “ Kuikly极大地提高了我们的开发效率 ” QQ 浏览器平台技术中心终端 Tech Lead 陈超铭表示,浏览器鸿蒙版完全基于 Kuikly 框架开发,并且部分页面已回源至安卓、iOS 端,实现三端复用 这一点,Kuikly 在设计之初就考虑到了。 基于 Kuikly 的动态化更新能力及其高性能表现,应用宝在多个活动场景深度使用 Kuikly,客户端 Leader 黄小燕表示: “我们活动运营很强调实时发布、实时生效,Kuikly 的高性能以及灵活的发布特性很好地满足了这一点 关于Kuikly 当前 Kuikly 已经开源,有兴趣和有需要的产品,可以通过以下方式了解详情或接入体验: 1.进入腾讯端服务联盟:tds.qq.com 2.主页访问 Kuikly 官网:framework.tds.qq.com
拓展Kuikly原生API的能力在Kuikly开发中, 经常会有需要调用平台API的诉求, Kuikly是一个跨端的UI框架,本身不具备平台相关的能力,但是Kuikly提供了Module机制,方便你调用平台的 根据Kuikly详细的官方文档扩展原生API,下面我们以打印日志作为例子,来看Kuikly如何通过Module机制来访问平台的API。 要想将Native的API暴露给Kuikly使用,需要做以下工作:Kuikly侧:1、新建XXXModule类并继承Module,编写API暴露给业务方使用2、在Pager的子类中,注册新创建的ModuleNative 侧(以iOS为例):新建XXXModule(类名必须与kuikly侧注册的module名字一致)并继承KRBaseModule, 编写API的具体实现代码6.1 Kuikly侧首先新建一个类,然后继承Module ,在Kuikly中, Pager是承载页面UI的容器。
Kuikly框架介绍 在正式开搞之前,我们先来简单认识一下今天的主角——Kuikly。 arch.html 为什么选择Kuikly? 接下来,我们开始搭建Kuikly的开发环境。 整个过程还是比较顺利的,Kuikly的官方文档写得非常详细。这里我简单总结一下步骤: 安装Android Studio: 这是我们主要的开发工具。 安装Kuikly插件: 在Android Studio的插件市场里搜索"Kuikly",一键安装。 创建新项目: 使用Kuikly插件提供的模板,可以快速创建一个新的Kuikly项目。 同时继续学习下Kuikly,深入对比一下Kuikly、Flutter和React Native这三大主流跨端框架,看看它们各自都有哪些优缺点。
今天,我们就以 ChatDemo 为例,看看如何用一套 Kotlin 代码,在 Android、iOS 和 HarmonyOS 三端上通过 Kuikly Compose 完美复刻 ChatGPT 的流式对话体验 组件与布局Kuikly Compose 完美复刻了 Jetpack Compose 的开发体验,让习惯了 Android 开发的同学们倍感亲切。 1. 样式与修饰符 (Modifier)在 Kuikly Compose 中,attr {} 变成了更强大的 Modifier 链式调用。 这里展示了 Kuikly 强大的跨平台能力。 Kuikly 已经把“地基”打好了,剩下的就看你们如何在上面盖出万丈高楼了!今天的代码 Review 就到这里,还不快去 Clone 下来跑一跑?
利用 Kuikly 框架的ComposeView,将各功能模块封装为独立、可复用的组件,以应对日益增长的项目复杂度。 4.1 Kuikly框架的特性首先先来了解一下Kuikly框架的特性声明式UI开发Kuikly采用声明式UI开发模式,让开发者专注于描述UI的最终状态,而不是具体的实现过程:override fun body 实践证明,Kuikly 的核心特性:声明式 UI、响应式数据绑定和独立的组件架构,极大地简化了开发流程。 在整个开发过程中,Kuikly 框架给我的感受非常舒适。 整体来说,Kuikly 框架在各个方面都给了我很不错的体验,非常适合个人开发者快速迭代和产品落地。
通过Kuikly的拓展能力在ios平台实现自定义的图片加载和缓存我们以iOS平台为例,体验Kuikly框架强大的拓展能力首先看看Kuiklydemo是怎么在iOS原生层面实现图片加载与缓存的:打开目录: 在不同平台的定制化能力7.1扩展机制实现原理Kuikly框架在设计平台扩展机制时,采用了一种极其巧妙的插件化架构思想。 Kuikly框架的扩展机制采用了协议驱动的插件化架构,通过定义标准的扩展协议接口,允许开发者实现自定义的组件处理逻辑。 以iOS平台自定义图片加载与缓存为例,无论是集成第三方库如SDWebImage,还是使用自研方案,开发者都可以通过Kuikly的插件化架构和协议驱动机制,实现与核心逻辑完全解耦的功能扩展。 这种设计不仅保障了应用的灵活性和向后兼容性,还让每个平台都能根据自身需求精准定制,充分体现了Kuikly框架开放、高效和可持续的扩展能力。
目前Kuikly鸿蒙版已接入腾讯多款业务,开发并上架鸿蒙App,如QQ浏览器、腾讯新闻、搜狗输入法、全民K歌、自选股等。 二 鸿蒙效果适配方案Kuikly以高性能、动态化为框架核心目标。 在鸿蒙Next系统推出后,Kuikly较早投入适配工作,得益于轻量渲染架构的设计很快完成初版。经过持续的迭代和打磨优化,Kuikly鸿蒙版完整适配,并取得了原生性能表现。 Kuikly对Compose DSL的支持,可以进一步降低客户端开发上手成本,其核心特点是: 1.更多平台支持:通过复用 Kuikly 的通用渲染层,Kuikly Compose 能够在支持标准 Compose 2.动态化能力:在 Kuikly 跨端框架层基础上扩展对 Compose DSL 的支持,使 Kuikly Compose 天然具备了 Kuikly 现有的动态化能力,包括热更新、动态下发等特性。 立即体验 Kuikly,加入开源社区。
这其实就是 Kuikly 和 CMP 最大的不同,底层都是 KMP 方案,但是在绘制上 Kuikly 采用的是类 RN 的方式,目前 Kuikly 主要是在 KMP 的基础上实现的自研 DSL 来构建 那么,Kuikly 和 RN 之间又什么区别? 1)Kuikly 支持 Kotlin/JS 和 Kotlin/Native 两种模式,也就是它可以支持性能很高的 Native 模式;2)Kuikly 实现了自己的一套「薄原生层」,Kuikly 使用“ 也就是说,Kuikly 虽然会依赖原生平台的控件,但是大部分控件的实现都已经被「提升」到 Kuikly 自己的 Kotlin 共享层,目前 Kuikly 实现了 60% UI 组件的纯 Kotlin 组合封装实现 另外 Kuikly 表示后续会支持全平台小程序,这也是优势之一。最后,Kuikly 还在动态化热更新场景, 可以和自己腾讯的热更新管理平台无缝集成,这也是优势之一。那么 Kuikly 存在什么局限性?
搭建小红书首页的瀑布流我们来尝试使用Kuikly写一下小项目,尝试复刻小红书的首页瀑布流2.1 查看示例Demo瀑布流首先克隆Kuikly项目到本地https://github.com/Tencent-TDS } }}2.2 复用组件开发仿小红书首页瀑布流我们可以尝试复用这个demo组件,并把尝试一些图片和文字放到卡片上面,至于数据从哪里找,可以让ai生成一些用于测试的数据,我的做法是选择让ai根据Kuikly 2.3 页面布局优化我们看到卡片中间有一大片的空白这是因为我们的卡片高度是随机生成的,但实际上卡片应该自动适应图片的文字和图片,我们可以使用Kuikly的flexDirectionColumn()属性, 通过搭建仿小红书App的首页,可以体会到Kuikly官方提供了许多的组件,官方的api文档接口也很详细,开发起来还是很流畅的。除了官方提供的组件外,我们也可以自定义组件,在后续内容会继续讲解。
今天,我们用Kuikly来完成这个demo:用一套Kotlin代码,画一个能在Android、iOS、鸿蒙三端运行的雨量预测图表。别担心,这篇文章专门为新手准备,我们会从最基础的概念讲起。准备好了吗? 第一步:搭建页面骨架在Kuikly中,一个页面就是一个继承自BasePager的类:展开代码语言:KotlinAI代码解释@Page("WeatherCanvasPage")//给页面取个名字,用于路由跳转 这就是Kuikly的魅力:把复杂UI封装成可复用的积木块。 varrainLevel3Title:Stringbyobservable("中雨")varrainLevel4Title:Stringbyobservable("小雨")}划重点:byobservable(...)是Kuikly 总结恭喜完成Kuikly"天气App"!
Kuikly也是如此,Kuikly封装组件的手段是使用ComposeView组合组件。 接下来就跟着Kuikly详细的官方教程学习怎么封装组件:https://kuikly.woa.com/%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/compose-view.html
共享代码中的典型代表为腾讯的自研框架:Kuikly。 Kuikly(Kotlin UI Kit,发音同 quickly),是 TDF 端框架(Tencent Device-oriented Framework)的一个新成员(Hippy、VL、Kuikly) 具体架构图如下: Kuikly 框架主要优点: 原生的开发体验。Kuikly 框架使用终端原生语言 Kotlin 来进行开发,对终端开发同学十分友好; 原生性能。 Kuikly 框架能够把 Kotlin 语言编写的系统分别编译为 AAR 文件和 .framework 文件,分别应用于 Android 系统和 iOS 系统,并且把组件映射到原生的组件来进行渲染,保证了性能 04、跨“八”端的真正跨端应用 在上面的介绍中,我们看到:Hippy 跨端框架能够实现 App Android, App iOS 和 PC Web 之间的跨端;Kuikly 是 iOS 端和 Android