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

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

本文正是解决你的焦虑的，我们比较了跨端方案的佼佼者：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文件夹中的可重用组件组成，并使用PascalCase(大写驼峰)命名。使用ReactDOM库，可以将组件呈现给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前端调用，另一方面，页面渲染（WebviewRender）的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引擎来渲染，而且他们觉得PlatformChannel通信效率低，自己整了一个dart2cpp的模块来负责通信。目前微信不会放弃WebView渲染，尝试仅限于微信客户端内部部分场景使用。

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

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

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

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

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

FinClip提供了FlutterSDK，支持在Flutter环境使用小程序；以满足Flutter和小程序混编的效果。这里也放上FinClip在Flutter开发框架集成的文档进行参考：

Flutter集成指引

。

任何事物的发展都具有周期性，显然小程序的这波红利已经到来，今天的创新可能就是明天的标配。当务之急，尽早上船拿到“船票”。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。