Flutter、ReactJS+ 小程序容器技术，降本增效急速提升 100%

2022 年 7 月 11 日
本文字数：3580 字
阅读完需：约 12 分钟

你想更迅速地开发一款移动应用吗？你想通过跨平台技术减少开发成本吗？你还在为不知道选择哪一种技术焦虑吗？

本文正是解决你的焦虑的，我们比较了跨端方案的佼佼者：Flutter 和 ReactJS，并从 App 所有者的角度出发帮助你判断哪一款框架更适合你的 App 的需求，同时我们也为大家分享了 Flutter 与小程序容器技术结合可以如何为移动应用降本增效。

我们希望这篇文章能帮助你在为你的 App 选择跨端方案时做出明智且合理的决策。

在过去的几年里，信息技术行业一直处于蓬勃发展之中。同样，移动应用开发行业也获得了巨大的人气。特别是在疫情期间，移动应用程序在人类生活中发挥了重要作用。因此，移动应用市场相当大，Android 应用程序有 348 万个，iOS 有 222 万个。

如果你在 Flutter 和 ReactJS 之间感到困惑，那么也许可以在下文中找到答案。

在 IT 领域，ReactJS 和 Flutter 在全世界都很受欢迎。Flutter 由谷歌创建，React 由 Facebook 创建。两者的功能各不相同。因为 ReactJS 是一个 JavaScript 库，而 Flutter 是一个框架。但它们之间有一个相似之处：ReactJS 和 Flutter 都用于前端开发。

在全球开发者社区中，Flutter 是最受欢迎的跨平台移动框架，在 2021 年有 42%的软件开发者使用它。另一方面，ReactJS 是使用最多的 web 框架，在 2021 年有 40.14%的开发者使用过它。

今天我们将讨论：什么是 Flutter 和 ReactJS，在 2022 年 Flutter 和 ReactJS 之间哪个更好?

在继续之前，让我们更深入地了解一下 ReactJS 和 Flutter。

关于 Flutter

Flutter 为跨平台开发赋能。

它为开发人员提供了一种简便的方法来为移动应用（iOS、Android）、Web 和桌面端构建和部署具有视觉吸引力的原生编译的应用程序：一套代码运行在多端，即所谓的一次编写处处运行。

Flutter 具有平台无关性，因为它具有自己的 widgets 和设计，这意味着你可以在两个平台上拥有完全相同的应用程序（如果你希望区分自己的应用程序，这同样容易实现）。

从官方公布的数据上， Flutter 已经基本超过其他跨平台框架，成为最受欢迎的移动端跨平台开发工具，截至 2022 年 2 月，有近 50 万个应用程序使用了 Flutter。

Flutter 是一个来自谷歌的开源软件开发工具包，它允许开发者基于单一的代码库为 Android、iOS、Linux、macOS 和 Windows 创建跨平台应用程序、web 和移动应用程序，开发者可不必为 iOS 或 Android 应用编写不同的代码。

这是谷歌的 SDK，用现有的代码创建跨越移动、web 和桌面的吸引人的、快速的体验。Flutter 集成了现有的代码，并被世界各地的公司使用。

Flutter 使用一个高效的、可扩展的和开放的平台来为 iOS、Android、web、Windows、macOS、Linux 构建应用程序，或将 Flutter 嵌入为您选择的任何平台的 UI 框架，从而促进优雅、快速的应用程序的创建。

Flutter 是如何工作的

Flutter 框架包括一个引擎、基础库和小组件。Flutter 的移动应用开发方法非常独特，因为它的声明式 UI，所以开发人员只需要从头开始。因此，在开始某些元素的开发过程之前，编码器/业务所有者需要对 UI 需求有一个清晰的认识。因为开发人员可以通过组合不同的小组件来创建整个用户界面。

Flutter 也允许专业人员创建自定义组件。稍后可以将这些小组件与现有的小组件融合。为了增强 UX(用户体验)，开发人员需要增强应用程序功能。Flutter 框架还提供了几个软件包，允许访问 Firebase 和 Redux 数据仓库。

关于 ReactJS

React 是一个免费的开源 JavaScript 库，web 开发者使用它来构建使用 UI 组件的用户界面。ReactJS 通常用于构建单页面的 web 应用程序。

事实上，React 可以使用诸如 Next.js 这样的框架来构建单页面、移动或服务器呈现的应用程序。但是 React 只关心处理状态并将其呈现给 DOM。因此，React 应用程序通常需要特定的客户端功能以及用于路由的附加库。

在 React 中，代码由位于 SRC 文件夹中的可重用组件组成，并使用 Pascal Case(大写驼峰)命名。使用 React DOM 库，可以将组件呈现给 DOM 中的特定元素。当渲染一个组件时，它的值可以通过“props”在组件之间传递。

ReactJS 是如何工作的

