跨端框架总结前期调研，大家更关注些什么？框架之间的的横向对比，性能，兼容性，功能支持，开发成本，bug数，更新

前期调研，大家更关注些什么？

框架之间的的横向对比，性能，兼容性，功能支持，开发成本，bug数，更新频率，社区活跃度
各个框架优劣势，业内落地的项目。我们的竞品用了什么？
结合我们的业务的落地场景有哪些
1. 现有的业务可以怎么做？
2. 未来的全新的业务可以怎么做？

React Native

介绍

React Native 是一个由 Facebook 推出的开源框架，用于构建移动应用程序的用户界面。它允许开发者使用 JavaScript 和 React 构建原生移动应用，同时享受到 React 的组件化和声明式编程的优势。

跨端包括逻辑跨端和渲染跨端，rn 的逻辑跨端是基于 js 引擎，通过 bridge 注入一些设备能力的 api，而渲染跨端则是使用安卓、ios 实现 react 的 virtual dom 的渲染。

其中 native api 和组件（灰色画出的部分）并没有做到双端一致，而且有的时候扩展图中灰色部分需要原生配合，混杂 rn 代码和自己扩展的代码导致代码比较难管理。最著名的事件就是 airbnb 从最大的 react native 支持者到弃用 react native。

Weex

介绍：

Weex 的跨端原理与 React Native 类似，都是通过原生组件和桥接来实现的。只不过技术栈是基于vue。Weex 最初由阿里巴巴前端团队于2016年推出，是基于 Vue.js 的跨平台开发框架。它的出现旨在帮助开发者构建高性能、原生体验的跨平台应用。

特点

生态相对较小：相比于 React Native，Weex 的生态相对较小，社区资源和第三方库可能不如 React Native 那么丰富。

更新频率：Weex 的更新频率相对较低，可能导致一些新功能和改进的推出速度较慢。

Flutter

介绍：

Flutter是由Google开发的开源UI框架，用于在多个平台上构建高性能、高保真度的移动应用程序。它使用Dart语言作为开发语言，并采用了自绘UI的方式，通过Skia图形引擎直接渲染UI组件，从而实现了跨平台的一致性和高性能。

以下是Flutter的一些关键特点和优势：

跨平台支持： Flutter可以在iOS、Android、Web和桌面平台上运行，从而实现了真正意义上的跨平台开发。这意味着开发人员可以使用单一代码库构建应用，并在多个平台上实现相同的外观和行为。
自绘UI： Flutter不依赖于平台的原生UI组件，而是通过Skia图形引擎直接渲染UI组件，这使得UI的绘制和布局更加灵活、高效，并且可以实现高度自定义的界面。
丰富的组件库： Flutter提供了丰富的内置组件库，涵盖了各种常见的UI组件和功能，开发人员可以快速构建出漂亮、流畅的应用界面，同时也有大量的第三方组件库可供选择。
高性能：由于Flutter使用自绘UI，可以直接与硬件进行交互，因此具有出色的性能表现。Flutter应用通常具有流畅的动画效果和快速的响应速度，适用于对性能要求较高的应用场景。
热重载： Flutter支持热重载功能，开发人员可以在不重新启动应用程序的情况下快速预览和调整UI界面和代码逻辑，极大地提高了开发效率。
优秀的开发工具支持： Flutter配备了强大的开发工具，如Flutter DevTools和Visual Studio Code插件，帮助开发人员进行调试、性能分析和代码编辑等工作。

开发准备：

工具：

vscode（调试工具： Flutter inspector ），xcode（ios），andriod studio（安卓）

真机调试需要手机开启开发者模式+数据线链接。

不同平台也需要做一些配置。

Flutter iOS真机调试及打包过程记录

相关平台：

app.flutterflow.io/project/tes…

项目目录：

my_flutter_app/
├── android/                    # 包含Android特定的项目文件
├── ios/                        # 包含iOS特定的项目文件
├── lib/                        # Dart源代码文件夹
│   ├── main.dart               # 应用程序入口文件
│   └── ...                     # 其他Dart文件
├── test/                       # 应用程序的测试文件夹
├── web/                        # 包含Web特定的项目文件
├── linux/                      # 包含Linux特定的项目文件
├── macos/                      # 包含macOS特定的项目文件
├── windows/                    # 包含Windows特定的项目文件
├── pubspec.yaml                # Flutter项目的配置文件
├── README.md                   # 项目的README文件
├── .gitignore                  # Git忽略文件配置
└── ...                         # 其他配置文件

