一、关于跨端解决方案 Rax
- 跨端技术的需求背景
在PC端，业务主要面对的是浏览器，开发环境相对简单、可控，性能和容器也较为固定。但无线端的情况就复杂得多。随着移动设备种类的增加和网络环境的多样性，开发者需要面对更多样的端容器。这主要是由以下几个因素造成的：
- 设备与网络的差异性带来的性能问题：例如，面向下沉市场的应用（如淘特），其用户设备性能和网络环境可能较差，性能优化成为关键。
- App 容器层的灵活性：移动端应用允许在容器层进行更多的定制，这为开发提供了更大自由度。
- 超级 App 生态的崛起：微信小程序的成功带动了更多大流量 App 构建自己的小程序生态。因此，开发者越来越需要解决跨平台的开发问题。
在这样的背景下，跨端技术的复杂性也随之增加。
- 跨端技术的解决方案
跨端技术的核心是解决“一码多端”的问题，目标是在不同的终端设备上运行同一套代码。常见的跨端技术有两种主要思路：
- 一码多端：编写一套代码，能够在多个平台上运行。这个方案的研发成本较低，但适配复杂的多端环境可能会增加难度。
- 各写一套：为每个端独立开发一套代码，这种方案成本高，但对于特定场景如交易场景的稳定性要求较高时，更能保证性能和兼容性。
Rax 是一种采用“React语法”开发跨端应用的方案，支持多种平台，包括 Web、小程序和 Weex。在阿里巴巴体系内，Rax 已经支撑了80%以上的无线业务。
二、当 Rax 遇到鸿蒙系统
- 鸿蒙系统的简介
鸿蒙系统是华为自主研发的操作系统，旨在打破安卓和 iOS 的垄断，构建自己的生态系统。截至2024年，鸿蒙的装机量已突破1.5亿，成为了全球第三大操作系统。鸿蒙系统的一个重要特点是它支持使用 JavaScript 来开发应用，这是安卓和 iOS 都难以企及的优势。
鸿蒙系统的架构分为多个层次，提供了面向开发者的 Java 和 JavaScript 两种开发模式，后者尤其适合跨端开发者。这为 Rax 与鸿蒙的结合创造了可能。
- 鸿蒙系统与跨端技术的结合
鸿蒙系统中，JavaScript 被视为一等公民，它提供两种开发模式：类 Web 范式和声明式范式。类 Web 范式使开发者能够复用大前端生态的能力，而声明式范式则更多服务于客户端开发。
在鸿蒙系统中，Rax 可以通过 JavaScript 实现跨端应用的开发。这种模式不仅能降低学习成本，还可以借助 Rax 强大的跨端能力，简化应用的开发过程。
- 业务的需求与鸿蒙服务卡片
鸿蒙系统主推的服务卡片功能为应用开发者提供了新的流量入口。通过服务卡片，应用可以在鸿蒙生态内获取更多的公域流量。这不仅解决了流量不足的问题，还大大提升了业务推广的效率。因此，许多公司选择在鸿蒙系统中开发有流量入口的服务卡片，成为他们跨端业务的一部分。
- Rax 在鸿蒙中的技术方案
使用 Rax 在鸿蒙系统中开发应用有以下几个显著优势：
- 熟悉的语法：Rax 采用类似 React 的语法，使开发者无需学习新的开发范式。
- 跨平台开发：一套代码可以同时运行在多个端，降低了开发成本。
- 结合 Web 生态：Rax 可以很好地复用现有的 Web 开发工具链，提升了开发效率。
三、Rax 如何对接鸿蒙系统
Rax 对接鸿蒙系统主要涉及三大核心技术环节：渲染能力、工程构建和研发链路。
- 跨端渲染的实现
Rax 的跨端渲染依赖于 VDOM（虚拟 DOM）的数据结构，能够与具体的端解耦，进而实现跨平台的渲染。这种架构的核心是 Rax Driver 适配器。Driver 是一个抽象层，它与不同端的逻辑解耦，实现了对各类终端设备的支持。Rax 生态中有专门面向浏览器的 driver-dom，面向小程序的 driver-miniapp，以及其他多端的 Driver。
在鸿蒙系统中，Rax Driver 通过对接鸿蒙提供的渲染 API，实现了与鸿蒙底层的紧密结合。开发者只需调用适配后的 Driver，即可在鸿蒙系统中渲染出 Rax 的组件。
- 工程构建的流程
在 Rax 的多端设计中，支持的端包括 web、小程序、Weex 等多种平台。当接入鸿蒙系统后，只需要在工程中增加一个 harmony target，并通过定制的插件来处理鸿蒙系统的构建逻辑。Rax 的工程体系采用了多 webpack 任务的设计，能够根据不同的 target 生成各端的产物，极大简化了多端构建的复杂性。
- 研发链路的对接
鸿蒙官方提供了 DevEco Studio IDE，支持应用的全链路开发、调试与打包。为了与鸿蒙生态更好地融合，Rax 的短期方案是通过 webpack 将 Rax 产物打包，并导入鸿蒙的 IDE 环境中。长期来看，Rax 团队正在与鸿蒙团队合作，旨在让开发者能够在 DevEco Studio 中直接完成从项目创建到应用发布的完整研发流程。
四、 Rax 与 UniApp 的技术对比
1. Rax
-
功能定位：Rax 是阿里巴巴推出的跨端框架，最初旨在解决其内部无线业务的跨端开发问题。Rax 基于 React 语法，支持 Web、小程序、Weex 等多端开发。
-
核心功能：
- 跨平台渲染：通过虚拟 DOM（VDOM）实现多端渲染。
- 多端适配器（Driver） ：Rax 提供了一系列适配器，例如
driver-dom（浏览器）、driver-miniapp（小程序），能够适配不同平台。 - React 语法兼容：开发者可以利用熟悉的 React 生态（如组件、状态管理）进行开发。
- 性能优化：Rax 针对无线业务进行了性能优化，能够在资源受限的设备上高效运行。
2. UniApp
-
功能定位：UniApp 是DCloud推出的跨平台框架，支持一次代码编写，多端运行，能够生成iOS、Android、Web、以及各大小程序平台的应用。
-
核心功能：
- 多端支持广泛：UniApp 支持小程序（如微信、支付宝）、H5、App（iOS、Android）、快应用等多个平台，覆盖面非常广泛。
- API 封装：UniApp 封装了大多数平台的原生 API，开发者可以用统一的 API 调用不同平台的功能。
- 基于 Vue 开发：UniApp 基于 Vue 框架，支持 Vue 语法及其生态，易于上手。
- 插件市场与组件生态：UniApp 有着丰富的官方和社区插件，可以快速集成第三方功能。
3. Rax 的使用场景
- 复杂无线业务场景：Rax 主要为阿里巴巴的无线业务提供跨端开发支持，适合大中型应用开发，特别是需要高度自定义渲染逻辑的场景。
- 需要 React 生态支持的项目：Rax 是基于 React 语法的框架，对于熟悉 React 生态的开发者来说，上手快且能复用现有技术栈。
- 在阿里生态内的开发：Rax 在阿里的业务中使用广泛，尤其在淘宝、天猫等需要跨 Web、小程序和 Weex 的业务中，Rax 的性能和优化表现良好。
4. UniApp 的使用场景
- 中小型应用与快速开发：UniApp 适合开发那些需要快速跨端交付的中小型应用，尤其是微信小程序、H5 和移动应用场景。
- 需要广泛平台覆盖的项目：UniApp 支持多个小程序平台、快应用等，是开发者进行一次性开发、多端部署的理想工具。
- 偏向于 Vue 生态的开发者：对于熟悉 Vue 框架的开发者，UniApp 提供了简单易用的开发体验，特别适合从事轻量级、多端项目的团队。
5. Rax 的架构
- VDOM（虚拟 DOM）渲染：Rax 依赖于虚拟 DOM 的渲染机制，能够与具体平台进行解耦，基于统一的数据结构，开发者可以通过不同的
Driver适配不同的端。Driver 是 Rax 的核心，帮助 Rax 实现对 Web、小程序、Weex 等平台的支持。 - 轻量化设计：Rax 相比 React 更加轻量，适合移动端场景中的性能优化。
- React-like 架构：Rax 的核心逻辑依旧基于 React 的设计思想，支持组件化开发和状态管理。
6. UniApp 的架构
- 双线程架构：UniApp 采用了双线程架构，逻辑层和视图层分离，逻辑层使用 JavaScript 运行，视图层通过 WebView 渲染，类似小程序的架构。
- 基于 Vue：UniApp 以 Vue 为基础架构，支持双向绑定和组件化开发。开发者可以基于 Vue 语法进行跨端开发。
- Native 渲染与 Web 渲染：UniApp 支持原生渲染和 Web 渲染，移动端使用原生引擎提高性能，Web 端则通过 Vue + WebView 实现跨端兼容。
五、鸿蒙系统结合对比：Rax 与 UniApp 的优势与劣势
随着鸿蒙操作系统的快速发展，越来越多的前端框架开始与这一生态进行对接。Rax 和 UniApp 作为两个跨端开发框架，在结合鸿蒙时各有其优势与劣势。
1. 鸿蒙系统的 JavaScript 支持 鸿蒙系统支持基于 JavaScript 开发应用，允许开发者通过 JavaScript 实现跨端功能。这为 Rax 和 UniApp 提供了对接鸿蒙系统的技术可能性。二者都可以在鸿蒙系统的 JavaScript 开发框架中进行适配，从而实现跨鸿蒙生态的应用开发。
2. Rax 对接鸿蒙的优势与劣势
-
优势：
- 熟悉的 React 语法：Rax 继承了 React 语法，能让开发者无缝使用 React 技术栈，开发效率高，适合已有 React 经验的团队。
- 高性能渲染：Rax 针对移动端进行了深度优化，能够在资源受限的设备上高效运行，特别适合鸿蒙系统中的移动设备场景。
- 灵活的 Driver 架构：Rax 通过 Driver 实现多端适配，能够灵活对接鸿蒙提供的原生 API，适配不同的终端设备。
-
劣势：
- 适配鸿蒙生态不如 UniApp 完整：Rax 主要适用于 Web、小程序和 Weex，虽然可以通过 Driver 对接鸿蒙，但需要开发者自行进行一些适配工作，不如 UniApp 在鸿蒙中的生态完整。
- 社区生态相对较小：相比 UniApp 拥有的丰富插件市场，Rax 在社区和插件资源上相对较少，开发者需要自己动手进行更多的自定义开发。
3. UniApp 对接鸿蒙的优势与劣势
-
优势：
- 广泛的端支持：UniApp 本身就支持多个小程序和 App 平台，开发者可以在鸿蒙中一键生成多个平台的应用，适配难度较低。
- 插件与生态优势：UniApp 有成熟的插件市场和强大的社区支持，开发者可以通过现有的插件快速开发鸿蒙应用。
- Vue 语法简单易上手：UniApp 基于 Vue 的双向绑定和组件化开发，更适合前端开发者快速上手，并能轻松实现复杂的交互逻辑。
-
劣势：
- 性能可能稍弱：由于 UniApp 主要依赖 WebView 进行渲染，某些复杂场景的性能可能不如原生方案或 Rax 这种虚拟 DOM 方案。
- 灵活性相对不足：UniApp 封装了大量 API，这让开发简单，但对于需要高度定制的鸿蒙场景，可能不如 Rax 的灵活性高。
在鸿蒙生态下，Rax 和 UniApp 各有千秋。Rax 更适合有 React 经验的开发者，尤其是在追求高性能和高度定制化的场景中表现出色。而 UniApp 则胜在其广泛的平台支持和开发速度，对于需要快速开发和广泛跨端的项目来说是一个极具吸引力的选择。
总结
随着鸿蒙系统的装机量持续增长，它已经成为跨端技术的一个重要平台。而 Rax，作为一个强大的跨端开发框架，能够通过熟悉的语法、强大的跨平台能力和成熟的生态链，为开发者提供便捷的跨端解决方案。Rax 与鸿蒙的结合，不仅为开发者带来了更多选择，也为整个跨端技术领域注入了新的活力。
无论是 Rax 还是 UniApp，二者都在跨平台开发中占据了重要的地位。结合鸿蒙系统的逐步普及，选择合适的技术框架不仅可以提升开发效率，还能为用户带来更优质的体验。
