为什么说移动端的未来是Flutter

一、为什么说移动端的未来是Flutter

Flutter是Google开发的新一代跨平台方案，Flutter可以实现写一份代码同时运行在iOS和Android设备上，并且提供很好的性能体验。Flutter使用Dart作为开发语言，这是一门简洁、强类型的编程语言。Flutter对于iOS和Android设备，提供了两套视觉库，可以针对不同的平台有不同的展示效果。

Flutter原本是为了解决Web开发中的一些问题，而开发的一套精简版Web框架，拥有独立的渲染引擎和开发语言，但后来逐渐演变为移动端开发框架。正是由于Dart当初的定位是为了替代JS成为Web框架，所以Dart的语法更接近于JS语法。例如定义对象构建方法，以及实例化对象的方式等。

在Google刚推出Flutter时，其发展很缓慢，终于在18年发布第一个Bate版之后迎来了爆发性增长，发布第一个Release版时增长速度更快。可以从Github上Star数据看出来这个增长的过程。在19年最新的Flutter 1.2版本中，已经开放Web支持的Beta版。

Flutter不仅仅提供了一套视觉库，在Flutter整体框架中包含各个层级阶段的库。例如实现一个游戏功能，上面一些游戏控件可以用上层视觉库，底层游戏可以直接基于Flutter的底层库进行开发，而不需要调用原生应用的底层库。Flutter的底层库是基于Open GL实现的，所以Open GL可以做的Flutter都可以。

二、2022年,想玩一下安卓app,选择原生还是flutter或uniapp

从事Android开发10年以上，带领团队从0开始进行Flutter开发快四年了。如果只是想玩一下安卓应用，建议从原生开始。uniapp和Flutter需要依赖原生，学习初期可能会碰到一些环境问题，会占用一些时间。在单纯的Android端来说，学习uniapp和Flutter不见得比原生上手快，开发出的App效果也很难比原生好。

长远发展上，建议一定要学习Flutter。因为Flutter已成为最流行的跨平台开发框架，2021年占有率超过RN，成为开发者使用最多的跨平台开发框架。社区活跃，官方跟进力度强。未来5年内，Flutter会成为客户端开发的主流技术。Flutter的优点在于提供了一个UI系统，让开发者能专注于UI设计，而不需要关心底层原生代码的细节。

Flutter本身只是一个UI系统，并不能提供App在Android或iOS上运行所需的完整功能。学习Flutter时，不需要先学习Android或iOS原生开发。一个Flutter App本质上需要通过原生代码创建App的整个框架，但工具已经替我们创建好了原生部分的所有代码。需要调用原生的部分基本有第三方插件，例如电池信息、定位信息等。随着Flutter生态发展，大部分常用功能都有开发者通过Flutter插件封装好了，开发者可以只编写Flutter代码实现所有功能。

现在，Flutter的生态已经足够完善，基本覆盖了客户端开发的方方面面。早期由于第三方库不多，很多功能需要自己开发，但现在pub已经有2w+的第三方库。此外，Flutter 2.0之后，FFI（Foreign Function Interface）成为稳定版本的标准功能，让Dart代码可以直接调用C++层，进一步让Flutter摆脱了对原生的依赖。

虽然在学习Flutter时不需要具备原生开发能力，但目前阶段想找到纯Flutter开发的工作岗位并不多。建议学习者同时掌握原生开发技能，以增加就业机会。如果你对客户端开发或Flutter开发感兴趣，欢迎联系老刘，互相学习。最后，附上老刘整理的《Flutter开发手册》，覆盖90%应用开发场景，作为日常开发速查手册或学习路线图。

三、跨平台技术;H5和Flutter谁是未来

同一个应用，各个“端”独立开发，不仅开发周期长，而且人员成本高。同时，作为技术人员，也不应该满足于这种重复、低能的工作状态。在这样的形势下，跨平台的技术方案也受到越来越多人和企业的关注。

本篇文章我将从原理、优缺点等方面为大家分享跨平台技术

说到跨平台，没人不知道H5。不管是在Mac、Windows、Linux、iOS、Android还是其他平台，只要给一个浏览器，连“月球”上它都能跑。

下面，我们来看看让H5如此横行霸道的浏览器的架构：

浏览器由以上7个部分组成，而“渲染引擎”是性能优化的重中之重，一起了解其中的渲染原理。

不同的浏览器内核不同，渲染过程会不太一样，但主要流程还是一致的。

从以上6步，我们可以总结渲染优化的要点：

以上就是浏览器端的内容。但H5作为跨平台技术的载体，是如何与不同平台的App进行交互的呢？这时候JSBridge就该出场了。

JSBridge，顾名思义，是JS和Native之间的桥梁，用来进行JS和Native之间的通信。

那么App内加载H5的过程是什么样的呢？

这四步，对应的过程如上图所以，我们可以针对性的做性能优化。

下面，我们进行H5的优缺点分析：

虽然H5目前还存在不足，但随着PWA、WebAssembly等技术的进步，相信H5在未来能够得到越来也好的发展。

2018年是微信小程序飞速发展的一年，19年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。

小程序跟H5一样，也是基于Webview实现。但它包含View视图层、App Service逻辑层两部分，分别独立运行在各自的WebView线程中。

可以理解为h5的页面，提供UI渲染。由WAWebview.js来提供底层的功能,具体如下：

每个窗口都有一个独立的WebView进程，因此微信限制不能打开超过5个层级的页面来保障用户体验。

提供逻辑处理、数据请求、接口调用。由WAService.js来提供底层的功能,具体如下：

视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层将触发的事件通知到逻辑层进行业务处理。

既然WebView性能不佳，那有没有更好的方案呢？下面我们看看React Native。

RN的理念是在不同平台上编写基于React的代码，实现Learn once, write anywhere。

Virtual DOM在内存中，可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信

在 React框架中，JSX源码通过 React框架最终渲染到了浏览器的真实 DOM中，而在 React Native框架中，JSX源码通过 React Native框架编译后，与Native原生的UI组件进行映射，用原生代替DOM元素来渲染，在UI渲染上非常接近Native App。

2.React Native与Native平台通信

虽然RN还存在不足，但RN新版本已经做了如下改进，并且RN团队也在积极准备大版本重构，能否成为开发者们所信赖的跨平台方案，让我们拭目以待。

既然React Native在渲染方面还摆脱不了原生，那有没有一种方案是直接操控GPU，自制引擎渲染呢，我们终于迎来了Flutter！

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。

很多人会好奇，为什么Flutter要用Dart，而不是用JavaScript开发，这里列下Dart的优势