基础widget：

在Flutter中的Widget可以在前端开发中类比为HTML中的元素（Element）。Widgets是Flutter框架的核心概念，用于构建和描述用户界面的组件。每一个Widget都对应着前端开发中的一个UI元素，但它们不仅包含了UI的表现（类似于HTML和CSS），还包含了状态和行为（类似于JavaScript中的组件）。

Electron

这是 Electron 的一个整体的架构，它是由 Github 开发了一个开源框架，允许我们使用来 HTML+CSS+ Javascript 来构建开发桌面应用，大大降低了桌面应用的开发复杂度。整体架构的核心组成是由 Chromium + Nodejs + Natiwe APis 组成的。其中 Chromnium 提供了 UI的能力，Nodejs让 Electron 有了底层操作的能力，Navtive APls 则解决了跨平台的一些问题，比如说 Windows 系统、macOs 系统及Linux 系统之间一些差异的屏蔽，并且它还提供了一个比较统一体验的原生能力。

主要原理：

Chromium： Electron 使用 Chromium 作为其渲染引擎，负责解析和显示应用程序的用户界面。Chromium 是 Google Chrome 浏览器的开源版本，提供了先进的 Web 技术支持，包括 HTML5、CSS3 和 JavaScript。

Node.js： Electron 内置了 Node.js 运行时环境，使得开发者可以在应用程序中使用 JavaScript 访问本地文件系统、操作系统 API 和其他系统资源。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，使得 JavaScript 能够脱离浏览器运行在服务器端。

通信桥梁： Electron 在 Chromium 进程和 Node.js 进程之间建立了一座通信桥梁，使得它们可以相互通信和调用。这种通信机制使得在 Electron 应用程序中可以轻松地使用 Node.js 模块和浏览器 API，实现了 Web 技术与桌面环境的无缝整合。

主进程和渲染进程： 在 Electron 应用程序中，有两种类型的进程：主进程和渲染进程。主进程负责创建应用程序的窗口、处理系统事件和管理应用程序的生命周期；渲染进程则负责渲染窗口中的 Web 内容。每个窗口都有一个独立的渲染进程，使得应用程序的界面可以并行处理，提高了性能和稳定性。

打包和分发： Electron 提供了丰富的打包和分发工具，使得开发者可以将应用程序打包成可执行文件，然后在不同平台上进行分发。这些工具可以帮助开发者解决依赖管理、资源打包、应用签名等问题，简化了应用程序的发布流程。

优势：

使用熟悉的 Web 技术： 开发者可以使用熟悉的 Web 技术（HTML、CSS 和 JavaScript）构建桌面应用程序，无需学习新的语言或技术。

跨平台支持： Electron 支持 Windows、macOS 和 Linux 等多个操作系统平台，开发者可以一次编写代码，同时运行在多个平台上。

丰富的生态系统： Electron 拥有丰富的生态系统和社区支持，提供了大量的第三方库和工具，可以快速解决各种开发问题。

灵活性和可扩展性： 开发者可以利用 Node.js 模块和浏览器 API 实现丰富的功能和特效，同时可以通过第三方库扩展应用程序的功能和性能。

缺陷：

资源消耗较高： Electron 应用程序通常会占用较多的内存和处理器资源，因为它同时运行了一个浏览器和一个 Node.js 进程。

打包文件较大： 由于 Electron 内置了 Chromium 和 Node.js，导致打包生成的应用程序文件较大，可能会增加用户下载和安装的时间。

性能不如原生应用：尽管 Electron 提供了接近原生应用的性能和体验，但在一些特定场景下，性能可能无法达到原生应用的水平，如处理大数据量、复杂的图形渲染等。

Tauri

介绍

Tauri 是一个用于构建桌面应用程序的开源工具集，它允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的原生应用程序。Tauri 的目标是提供一种简单、轻量级且高效的方式来创建安全、现代且可扩展的桌面应用程序。

