flutter的初步认识

464 阅读4分钟
       根据7月份在公司内部的分享写的,使用此框架进行项目开发后,得到了一定的收益,在开发的效率上提高不少,体验很不错,计划后续添加dart相关、组件开发等基础内容的开发分享以及体系架构的学习分享。

  • Flutter 是什么

Flutter是谷歌开源的一款针对iOS,Android 等主要移动端的跨平台开发的框架(针对web平台的研发也在跟进),以其优异的跨端界面渲染和操作体验而闻名,于2018.12发布正式版1.0。目前国内的技术团队都有贡献力量,并在其业务内落地flutter技术。

Flutter使用的开发语言是Dart语言(一个重要原因是dart团队在flutter团队隔壁),dart是一门现代化的编程语言,有JIT和AOT双重特性。

Flutter是谷歌下一代操作系统 Fuchsia 的UI框架。

  • 哪些厂子在用

针对flutter一整套的项目构建,混合开发的实践规范

微信团队

针对小程序跨平台的特性,跨平台构建参考flutter UI渲染,并且在底层平台交互方面可 能摒弃platform channel,实现自己的dart2cpp方案。

美团团队

针对flutter的动态化缺陷的特点,构建自己的flutter应用的动态化方案


  • 跨平台方案演进(图片引自陈翔的专栏)
  • Web (hybrid)方案: ionic / cordova等

 界面展示方面使用移动端的webview加载H5,数据交互方面使用jsbrige 约定协议进行处理。跨平台,动态性以及渲染都比较理想,随着H5的复杂,性能逐渐递减。


  • 桥接方案:ReactNative / Weex /uniapp

通过构建js 驱动层来驱动原生系统的组件以及系统能力,动态化/渲染 性能都不错,在系统升级和api变动上维护困难,跨平台上由于中间jscore的存在,对应用的动画特效的处理平台差异较大。


  • 自绘方案:flutter / cocos2d(主要针对游戏的定制化开发)
从渲染层开始就自称体系,界面的绘制(flutter ui)与渲染(skia)都由自己处理,没有了jscore的中间驱动和系统自身sdk的ui绘制。因此从跨平台/界面渲染方面很优异。由于编译成 AOT 代码(ios上就无法使用动态化技术,android是谷歌的政策限制) ,目前动态化是短板。



基本比对

   

  • 特性
1.Flutter 使用Dart作为开发语言,支持JIT(Just In Time即时编译) AOT(Ahead of Time运行前编译);产品开发期模式使用JIT ,支持热重载,开发效率高,类似web开发;产品发布期使用AOT,能够使得应用运行效率高。

2.UI绘制使用Skia 渲染引擎 从底层开始构建,Skia本身就跨平台(无特定平台依赖,因此移动端渲染跨平台成为可能)。 Skia 在图形转换、文字渲染、位图渲染方面都表现卓越,并提供友好API(android 渲染引擎就是Skia)。所以Flutter在打包APK(Android应用安装包)时,不需要再将Skia打入APK中,但iOS系统并未内置Skia,所以构建iPA时,也必须将Skia一起打包,这也是为什么Flutter APP的Android安装包比iOS安装包小的主要原因。



  • 体系结构说明:
Embedder 操作系统适配层(嵌入层): 主要处理Surface 设置,线程设置,以及平台插件等平台相关特性(此层从代码的角度来看,并无Dart语言,因此对系统底层的没有特定依赖)。

Engine 层: 主要包含 Skia、Dart 和 Text, 用来处理文字布局,图形渲染等flutter的底层工作,这一层的工作能够实现UI渲染跨平台。

Framework层:基于Dart语言构建的UI框架—flutter sdk
  • Flutter 与 Native性能比对,基本观测数据:

  启动时长/cpu、gpu占比/帧率/内存使用

 

观察结果: 启动时长/帧率几乎没有差距,内存使用以及cpu/gpu占比较原生略高。

flutter/android 内存使用比对:

flutter:


android:


观测:内存使用方面flutter略高于Android原生。