寧君宇 袁芳芳 田路強 陳森

摘 要：移動互聯(lián)網(wǎng)時代下的移動應用開發(fā)，面臨著周期短、性能強、成本低的需求，而移動系統(tǒng)與終端設備的碎片化，使得移動開發(fā)顯然無法滿足上述需求。因此跨平臺開發(fā)就順理成章的進入人們的視野。本文首先介紹移動應用跨平臺開發(fā)當下常用的方案，及各方案所解決的問題和存在缺陷，然后介紹flutter的關鍵技術及如何解決移動應用跨平臺開發(fā)當前遇到的問題。

關鍵詞：flutter;移動應用;跨平臺開發(fā)

中圖分類號：TP311.56

移動互聯(lián)網(wǎng)時代，以它獨有的變革方式，使我們的生活變的快捷、經(jīng)濟、安全和方便。移動應用更是深入到人們的生活當中，充當著各種各樣的角色，同時人們對移動應用的需求和要求也在不斷增多和增強，這就使得移動應用需要更高的開發(fā)效率和更好的用戶體驗。而當前移動應用主要分為兩大平臺iOS和Android，若使用原生方式來開發(fā)App，不僅要求分別針對iOS和Android平臺，使用不同的語言實現(xiàn)同樣的產(chǎn)品功能，還要對不同的終端設備和不同的操作系統(tǒng)進行功能適配，并承擔由此帶來的測試維護升級工作，不僅降低了開發(fā)效率，用戶體驗也很難統(tǒng)一起來。為了解決這一系列問題，移動應用跨平臺開發(fā)應勢而生。

1 移動應用跨平臺開發(fā)

目前移動應用的跨平臺開發(fā)常用方案有web容器類方案、原生渲染類方案。

web容器類方案的代表技術有基于HTML5和原生控件混合開發(fā)的Hybrid開發(fā)模式。主要采用的是原生應用內(nèi)嵌瀏覽器控件WebView的方式進行HTML5頁面渲染，并定義HTML5與原生代碼交互協(xié)議，將部分原生系統(tǒng)能力暴露給HTML5，從而擴展HTML5的邊界。這種開發(fā)模式實現(xiàn)了開發(fā)一次，即可多平臺運行的需求，降低移動應用的開發(fā)成本和開發(fā)周期。但由于HTML5頁面的展示要經(jīng)歷瀏覽器控件的加載、解析和渲染三大過程，性能消耗非常的大，這也就使得這種跨平臺開發(fā)方案的性能瓶頸很嚴重。

原生渲染方案吸取了web容器方案的性能瓶頸教訓，采用了原生渲染的方式來解決繪制問題，代表技術有FaceBook的React Native和阿里Weex，他們的實現(xiàn)機制相似，都是采用原生自帶的UI組件實現(xiàn)代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。但為了保證上層語言和原生自帶的UI組件良好溝通，它們之間的溝通橋梁十分重要，但是各平臺都有其各自實現(xiàn)方式，導致橋梁的復雜性在不斷的增加，尤其是涉及到復雜跨橋的調用的時候，會出現(xiàn)一些性能上的問題，維護成本也隨之提高了很多。

原生渲染方案解決了web容器類方案性能瓶頸問題以及用戶體驗問題，但是其自身的難維護、適配復雜的問題也十分讓人頭痛。針對以上方案的弊端，移動應用跨平臺開發(fā)的第三類方案，自繪UI方案。flutter就是自繪UI方案中的代表。

2 flutter概述

flutter是谷歌2018年發(fā)布的跨平臺移動UI框架，是構建Google物聯(lián)網(wǎng)操作系統(tǒng)Fuchsia的SDK，主打跨平臺、高保真、高性能。開發(fā)者可以通過Dart語言開發(fā)App，一套代碼可以同時運行在iOS和Android平臺。flutter使用Native引擎渲染視圖，并提供了豐富的組件和接口，這無疑為開發(fā)者和用戶都提供了良好的體驗。

3 flutter關鍵技術

flutter開辟了一種全新的思路，即從頭到尾重寫一套跨平臺的UI框架，包括渲染邏輯，甚至是開發(fā)語言。通過這樣的思路，可以盡可能地減少不同平臺之間的差異，同時保持和原生開發(fā)一樣的高性能，同時flutter借助先進的工具鏈和編譯器，成為了少數(shù)同時支持JIT和AOT的語言之一，開發(fā)期調試效率高，發(fā)布期運行速度快、執(zhí)行性能好，在代碼執(zhí)行效率上可以媲美原生App，也成了目前最受業(yè)界關注的框架。