Tauri 的主要组成部分：

Tauri CLI： Tauri CLI 是一个命令行工具，用于创建、开发和构建 Tauri 应用程序。它提供了一系列命令，如初始化项目、添加平台支持、打包应用程序等。

Tauri 库： Tauri 库是一个 Rust 库，它包含了构建桌面应用程序所需的核心功能，如窗口管理、文件系统访问、系统通知等。Tauri 库通过 Rust 语言编写，具有高性能和安全性。

Tauri JS API： Tauri JS API 是一个 JavaScript API，它提供了与 Tauri 库进行交互的接口。开发者可以使用 Tauri JS API 来调用 Tauri 库中的功能，实现对桌面环境的访问和控制。

Tauri Runtime： Tauri Runtime 是一个桌面应用程序的运行时环境，它包含了 Chromium 和 Node.js，用于解析和执行应用程序的 Web 内容。Tauri Runtime 负责加载应用程序的 HTML、CSS 和 JavaScript，并提供与操作系统的交互能力。

Tauri 的优势：

跨平台支持： Tauri 支持 Windows、macOS 和 Linux 等多个操作系统平台，开发者可以一次编写代码，同时运行在多个平台上。

使用现有技术栈： Tauri 允许开发者使用熟悉的 Web 技术（HTML、CSS 和 JavaScript）构建应用程序，无需学习新的语言或技术。

性能和安全性： Tauri 底层使用 Rust 语言编写，具有高性能和安全性。同时，Tauri 应用程序运行在沙箱环境中，保护用户的隐私和安全。

轻量级和可扩展性： Tauri 框架本身非常轻量级，但提供了丰富的功能和灵活的扩展性，可以满足各种应用场景和需求。

Tauri 的缺陷：

学习曲线： 对于完全没有接触过 Rust 或桌面开发的开发者来说，学习曲线可能相对陡峭。

生态系统： 相对于一些成熟的桌面应用开发框架，Tauri 的生态系统可能相对较小，社区资源和第三方库可能不如其他框架那么丰富。

总结

以下是对React Native，Weex，Electron，Flutter和Tauri框架的横向对比

框架	技术栈	渲染原理	性能	兼容性	功能支持	开发成本	Bug 数	社区活跃度	业内使用公司
React Native	JS/TS, React	Virtual DOM, Bridge	与原生应用相比有性能损失，但优于传统的Web应用	iOS, Android	丰富的第三方库	相对较低，一套代码多平台运行	较多的bug，更新频率高	非常活跃	Facebook, Airbnb
Weex	JS/TS, Vue.js	Virtual DOM, Bridge	性能与React Native类似	iOS, Android, Web	受限于社区和维护更新	相对较低，但社区小可能增加成本	信息较少，更新不太频繁	活跃度一般	Alibaba
Electron	JS/TS, HTML, CSS	Chromium, Node.js	性能损失较大，因为它运行整个Chromium实例	Windows, macOS, Linux	完整的浏览器功能，强大的桌面应用功能，访问系统API	中等，需要处理Web与桌面的兼容性	较多的bug，更新频率中等	活跃	Slack, Microsoft
Flutter	Dart	Skia-->impeller	高性能，接近原生性能	iOS, Android, Web, Windows, macOS, Linux	自绘UI, 丰富组件	相对较低，一套代码多平台运行	较少的bug，更新频率高	非常活跃，issue：5k+；star： 162k	Google，Alibaba，Tencent，字节，美团。业内落地的项目：饿了么,咸鱼，淘宝，飞猪，盒马
Tauri	Rust, 支持前端框架react，vue等	Webview, Rust	性能优于Electron，因为它使用了更轻量级的Web渲染引擎	Windows, macOS, Linux	一些基础功能，安全性高，系统资源访问受限	可能较高，需要Rust知识	低，较新的项目	新项目，有待观察，正在增长中	目前主要是开源社区和早期采用者

以flutter举例，对于业务结合Flutter落地场景，可以考虑以下方面：

对于全新的业务：

全面采用Flutter：对于全新的业务，可以考虑直接使用Flutter进行开发。Flutter具有跨平台、高性能、丰富的UI组件等特点，而且节省人力。