Flutter介绍 - Flutter,H5,React Native之间的对比

Flutter介绍

Flutter是Google推出的开源移动应用开发框架。开发者能够经过开发一套代码同时运行在iOS和Android平台。

它使用Dart语言进行开发，而且最终编译成各个平台的Native代码，这样既保证了开发效率，也保证了各个平台的运行效率。其至关于从头至尾重写了一套UI框架，不依赖具体平台的组件。其全部的组件都是"Widget"。渲染引擎则依靠高效渲染库Skia实现。

下面咱们对比一下H五、React Native、Flutter这些跨平台的解决方案。

移动端的跨平台技术

H5技术

常被人提起的H5技术，其实就是网页+JavaScript。好比目前的一些流行的JS框架Vue，React，AngularJS等都是为了构建网页。针对移动端构建出来的网页能够实如今跨平台的功能，可是其缺点也很明显：

• 渲染效率低下，用户体验差。不少H5在iOS平台表现尚可，可是在Android上特别是一些低端机上的表现确实让人不敢恭维。
• 网页调用设备硬件相关API比较困难，并且支持的功能较少，实现此类需求是H5的短板。

React Native

React Native（RN）发布于2015年，也是使用JavaScript语言进行跨平台APP的开发。与H5开发不一样的是，它使用JS桥接技术在运行时编译成各个平台的Native代码，其使用的技术Facebook的Flux技术。
其优势是目前的生态比较成熟，目前也有不少跨平台应用使用React Native。它也是跟Flutter对比的主要对象。
其特色是：

• 使用JavaScript语言，因为JS被普遍地使用，因此RN也很容易被接受。
• RN依赖JS的运行时环境，也就是JS桥接技术。其使用Facebook的Flux架构。
• RN仅提供了UI渲染和设备访问的API，不少功能必须依赖第三方库来实现对本地组件的使用。
• 生态目前比较完善，使用的公司也比较多，特别是对JS比较熟悉的同窗容易上手。
• 支持热部署，开发过程当中能够节约不少时间。

可是它也并非完美的：

• 它的渲染方式仍是调用各个平台的原生控件，有时须要针对不一样的平台作不一样的优化。
• 其性能相对于H5有很大的提升，可是并无完美解决，白屏，丢帧问题依然存在。

Flutter

Flutter也看到了目前的跨平台解决方案并不完美，因此它借鉴了React Native的一些思想，作出了很大的优化。它将代码编译成原生代码，而且直接在各个平台中使用其高效渲染引擎Skia进行渲染，没有桥接，不调用平台相关控件。

这种设计思想完美解决了不一样平台的性能问题。

归功于其设计思想，咱们能够真正实现一套代码，运行不一样的平台。在其推出以后，关注的开发者数量和相关的教程的增加速度远超当时的React Native。

其特色包括：

• 使用Google自主开发的Dart语言。Dart语言是一个强类型的语言，很好地支持面向对象，而且易于学习和使用。
• 使用谷歌本身的Skia渲染引擎，Android自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，实现高效渲染。
• 目前有很是丰富的视图组件，能够点击这里查看其组件目录，包括Android上经常使用的材料设计（Material Design）的UI风格，和iOS风格（Cupertino）。因为其渲染不依赖各平台相关组件，因此运行在不一样平台上的效果是一致的。
• 一样支持热部署，开发时能够像网页开发同样实时看到效果。

目前它存在的一些问题是：

• 国内学习资源目前并不丰富，使用Flutter的公司也比较少。
• 相关的生态尚未React Native那样丰富，可是其发展速度大大超过了React Native。

总结

虽然Flutter目前并非很是流行，可是笔者相信它是跨平台解决方案的将来。
若是谷歌的新系统Fuchsia OS能像当今的Android这样如日中天，甚至替代掉Android的话，Flutter的发展也会迎来它的顶峰。

本系列博客咱们就来深刻学习和探讨使用Flutter。

后面的文章咱们会逐步深刻学习Flutter的功能与实战。
个人博客中关于Flutter的全部文章能够点击这里找到，欢迎关注！

若是有问题能够留言，或者给我发邮件lloyd@examplecode.cn，期待咱们共同窗习与成长！