Flutter介紹
Flutter是Google推出的開源移動(dòng)應(yīng)用開發(fā)框架楞艾。開發(fā)者可以通過開發(fā)一套代碼同時(shí)運(yùn)行在iOS和Android平臺(tái)。
它使用Dart語言進(jìn)行開發(fā)犀农,并且最終編譯成各個(gè)平臺(tái)的Native代碼惰赋,這樣既保證了開發(fā)效率,也保證了各個(gè)平臺(tái)的運(yùn)行效率呵哨。其相當(dāng)于從頭到尾重寫了一套UI框架赁濒,不依賴具體平臺(tái)的組件。其所有的組件都是"Widget"孟害。渲染引擎則依靠高效渲染庫Skia實(shí)現(xiàn)拒炎。
下面我們對(duì)比一下H5、React Native挨务、Flutter這些跨平臺(tái)的解決方案击你。
移動(dòng)端的跨平臺(tái)技術(shù)
H5技術(shù)
常被人提起的H5技術(shù),其實(shí)就是網(wǎng)頁+JavaScript谎柄。比如目前的一些流行的JS框架Vue丁侄,React,AngularJS等都是為了構(gòu)建網(wǎng)頁朝巫。針對(duì)移動(dòng)端構(gòu)建出來的網(wǎng)頁可以實(shí)現(xiàn)在跨平臺(tái)的功能鸿摇,但是其缺點(diǎn)也很明顯:
- 渲染效率低下,用戶體驗(yàn)差劈猿。很多H5在iOS平臺(tái)表現(xiàn)尚可拙吉,但是在Android上特別是一些低端機(jī)上的表現(xiàn)確實(shí)讓人不敢恭維潮孽。
- 網(wǎng)頁調(diào)用設(shè)備硬件相關(guān)API比較困難,而且支持的功能較少筷黔,實(shí)現(xiàn)此類需求是H5的短板往史。
React Native
React Native(RN)發(fā)布于2015年,也是使用JavaScript語言進(jìn)行跨平臺(tái)APP的開發(fā)佛舱。與H5開發(fā)不同的是椎例,它使用JS橋接技術(shù)在運(yùn)行時(shí)編譯成各個(gè)平臺(tái)的Native代碼,其使用的技術(shù)Facebook的Flux技術(shù)名眉。 其優(yōu)點(diǎn)是目前的生態(tài)比較成熟粟矿,目前也有很多跨平臺(tái)應(yīng)用使用React Native。它也是跟Flutter對(duì)比的主要對(duì)象损拢。 其特點(diǎn)是:
- 使用JavaScript語言陌粹,由于JS被廣泛地使用,所以RN也很容易被接受福压。
- RN依賴JS的運(yùn)行時(shí)環(huán)境掏秩,也就是JS橋接技術(shù)。其使用Facebook的Flux架構(gòu)荆姆。
- RN僅提供了UI渲染和設(shè)備訪問的API蒙幻,很多功能必須依賴第三方庫來實(shí)現(xiàn)對(duì)本地組件的使用。
- 生態(tài)目前比較完善胆筒,使用的公司也比較多邮破,特別是對(duì)JS比較熟悉的同學(xué)容易上手。
- 支持熱部署仆救,開發(fā)過程中可以節(jié)約很多時(shí)間抒和。
但是它也并不是完美的:
- 它的渲染方式還是調(diào)用各個(gè)平臺(tái)的原生控件,有時(shí)需要針對(duì)不同的平臺(tái)做不同的優(yōu)化彤蔽。
- 其性能相對(duì)于H5有很大的提高摧莽,但是并沒有完美解決,白屏顿痪,丟幀問題依然存在镊辕。
Flutter
Flutter也看到了目前的跨平臺(tái)解決方案并不完美,所以它借鑒了React Native的一些思想蚁袭,做出了很大的優(yōu)化征懈。它將代碼編譯成原生代碼,并且直接在各個(gè)平臺(tái)中使用其高效渲染引擎Skia進(jìn)行渲染揩悄,沒有橋接受裹,不調(diào)用平臺(tái)相關(guān)控件。
這種設(shè)計(jì)思想完美解決了不同平臺(tái)的性能問題。
歸功于其設(shè)計(jì)思想棉饶,我們可以真正實(shí)現(xiàn)一套代碼,運(yùn)行不同的平臺(tái)镇匀。在其推出之后照藻,關(guān)注的開發(fā)者數(shù)量和相關(guān)的教程的增長速度遠(yuǎn)超當(dāng)時(shí)的React Native。
其特點(diǎn)包括:
- 使用Google自主開發(fā)的Dart語言汗侵。Dart語言是一個(gè)強(qiáng)類型的語言幸缕,很好地支持面向?qū)ο螅⑶乙子趯W(xué)習(xí)和使用晰韵。
- 使用谷歌自己的Skia渲染引擎发乔,Android自帶Skia引擎,iOS平臺(tái)上Flutter也會(huì)把Skia引擎打包到APP中雪猪,實(shí)現(xiàn)高效渲染栏尚。
- 目前有非常豐富的視圖組件,可以點(diǎn)擊這里查看其組件目錄只恨,包括Android上常用的材料設(shè)計(jì)(Material Design)的UI風(fēng)格译仗,和iOS風(fēng)格(Cupertino)。由于其渲染不依賴各平臺(tái)相關(guān)組件官觅,所以運(yùn)行在不同平臺(tái)上的效果是一致的纵菌。
- 同樣支持熱部署,開發(fā)時(shí)可以像網(wǎng)頁開發(fā)一樣實(shí)時(shí)看到效果休涤。