使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

京东云开发者
• 阅读 345

纯血鸿蒙即将到来

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

图一·鸿蒙 Next 计划

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

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

鸿蒙 ArkUI 是怎么个事儿

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

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

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

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

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

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

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

图四·ArkTS 架构

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

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

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

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

图五· ArkTS 基础语法

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

Taro 与 ArkTS 的联动

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

图六·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 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

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

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

图八·Taro 在 HDC 上技术分享

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

使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队

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

总结与展望

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

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

作者:京东零售 李伟涛

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

点赞
收藏
评论区
推荐文章
京东云开发者 京东云开发者
9个月前
使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理
背景在上一篇文章中,我们已经了解到华为即将发布的鸿蒙操作系统,以及各个互联网厂商开展鸿蒙应用开发的消息。其中,Taro作为一个重要的前端开发框架,也积极适配鸿蒙的新一代语言框架——ArkTS。本文将深入探讨Taro适配鸿蒙ArkTS框架的工作原理,接下来我
京东云开发者 京东云开发者
9个月前
使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南
随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列文章中,我们已经介绍
小天 小天
7个月前
鸿蒙系统与安卓系统有什么区别
自从华为推出了鸿蒙系统后,不少网友都对此非常感兴趣,不知道跟传统的安卓系统相比,鸿蒙系统和安卓系二者有什么区别?鸿蒙系统与安卓系统还是有很大的区别。安卓系统是手机两大操作系统之一,而华为董事长任正非表示,鸿蒙系统不是专门用于手机的操作系统,而是为了做物联网
小天 小天
7个月前
鸿蒙系统开发
有用的网站鸿蒙官网:鸿蒙系统开发者:华为开发者:在线体验:Gitee:JSAPI:开发环境搭建(DevEcoStudio)DevEcoStudio是面向全场景多设备,提供一站式的分布式应用开发平台下载地址:安装确保有网络环境安装模拟器安装菜单ToolsDe
小天 小天
7个月前
HarmonyOS(鸿蒙系统)物联网开发教程——环境搭建
HarmonyOS(鸿蒙系统)物联网开发教程——环境搭建前言华为的鸿蒙系统在2019年正式发布,2020年升级到2.0版本并且正式对所有开发者开源,那个时候我就已经简单评测过这个开源系统了,只是一直没有发布相关的博客,然后最近有粉丝私信我希望我出一下鸿蒙相
京东云开发者 京东云开发者
1个月前
动态化-鸿蒙跨端方案介绍
一、背景👉华为在2023.9.25官方发布会上宣布,新的鸿蒙系统将不再兼容安卓应用,这意味着,包括京东金融APP在内的所有安卓应用,在新的鸿蒙系统上将无法运行,需要重新开发专门适用于新鸿蒙系统的专版APP。二、原生适配方案原生适配方案就是将京东金融APP
京东云开发者 京东云开发者
1个月前
京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用
背景2024年1月,京东正式启动鸿蒙原生应用开发,基于HarmonyOSNEXT的全场景、原生智能、原生安全等优势特性,为消费者打造更流畅、更智能、更安全的购物体验。同年6月,京东鸿蒙原生应用尝鲜版上架华为应用市场,计划9月完成正式版的上架。早在2020年