flutter介紹與環境安裝

語言: CN / TW / HK

我報名參加金石計劃1期挑戰——瓜分10萬獎池,這是我的第6篇文章,點選檢視活動詳情

移動開發新利器-你好,Flutter

在這裡插入圖片描述

移動開發發展

​ 2011年第一季度,Android在全球的市場份額首次超過塞班系統,躍居全球第一。2011年,移動網際網路各種應用開始普及,使用者習慣慢慢養成。從2011年到如今,移動網際網路實實在在的影響著我們日常生活中的點點滴滴。在網際網路草莽興起的年代,只要能用Android提供的SDK完成一個簡單介面的編寫就能找到一份不錯的工作。但是移動網際網路慢慢進入下半場,已經沒有了高速發展期的紅利,在如今我們移動網際網路從業人員更應該從各個方面不斷強化自己的技能。

第一階段:原生開發

​ 在早期的移動開發中,面對這個嶄新的方向,人們都處於摸索節點,那時候大家都在進行原生的開發。但是誰都不想放過移動網際網路這塊蛋糕。Web開發人員的數量遠遠多於移動網際網路開發人員,同時由於原生開發的成本與動態化漸漸無法滿足要求。同時原生開發維護成本大、開發週期長,動態化能力弱,所以人們都在尋找跨平臺的方案,希望能夠只需要一個團隊維護一份程式碼,就能夠完成Android與IOS的開發需求。

第二階段:H5

​ 早在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。 在這裡插入圖片描述

第三階段:跨平臺框架

​ 為了突破使用WebView進行渲染的效能問題,2015年4月,Facebook開源了JS框架 React 在原生移動應用平臺的衍生產物——React Native。RN將渲染交給原生,而不是直接在HTML中完成。

在這裡插入圖片描述

​ 我們編寫的依舊是JavaScript程式碼。這時候,我們使用JS寫好UI後,會組成一個Virtual DOM。然後通過Bridge將VD發給原生層去進行UI的建立。這種方式看起來與原生開發非常相似,我們在進行原生開發的時候,寫好XML佈局再由Java對這個佈局XML進行解析,然後通過反射建立對應的View,這個XML就是一個介面的配置檔案。而使用RN,我們的配置則由XML變成了JS編寫。不同的是我們在原生開發中,xml是靜態的配置,而RN中要更新UI,又需要經歷一次Bridge傳遞的過程。同時如果需要在RN中呼叫原生API也需要通過bridge來進行傳遞。 這樣導致需要頻繁的跨橋呼叫,bridge 的成本太高了。

​ 雖然RN底層是使用原生進行繪製,但是畢竟中間多了一層Bridge,也就是多了一層中介,你租房是希望能直接與房東進行交流還是和中介公司?很顯然,去中介公司進行租房,你將花費一些代價。所以RN多了一層中介——Bridge,它絕無可能與原生的效能相媲美,但是為了跨平臺,這點代價不是致命的。你會因為中介需要多付中介費,就完全靠自己去找房東個人租房子嗎?

Flutter

​ 之前我們瞭解到,現有的跨平臺技術的工作機制。根據之前的瞭解,我們是不是設想如果擁有一個框架,我們編寫的程式碼直接會根據打包的平臺編譯為此平臺本身的原生程式碼,在執行時期直接執行這些編譯後的原生程式碼,就和我們進行原生開發一樣,不再需要Bridge來擔任中介的角色,是不是能夠擁有最優秀的效能?

Flutter是什麼?

​ Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生使用者介面。Flutter可以與現有的程式碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。

從官方的介紹中,能看出三個關鍵點:

  • 跨平臺移動UI框架

  • 與現有的程式碼一起工作

  • 完全免費、開源

​ 第一點:移動端跨平臺,一般指的就是Android與IOS兩大平臺。值得我們討論的是除了Android、IOS之外Flutter它還是一個叫做"Fuchsia"的作業系統主要的UI開發框架。