使用 ReactJS 的最大好处是，它允许开发人员使用 JavaScript 注入 HTML 代码。开发人员可以通过声明 Element 函数来构建 DOM 节点的表示。它还允许开发人员检查 HTML 代码的语法。所以 ReactJS 没有使用传统的 DOM 类，而是使用了 className.JSX 标记用于名称、子元素和属性。

在 ReactJS 中，数值和表达式都必须写在括号{}中。JSX 属性中的“引号”表示字符串。在大多数用例中，ReactJS 是使用 JSX 而不是标准 JavaScript 编写的，以简化组件并保持代码整洁。ReactJS 应用程序通常只有一个根 DOM 节点。它将元素呈现到 DOM 中，并更改页面的 UI。

关于小程序

小程序作为我国技术研发届的一个独特产物，由于其轻量、便捷、优质的体验在近些年得到迅速的发展，特别是在腾讯、阿里、百度、字节等各家大厂的小程序开发平台助推下，其中仅微信小程序的数量就超过 700 万，小程序开发者数量 300-400 万人，规模相当惊人，而且小程序的 DAU 也在不断递增。

小程序的运行原理

小程序是如何运行的？它的工作原理是什么？

小程序的出现不是一蹴而就，而是在移动互联网近 10 年的业务、场景积累上逐步发展起来的。Web 开发具有高效、灵活、门槛低的特点，但弊端在于所有的页面都依赖浏览器的渲染，浏览器的能力就是的 web 研发的上限和边界。为了克服这个问题，于是便有了 JS-Bridge 这种方式，将很多常用组件内置到应用中，当内嵌组件足够多的时候，再做一层封装，形成了 JS-SDK，其本质没有差别。

小程序在 JS-SDK 的基础上，一方面进一步开放和拓展原生的能力给到 Web 前端调用，另一方面，页面渲染（Webview Render）的 UI 层和逻辑层，使用了两个独立的线程。如下图所示：

小程序可以和跨端方案如何结合呢？

小程序与 Flutter 最密切关联还是在渲染优化上，先来看看整个框架：

在这个架构下，我们就将 Layout 层的 LV-CPP 专门的作为小程序的 UI 体系处理器，将 UI 信息布局计算好再提交给抽象的后端去渲染，LV-CPP 作为小程序的框架和渲染器的中间层，集中的在 C++ 层去处理与 Web 相关的复杂特性。渲染端就可以基于特定的协议和接口专注将元素转化为 UI 组件，最终绘制出来。

通过结合 Flutter 和 LV-CPP，我们把实现代码收敛在 C++ 和 Dart 上，进一步简化了基于小程序技术栈实现跨平台业务开发的框架维护成本。

再来看看各家厂商是如何开展的：

京东：把 Flutter 扩展到微信小程序端的探索

京东发起了 Flutter_mp 的开源项目，此框架主要做到两件事情： 1. 需要根据 Flutter 生成相关的小程序 wxml 模板文件。 2. 收集 wxml 渲染需要的数据，放置到小程序组件的 data 字段。 flutter_mp 还处于早期的实验阶段，很多功能还在探索规划中，只支持 Center，Column，Container，Expanded，Image.asset，ListView，Row，Text 这些基本 Widget，暂不支持自定义 Widget，而且自己的 Flutter 代码只能够出现在 lib/main.dart 文件中。

微信：基于小程序技术栈的微信客户端跨平台实践

微信小程序，最开始是采用 Webview 渲染的方案，后面又采用了 React-Native-Like 的方案，再后来微信提出了一个很大胆的想法：上层依然使用 WXML+WXSS 来表示，但是底层使用 Flutter 引擎来渲染，而且他们觉得 Platform Channel 通信效率低，自己整了一个 dart2cpp 的模块来负责通信。目前微信不会放弃 WebView 渲染，尝试仅限于微信客户端内部部分场景使用。

FinClip：基于小程序技术的跨端开发平台建设

FinClip是目前市面上比较热门小程序容器技术，一个可以让任何 APP 都能具备小程序运行能力的前端容器技术，只需简单集成 FinClip SDK ,即可在 iPhone、Android、Windows、Linux、macOS、统信等平台下的应用中运行你的小程序，这意味着，移动端、PC 端、车载设备、智能电视、智能手表都能使用小程序了，实现多端互通，同时兼容互联网主流小程序技术语法，可采用 Vue、react 基础上的 DSL 框架。

实际上不与 Flutter、Reactive-Native、100% Native 或 Framework 们技术冲突，嵌入即可，个体小程序开发依然可享受 React 等 Web Framework、mate Framework、DSL Frameworke 的成果。

FinClip小程序容器技术，将视图层与逻辑层分离也带来了许多好处：

1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验； 2、Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染，这有助于提高渲染性能； 3、因为 JS 在 Service 层执行，所以 JS 里面操作的 DOM 将不会对 View 层产生影响，所以小程序不能操作 DOM 结构的，这也使得小程序的性能比传统的 H5 更好。