跨端与同构开发技术一览_跨端开发

关键词：React Native, uni-app, Flutter ,Tauri, Ionic 和 weex

前言

如今的软件开发，出现了web端、Android和iOS、桌面端(以Electron为主)、小程序五端竞发的局面。给中小公司带来很大的压力，就是一个业务要适配五种终端。即使是大公司，投入五套人马做开发也是一大挑战。于是，多端同构兴起，即一套代码多端运行，同时能做到同步更新。多端一致性，多端复用性。无论是 write once，run anywhere，还是 learn once，write anywhere ，不断的从成本和效率的角度去吸引开发者和企业的关注。

目前跨端技术百花齐放，给开发者带来不小的困惑。本文简单梳理一下各个技术特点，帮助大家有个基本的了解。优胜劣汰后，RN、flutter、Taro、uni-app 还保持着领先地位。

跨端技术简史

• WePY，一款类 vue 语法规范的小程序框架，第一个版本是腾讯团队在 2016 年 12 发布。
• Mpvue，是一个使用 Vue.js 开发小程序的前端框架，由美团团队在 2018 年 3 月开源。
• Taro，是一个开放式跨端跨框架解决方案，由京东的凹凸实验室团队在 2018 年 6 月开源。
• Uni-app，是一个使用 Vue.js 开发所有前端应用的框架，由 DCloud 团队在 2018 年 7 月开源。
• Mpx， 是一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架，由滴滴团队在 2018 年 12 月开源。
• Chameleon，是一个有理想的能适应不同环境的跨端整体解决方案，由滴滴团队在 2019 年 8 月开源。
• Remax，是使用 React 构建跨平台小程序的框架，由蚂蚁金服在 2019 年 8 月开源。
• RN， 要求开发者学习React，要求精通Flex布局，要求原生开发协作。

几种常见跨端技术对比

RN，Flutter，taro, uni-app各有优劣，还是看你是什么类型的应用，你的团队成员技术栈。
老外对几种跨端技术的开发者比例的对比：

最近Flutter有压倒RN之势。

Flutter，要求开发者学习Dart，了解Dart和Flutter的API、要求精通Flex布局，要求原生开发协作。

Weex，已经内嵌到uni-app中，就不单独提了。

uni-app，要求开发者学习Vue，了解小程序。

小程序的繁荣

小程序分布图：

跨端同构技术

目前社区中已经有多个 React Native 三端同构方案，比较成熟的有 reactxp 和 react-native-web。

此外，React语法小程序跨端框架举例:

uni-app

uniapp 其实就是 webview 包皮，性能上不及 rn 和 flutter 。好处是，它不仅可以编译成 iOS 和安卓，还能直接做成各个平台的小程序以及快应用。但是 bug 多也是很多开发者诟病的。如果是面向国内，uniapp 应该问题不大，毕竟大量小公司都在用，1 个程序员同吃所有端，甚至后台(unicloud)，美其名曰新全栈。

Taro

Taro 是基于React技术栈的一个开放式跨端跨框架解决方案，京东凹凸实验室出品。支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。目前Taro 3同时支持了React 和 Vue两种DSL。

react-native-web

把React Native的组件和API都用适用于Web的标签和API再适配实现一遍，使其在Web上的行为和在原生应用上尽量保持一致。
仓库地址：https://github.com/necolas/react-native-web

reactxp

reactxp 是一个跨平台的开源 UI 库，由微软 Skype 团队维护，Skype 产品中就大量使用了它来实现写一份代码运行在多个平台上。目前 reactxp 支持以下平台：

• iOS/Android：基于 React Native 渲染。
• Web：基于 react-dom 渲染。
• UWP：基于 react-native-windows 渲染。
• 其他平台 （如 Mac、Windows10 以下系统、Linux 桌面）：基于 Web 渲染的 Electron 。

Weex

阿里的Rax

Rax是一款类 React 语法的前端框架，其与 React 的最大不同在于：React 用于 Web 页面的渲染，而 Rax 的目标则是 通用的跨容器的渲染引擎。

Remax

使用真正的 React 构建跨平台小程序。
地址：https://github.com/remaxjs/remax

去哪儿网的qrn-remax-unir

去哪儿前端团队的实现方案。一个用于将React-native转换到remax组件的库，此库对于react-native中的大部分组件，进行了到remax组件的映射,很多代码也直接修改自react-native-web，方便remax再转化到mini各端，是多端开发支持mini端的核心基础组件库。
仓库地址：https://github.com/qunarcorp/qrn-remax-unir

去哪儿网的anu

基于 React 语法的多端小程序开发框架。支持微信/支付宝/百度/头条/QQ小程序/快应用/H5等应用。
地址：https://github.com/qunarcorp/anu

Kbone

微信官方开始推广一个新的多端统一开发工具——Kbone，一个致力于微信小程序和 Web 端同构的解决方案。
跨端开发组合拳：小程序+kbone+finclip。

腾讯新一代跨端开发框架Hippy

Hippy一看就是淘宝Weex的对标项目，Kpi功能全面压制。所以官方支持 React 和 Vue 两种主流前端框架。Hippy 2.x 架构主要分成三层，UI(JS) 层 Hippy-React 和 Hippy-Vue 负责驱动 UI 指令生成；中间层 C++ HippyCore 负责抹平平台差异性和提供高性能模块；渲染层 Android 和 iOS 负责提供终端底层模块、组件，并与布局引擎通信。

滴滴出品的Hummer

Hummer 以 JS 引擎为基石，目前已支持 JavaScriptCore、Hermers、QuickJS 等业内知名 JS 引擎（这里本来还有个V8的，我删除了，源码里面没有，Kpi需要）。再配合经过调优的 Yoga 布局引擎，抹平了两端视图布局差异（性能更佳的自研布局引擎开发中）。

Hummer 的特点是抛弃了业界其他动态化跨端框架普遍使用的DSL层和VDOM层，因此原生 Hummer 不具备前端开发常用的响应式编程的能力，但同时换来的是接近原生开发的体验和性能。再以原生 Hummer 为基础，在此之上开发了一套基于MVVM架构的开发框架 —— Tenon ，通过 Tenon，可以把使用 Vue/React 编写的代码，转换成原生 Hummer 的代码。

Kraken 北海

「Kraken 北海」是一款高性能Web渲染引擎。底层基于 Flutter 进行渲染。Kraken 不限制上层开发者使用的框架，无论你是使用 Vue 、Rax 还是 React 都可以开发 Kraken 应用。Kraken 的 runtime 通过 JS Engine Binding 的方式提供了一系列 Web 标准的 API 接口，调用相应 API 会执行相关逻辑并创建一系列需要发送给 Dart 层处理的指令。

Tauri

Tauri 是一个跨平台 GUI 框架，与 Electron 的思想基本类似。Tauri 的前端实现也是基于 Web 系列语言，Tauri 的后端使用 Rust。Tauri 可以创建体积更小、运行更快、更加安全的跨平台桌面应用。

通用 JSBridge 设计

有时RN和H5需要利用一些底层的能力，在 Native 层，RN 和 H5 可以共用一份 JS Bridge 实现。底层的一些通用服务能力，分别通过两个 Bridge 暴露上去，可以让 H5 和 ReactNative 直接调用：

参考链接

• taro
• taro入门
• https://github.com/NervJS
• https://nerv.aotu.io/
• https://github.com/alibaba/weex
• https://taro.zone/
• 微信小程序开发文档