flutter开发 flutter介绍(一)

flutter.png

Flutter是什么?

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

移动端跨平台框架

cordova工作机制.png

在传统的原生开发中,一般都要维护Android、iOS两个开发团队,版本迭代时,无论人力成本,还是测试成本都会变大。这一点可能对于我们普通的android程序员感受并不深,或者说我们不care这一点。但是站在公司的角度上,如果能够有一套代码,直接就能够开发出android的apk和ios的ipa,是不是意味着我只需要拥有开发维护这套代码的一个团队就可以了?从人力成本上来说,可以让我少发一些工资。而在开发的角度,一套代码也能够很好的完成复用、测试以及UI风格的统一。早在2008年,就有一款叫做“PhoneGap”的框架获了奖并开始支持Android平台。现在我们说的PhoneGap一般指的是"Cordova"。它是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽离出的核心代码,是驱动PhoneGap的核心引擎。两者维护的是共同的一份源代码组件,只有名字和包名不一样。PhoneGap是一个采用HTML,CSS和JavaScript来完成跨平台开发的技术,当时PhoneGap宣称接近原生性能。然而它的工作原理是基于WebView,然后利用JavaInterface来完成与原生代码的交互。我们称这种工具为WebView JavaScript Bridge(JsBridge)。这种方式,能够很好的解决跨平台与动态更新的需求但是,我们都知道android WebView的渲染效率很差,同时JavaScript是解释型语言,它不需要编译,在运行时候解释执行,这就导致JavaScript的执行性能太低了。同时因为android自身的问题,使用WebView过程中消耗的内存,没有办法在不需要使用的时候进行及时的回收,这样会导致我们的可用内存越来越少,最终OOM。所以类似Flutter这种框架的出现是必然的,现有的跨平台框架,比如RN都是基于JS,由于JS的执行性能,导致跨平台应用性能一直无法突破瓶颈。而Flutter在Debug使用JIT编译,支持热重载,能够提高我们的开发效率,而Release中利用AOT直接编译成机器码,能够达到更好的性能。从设计角度而言,Flutter提供了非常丰富的Widget组件,能够让我们非常轻松的实现Android或者IOS风格的UI效果。

Flutter优势

热重载
页面每次改动,不需要手动去刷新,可自动刷新。即支持开发过程中热重载。

统一的UI
Flutter 提供丰富的内置 UI 组件——Material Design(针对 Android)和Cupertino(适用于 iOS ),不需要担心在众多设备上看起来会有什么不同。

Flutter架构

flutter架构.png

Flutter的架构主要分成三层:Framework,Engine和Embedder。

1.Framework使用dart实现,包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets,文本/图片/按钮等基础Widgets,渲染,动画,手势等。此部分的核心代码是:flutter仓库下的flutter package,以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。
2.Engine使用C++实现,主要包括:Skia,Dart和Text。Skia是开源的二维图形库,C++ 的2D绘图引擎,调用GPU来完成渲染,提供了适用于多种软硬件平台的通用API。

3.Embedder是一个嵌入层,即把Flutter嵌入到各个平台上去,这里做的主要工作包括渲染Surface设置,线程设置,以及插件等。从这里可以看出,Flutter的平台相关层很低,平台(如iOS)只是提供一个画布,剩余的所有渲染相关的逻辑都在Flutter内部,这就使得它具有了很好的跨端一致性。

Dart语言介绍

特点:
基于JIT的快速开发周期
Flutter使用dart语言,在开发阶段采用JIT模式,这样就避免了每次改动都要进行编译,极大的节省了开发时间;
基于AOT的发布包lutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。

为了快速流畅的用户体验需要能够在每个动画帧运行大量的代码,不能有周期性的停顿,否则会造成掉帧。

单线程:
不需要锁,不存在数据竞争和变量状态同步,也没有线程上下文切换的性能损耗和锁导致的卡顿。

垃圾回收
多生代无锁垃圾回收器,专门为UI框架中常见的大量Widgets对象创建和销毁优化。

Flutter与RN的优势

RN是通过JavaScript通过 bridge 传递到native完成原生绘制, bridge 的成本高,因为需要频繁的跨桥调用,导致卡顿等性能问题。
rn.png

Flutter利用DVM(dart虚拟机) 减少了桥的交互,在运行时期直接执行这些编译后的原生代码,就和我们进行原生开发一样,不再需要Bridge来担任中介的角色
flutter.png

Flutter未来前景

使用Flutter的各大厂商.png

越来越多的厂商使用flutter进行开发,例如阿里,京东金融,腾讯,Flutter的前途一片大好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容