使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙

纯血鸿蒙即将到来

在今年 8 月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的 AOSP 代码,彻底与 Android 切割,使其成为一个完全自主研发的操作系统,这将去掉 40%左右多余的代码,使系统变得更加简洁、流畅。同时,会上也预告了将在明年 1 月份发布面向所有开发者的预览版,意味着还有一个多月纯血的鸿蒙就要与所有开发者见面了,这不禁令人热血沸腾,分外期待。

图一·鸿蒙 Next 计划

而近期关于鸿蒙的消息不断,各大互联网厂商,如阿里、美团、去哪儿、小红书等等,都已经官宣开展了开发 ArkUI 版原生鸿蒙应用的消息,同时也都在各个招聘渠道公开高薪招聘鸿蒙工程师和专家,仿佛偌大的鸿蒙生态即将全面铺开,这对于对鸿蒙适配呈观望态度的开发者来说无疑是巨大的强心剂,鸿蒙应用开发,似乎真的行了。

图二·业界多家互联网公司渲染开发鸿蒙原生应用

鸿蒙 ArkUI 是怎么个事儿

好了,吹了一波鸿蒙的彩虹屁,让我们来看看,鸿蒙应用开发是个怎么个事儿。

从鸿蒙官网我们可以了解到,鸿蒙应用开发使用方舟框架,即 ArkUI 框架,它支持两种方式,一种是使用 ArkTS,也就是声明式的开发范式,另一种是使用 JS,即类 Web 的开发范式,让我们来看看这两种开发范式的区别。

  • 声明式开发范式:采用基于 TypeScript 声明式UI语法扩展而来的 ArkTS 语言,从组件、动画和状态管理三个维度提供 UI 绘制能力。
  • 类Web开发范式:采用经典的 HML、CSS、JavaScript 三段式开发方式,即使用 HML 标签文件搭建布局、使用 CSS 文件描述样式、使用 JavaScript 文件处理逻辑。该范式更符合于 Web 前端开发者的使用习惯,便于快速将已有的 Web 应用改造成方舟开发框架应用。

图三·ArkUI 两种开发范式区别

可以看出,显然,Web式的开发范式较贴近Web前端开发者的习惯,不过,它更适用于开发简单的卡片应用,Taro框架已经提供了对这种开发范式的支持,可以查看 Taro && 鸿蒙、OpenHarmony开发文档,然而,对于大型应用的开发,声明式开发范式可能更为合适。

你会在下文的语法介绍中发现,声明式开发范式类似于 Flutter 和 Compose 的开发方式,它对 Web前端开发者来说可能需要一定的学习成本。但鉴于其适用于构建更高复杂度的应用,并且理论上的性能优于Web 式开发范式,鸿蒙将主要推广这种开发范式。

因此,对于我们这些有志于前端开发的青年来说,更应该关注鸿蒙的ArkTS——即声明式开发范式。

图四·ArkTS 架构

从声明式范式的架构图中可以看出,该架构主要采用了前后端分离的形式。在这个体系中,前端主要负责处理语法基础规范和 UI 组件等内容,这部分主要体现在 DSL 层。另一方面,后端则使用 C++ 进行开发,主要负责支持前端的语法范式、组件以及渲染管线。

此外,语言运行时则使用了华为自研的方舟编译器,支持 JS、ArkTS 和 C++ 的混写。值得注意的是,方舟编译器具备 AOT(Ahead-Of-Time,即预编译)处理能力,这使得它能够将应用代码转化为统一的字节码,然后再通过 AOT 转化为机器码,从而提升应用的性能。

在架构的下一层,系统会对接基于 Skia 的自绘渲染引擎。在这个过程中,终端的所有渲染需求都会统一提交给渲染引擎,从而使得渲染效果得到提升,这种设计理念不仅使系统在处理渲染任务时更加高效,同时也保证了渲染结果的高质量。

前面提到,声明式范式与类 Web 的开发范式大有不同,我们可以从下面这段代码感受一下。

图五· ArkTS 基础语法

熟悉 Flutter 和 Compose 的朋友们可以发现,声明式范式的 ArkTS 在 UI 描述上的写法与他们非常相似,而这段 ArkTS 代码也体现出与 Web 前端熟悉的 JS/TS 语言的不同,如定义自定义组件的 struct 关键字等等,在官方的解释中,ArkTS 是基于 TS 进行扩展的超集,所以这不就是最熟悉的陌生人么,这不禁让我们前端觉得”我又行了“。

Taro 与 ArkTS 的联动

由于声明式范式与类 Web 范式天然的不同,对 Web 前端来说学习成本还是有的,而且,相应的研发生态也得从零开始建设,之前我们沉淀的大量 Web 生态肯定是没法直接使用了,这对于前端转型 ArkTS 开发来说还是存在挑战的,那么有没有办法可以使用 Web 的开发范式,来开发 ArkTS 应用呢?这似乎就进入了 Taro 最熟悉的领域了,以 Web 的开发范式来统一各端开发。

图六·Taro 支持的平台

前文提到,当前 Taro 已经支持了ArkUI 类 Web 的开发范式,这为我们沉淀了很多的经验,当然,ArkTS 是一种全新的语法,为了实现对它的适配,我还是有不少的工作需要去做。

经过对 ArkTS 语法的分析,其 UI 描述结构让人联想到 Flutter 三棵树中的 Widget Tree,那么我们首先想到的解决方案就是,将 React/Vue 运行时产生的虚拟 DOM,以某种形式递归映射为 ArkTS 的自定义组件树。基于 Taro 3.0 中适配小程序的经验,我们想到可以在 ArkTS 环境中模拟 DOM/BOM API,将虚拟 DOM 基于 DOM/BOM API 构建为 Taro DOM 树,然后再递归映射为自定义组件树,接着再走鸿蒙渲染。

图七·Taro 适配小程序/鸿蒙原理

在今年 8 月的「2023年华为开发者大会(HDC.Together)」上,Taro 团队受邀分享了 Taro 适配鸿蒙 ArkUI 的技术方案,整体技术路线是受到认可的,同时在后续的适配过程中也得到了来自华为的技术支持,让我们的适配工作得以顺利进行。

图八·Taro 在 HDC 上技术分享

目前,基于上述思路,Taro React 适配鸿蒙 ArkTS 的工作已经进入收尾阶段,预计将在 12 月下旬发布可用版本,想要了解进展的朋友可以查看这篇文档,根据相应分支来 follow 我们的进展,有条件的朋友也可以自行尝试调试。

图九·使用 Taro 开发的应用 DEMO 编译后的代码

总结与展望

是不是有种突然结束,戛然而止的感觉?哈哈哈,本文是 「Taro 适配鸿蒙 ArkTS」系列文章的第一篇,算是先导预告片,在后续我们会陆续释出其他文章,例如详解 Taro 适配鸿蒙 ArkTS 原理、Taro 开发 ArkTS 应用最佳实践、Taro 性能优化利器-半编译技术介绍等等,向社区介绍 Taro 的最新成果。

鸿蒙 ArkUI 的整体设计笔者觉得是超前的,声明式范式、自绘渲染等等,吸收了近几年业界移动端技术的优点,如果开发调试、研发生态等配套设施能够跟上业界领先的移动端开发解决方案,还是大有可为的,期待鸿蒙 Next 为国产操作系统书写新的篇章。

作者:京东零售 李伟涛

来源:京东云开发者社区 转载请注明来源

posted @ 2023-12-13 11:36  京东云开发者  阅读(198)  评论(0编辑  收藏  举报