Fuchsia是Google開發的繼Android和Chrome OS之後的第三個系統。外界都在猜測它會取代Android,但是也只是猜測而已。

​ 第二點:與現有的程式碼一起工作。這意味著,Flutter可以支援進行"混合開發",我們的專案如果一開始是使用原生的形式開發的,在後續業務功能的實現上,我們希望能夠利用到跨平臺的優勢,那麼Flutter它執行我們在原有程式碼的基礎上嵌入Flutter來進行開發。

​ 而第三點完全免費開源,這意味著我們可以完全免費的藉助Flutter進行商業App的開發,不用擔心任何版權問題。

17年知乎熱帖:如何看待百度要求內部全面停止使用 React / React Native?,就是由版權引發的全球風暴,導致BAT等已準備棄用RN。

在這裡插入圖片描述

​ Flutter的工作機制和我們預想的一樣,他正是通過將它的程式碼根據不同的平臺編譯為對應平臺的機器碼,這樣就不需要Bridge的存在了。Flutter自己嵌入了一個 Dart VM,我們編寫的程式碼會被編譯成ARM的機器碼,在Android中就是通過Dart VM所在的libflutter.so完成我們自己編寫的程式碼生成的機器碼的載入執行。

Android真機一般都是ARM架構的,模擬器是X86或者x86_64

IOS真機一般也是ARM,模擬器早期都是I386,在5s的模擬器後好像都是x86_64了。

Flutter架構

​ Flutter框架整體擁有兩層架構,由上往下,第一層是Framework類庫層,提供給我們在開發時所使用的各種Widget、動畫等。而第二層則是Engine引擎層,我們上面所說的Dart VM也就處於這一層。 在這裡插入圖片描述

Flutter的特點

你覺得Flutter前景怎麼樣?為什麼你會選擇使用Flutter?

​ 類似Flutter這種框架的出現是必然的,現有的跨平臺框架,比如RN都是基於JS,由於JS的執行效能,導致跨平臺應用效能一直無法突破瓶頸。而Flutter在Debug使用JIT編譯,支援熱過載,能夠提高我們的開發效率,而Release中利用AOT直接編譯成機器碼,能夠達到更好的效能。

​ 從設計角度而言,Flutter提供了非常豐富的Widget元件,能夠讓我們非常輕鬆的實現Android或者IOS風格的UI效果。

​ Flutter作為Google官方孵化的專案,擁有更加規範與完善的生態圈,依託官方就是它最大的優勢之一。像IOS中的熱更新,被蘋果官方一句話就讓你的努力白費了,但是如果是IOS官方推出的熱更新還用擔心這樣的問題嗎?

Flutter優勢

• 熱過載 頁面每次改動,不需要手動去重新整理,可自動重新整理。即支援開發過程中熱過載。 • 統一的UI Flutter 提供豐富的內建 UI 元件—— Material Design(針對 Android )和 Cupertino (適用於 iOS ),不需要擔心在眾多裝置上看起來會有什麼不同。

Dart

與其它跨平臺框架使用JavaScript作為其開發語言不同的是,Flutter使用的是:Dart。 特點: • 基於JIT的快速開發週期 Flutter在開發階段採用JIT模式,這樣就避免了每次改動都要進行編譯,極大的節省了開發時間; • 基於AOT的釋出包 Flutter在釋出時可以通過AOT生成高效的ARM程式碼以保證應用效能。 為了快速流暢的使用者體驗需要能夠在每個動畫幀執行大量的程式碼,不能有周期性的停頓,否則會造成掉幀。 • 單執行緒: 不需要鎖,不存在資料競爭和變數狀態同步,也沒有執行緒上下文切換的效能損耗和鎖導致的卡頓。 • 垃圾回收 多生代無鎖垃圾回收器,專門為UI框架中常見的大量Widgets物件建立和銷燬優化。

開發環境配置

https://doc.flutterchina.club/get-started/install/