前言
本人目前负责的项目是原生+Webview方式开发的,由于Webview的体验不太友好,所以决定选择一种混编的方式,选择一种跨平台的技术来提升改善Webview的体验,通过各种权衡考虑使用了RN,虽然目前RN在重构,但是没有人可以否认目前RN的霸主地位,我相信它会越来越好的,本章节就不说RN了,接下来说说Google的Flutter。
Flutter Demo项目地址 : Flutter-App
Flutter
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Flutter 是由 Google 的工程师团队打造的,用于创建高性能、跨平台的移动应用的框架。
Flutter 针对当下以及未来的移动设备进行优化,专注于 Android and iOS 低延迟的输入和高帧率
Flutter的设计跟react-native很像,但是比RN进了一步
Flutter的开发语言是Dart
移动端跨平台开发技术演进
现在主流的移动开发平台是Android和iOS,之前还有过windows phone。从最开始的Hybrid混合开发技术,到RN的桥接技术,到现在新兴的Flutter技术,跨平台开发技术一直在演进。
跨平台开发第一个考虑的就是性能问题
- RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好;
- Flutter 吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染
react-native框架原理图
Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScriptCore,而是自己实现了一台UI框架,然后直接系统更底层渲染系统上画UI。所以它采用的开发语言不是JS,而Dart。据称Dart语言可以编译成原生代码,直接跟原生通信。
Flutter框架原理图
Flutter将UI组件和渲染器从平台移动到应用程序中,这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas,以便定制的UI组件可以出现在设备的屏幕上,以及访问事件(触摸,定时器等)和服务(位置、相机等)。这是Flutter可以做到跨平台而且高效的关键。另外Flutter学习了RN的UI编程方式,引入了状态机,更新UI时只更新最小改变区域。
系统的UI框架可以取代,但是系统提供的一些服务是无法取代的。Flutter在跟系统service通信方式,采用的是一种类似插件式的方式,或者有点像远程过程调用RPC方式。这种方式据说也要比RN的桥接方式高效。
Flutter与RN异同
Flutter性能会更好无线接近原生的体验,Dart是AOT编译的,编译成快速、可预测的本地代码
RN采用JS语言开发,基于React,对前端工程师更友好。Dart语言受众小
Flutter自己实现了一套UI框架,丢弃了原生的UI框架。而RN还是可以自己利用原生框架,两个各有好处。Flutter的兼容性高,RN可以利用原生已有的优秀UI
RN的布局更像css,而Flutter的布局更像native布局,但是去掉xml通过代码直接写需要适应下
Flutter的第三方库还很少,RN发展的早,虽然也还不完善,Flutter github还有3000多个issues要解决,还有很长的路要走。