3.1 flutter的原理

flutter的架構圖如下圖所示：

flutter架構采用分層設計，從下到上分為三層，依次為：Embedder、Engine、Framework。Embedder是操作系統(tǒng)適配層，實現(xiàn)了渲染Surface設置，線程設置，以及平臺插件等平臺相關特性的適配。從這里我們可以看到，flutter平臺相關特性并不多，這就使得從框架層面保持跨端一致性的成本相對較低.Engine層主要包含Skia、Dart和Text，實現(xiàn)了flutter的渲染引擎、文字排版、事件處理和Dart運行時等功能。Skia和Text為上層接口提供了調用底層渲染和排版的能力Dart則為flutter提供了運行時調用Dart和渲染引擎的能力。而Engine層的作用，則是將它們組合起來，從它們生成的數(shù)據(jù)中實現(xiàn)視圖渲染。Framework層則是一個用Dart實現(xiàn)的UI SDK，包含了動畫、圖形繪制和手勢識別等功能。為了在繪制控件等固定樣式的圖形時提供更直觀、更方便的接口，flutter還基于這些基礎能力，根據(jù)Material和Cupertino兩種視覺設計風格封裝了一套UI組件庫。我們在開發(fā)flutter的時候，可以直接使用這些組件庫。

3.2 flutter的渲染

渲染引擎依靠跨平臺的Skia圖形庫來實現(xiàn)，Skia引擎會將使用Dart構建的抽象的視圖結構數(shù)據(jù)加工成GPU數(shù)據(jù)，交由OpenGL最終提供給GPU渲染，至此完成渲染閉環(huán)，因此可以在最大程度上保證一款應用在不同平臺、不同設備上的體驗一致性。

3.3 Dart

flutter使用Dart作為開發(fā)語言主要是因為flutter使用Dart語言開發(fā)，主要有以下幾點原因：Dart一般情況下是運行DartVM上，但是也可以編譯為ARM代碼直接運行在硬件上Dart同時支持AOT和JIT兩種編譯方式，可以更好的提高開發(fā)以及App的執(zhí)行效率。Dart可以利用獨特的隔離區(qū)（Isolate）實現(xiàn)多線程。而且不共享內(nèi)存，可以實現(xiàn)無鎖快速分配。分代垃圾回收，非常適合UI框架中常見的大量Widgets對象創(chuàng)建和銷毀的優(yōu)化。在為創(chuàng)建的對象分配內(nèi)存時，Dart是在現(xiàn)有的堆上移動指針，保證內(nèi)存的增長是程線性的，于是就省了查找可用內(nèi)存的過程。

4 flutter展望

flutter的到來，將移動應用跨平臺開發(fā)代入了自繪UI方案的時代，它從web容器類方案、原生渲染類方案中汲學習和借鑒了很多優(yōu)秀的設計，很多概念兩邊都有對應，比如React Native的Component和Flutter的Widget、Flex布局思想、狀態(tài)管理和函數(shù)式編程等等，這類的知識都是兩個框架通用的技術。未來也許還會出現(xiàn)新的解決方案，老框架也會不斷更新，只有掌握核心原理才能真正立于不敗之地。

5 結語

本文首先介紹了移動應用跨平臺開發(fā)的各種解決方案及其優(yōu)缺點，說明了flutter的到來解決了哪些問題，然后分析了flutter的關鍵技術，這讓我們知道flutter是一個設計理念革新，架構優(yōu)異的方案，不久之前，Google團隊已經(jīng)完成了flutter的Web的官方Demo，在桌面操作系統(tǒng)的探索上也取得了進展，未來大前端技術棧是否會由flutter完成統(tǒng)一，值得期待。

參考文獻：

[1]施偉，王碩蘋，郭鳴，等.跨平臺移動旌用中間適配層設計與實現(xiàn)[J].計算機工程與應用，2014（16）.

[2]陸鋼，朱培軍，李慧云，文錦軍.智能終端跨平臺應用開發(fā)技術研究[J].電信科學，2012，28（05）：14-17.

[3]李麗平，薛玉倩.基于HTML5跨平臺移動應用開發(fā)的研究與實踐[J].河北軟件職業(yè)技術學院學報，2017，19（02）：35-38.

[4]張呈宇.基于HTML5的跨平臺移動APP開發(fā)研究[J].通訊世界，2018（08）：46-47.

[5]邢曉鵬.HTML5核心技術的研究與價值分析[J].價值工程，2011（22）.