华为快应用引擎架构及开发实践
目 錄
1 快應用技術架構
1.1快應用介紹及其特點
1.2華為快應用引擎架構簡介
1.2.1 應用開發（前端框架 + 組件& API 能力）
1.2.2 系統整合（應用管理，卡片-嵌入式SDK，安全機制等等）
1.2.3 性能體驗 & 新興場景 （JavaScript 引擎，渲染引擎，端-云-芯加速，新興場景）
2 如何快速開發一個快應用
2.1環境準備
2.2開發一個影評的快應用
1、快應用技術架構
1.1 快應用介紹及其特點
2017年3月華為與Oppo，Vivo，小米等9家終端設備廠商，聯合發布快應用聯盟標準。快應用是一種基于終端設備硬件平臺的新型應用形態，無需安裝，即點即用，又兼具原生應用體驗（性能、系統整合、交互等）。同時，快應用在誕生之初就在開發規范、能力接入、開發者服務等層面實現了終端設備廠商間的標準化統一，極大的降低開發者的適配成本。
與傳統應用相比，快應用具備如下特點：
Instant：即點即用，用戶無需等待 Everywhere：與終端設備的使用場景深度整合，入口無處不在（搜索，智能助手，智能推薦，應用市場，瀏覽器 ……） Efficient：準前端的開發方式，效率高 1.2 華為快應用技術引擎架構簡介 圖1-1快應用的總體框架圖
圖1-1是快應用的總體框架示意圖。最上面是應用形態以及場景入口，中間是快應用引擎，底下是OS(操作系統)的基礎設施及其硬件。從執行路徑層面，有標準的HTML5方式支撐通用的Web場景（一般通過系統的Webview組件或定制的Webview）， 以及 JS（JavaScript）+Native的方式，支撐更輕量、更快速的體驗。 下面將按3個層面方面簡要介紹快應用引擎的架構。
1.2.1 應用開發（前端框架 + 組件 & API 能力） 快應用的前端設計借鑒并整合了主流前端框架（Vue，React等）的設計思路：以組件化的方式構建應用，以數據綁定為核心的MVVM設計模式，以V-DOM的方式提升性能，同時選擇了簡潔清晰的類Vue的模板。同時對布局方面做了相應精簡。從新的應用形態、映射原生UI、能力開放的角度，需要定義一套組件與API規范，方便開發這快速開發應用。
1.2.2 系統整合（應用管理，卡片-嵌入式SDK，安全機制等等）
快應用作為完整的應用形態，可以與系統深入整合，如同原生應用一樣運行，以及和系統交互。快應用目前有兩種形態：全屏方式的獨立應用形態與嵌入方式的卡片形態。在獨立應用的形態下，給用戶的體驗就像原生的應用程序，有完整的生命周期管理，頁面管理，路由等。快應用可以寄生于安卓的Activity，頁面寄生于Fragment，并通過獨立的后臺Service進行實例的管控。卡片則是另外一種形態，通過嵌入式SDK作為一個獨立的局部控件嵌入到系統的各個角落，輕量化的展現動態內容。在安全隔離方面，可通過沙盒機制，進程隔離，權限控制，并結合操作系統層的支持做到較好的安全保障。
1.2.3新興場景 （JavaScript引擎，渲染引擎，端-云-芯加速，新興場景） 在交互體驗、資源開銷和穩定性等方面，快應用通過引入原生渲染路徑，進而實現前端開發方式+原生渲染與平臺能力有效組合。
不同于其它的應用層的跨平臺框架，快應用植根于終端設備系統，可實現從芯片<-->操作系統<-->云的深度整合。端和云的結合以啟動性能加速為例，通過云和端的協同渲染，網絡鏈路層的優化可以大大加速快應用啟動速度。同時可以整合硬件平臺的特有能力，進一步提升體驗。例如可以結合華為手機AI芯片，將NPU的算力整合到快應用引擎中來，使得AI場景（人臉識別、圖像超分等）在端側可以低延時、高性能的執行，同時又有效保護了用戶的隱私，并節省帶寬。
下面以啟動加速作為案例，分享一下體驗優化方面做的一些工作。
秒開的用戶體驗是快應用的核心競爭力之一。Google的統計表明，頁面打開時間超過3秒用戶會流失13%，超過6秒用戶會流失60%。反過來，打開時間每減少1秒可提升27%的轉化率。目前快應用從用戶點擊到首頁內容完全展示基本需要2秒左右甚至更久。
圖1-2 啟動流程
圖1-2是快應用的啟動流程：
1）首次啟動時，用戶點擊觸發快應用包的下載，同時做引擎初始化相關工作。當整包下載與校驗完成后，需要展示的第一個頁面的JavaScript文件才會被加載并開始渲染。這個過程中包下載是瓶頸，從實測數據看，正常網絡下200K左右的包下載時間至少要400毫秒以上，2M包要2秒以上。
2）頁面渲染包括JavaScript加載、頁面與JavaScript框架邏輯的執行、布局的運算，最終到原生UI控件的繪制。其中，頁面內邏輯執行時會有一次或多次的到應用自己的三方服務器的網絡請求，請求返還的數據驅動頁面的再次渲染，直至首屏內容完全展示。這里網絡請求、JavaScript執行、排版與繪制并非簡單的串行關系，而是并行化地交織在一起影響著整個頁面的渲染性能，并與頁面設計的邏輯、網絡狀況與設備運行的狀態強相關。
啟動性能的優化涉及到的內容較多，這里主要介紹兩種優化方案：
流式加載 -- 解決網絡延時問題
快應用首次啟動需要從云端下載快應用的程序包（RPK），整包下載完成才能進行解壓與校驗，之后加載并執行相應的JavaScript文件。排除服務器端響應速度與網絡狀況的影響，下載延時與文件包大小成正比。我們引入了端云協同的流式加載方式以減少包延時。
圖1-3 流式加載
流式加載是將啟動所需要的資源在網絡流中優先傳輸，這部分資源傳輸完后并進行解壓與校驗，首頁的渲染就可以立即執行了。網絡流的后續傳輸仍在持續進行直至下載過程全部完成。首次渲染所需資源往往很小，所以流式加載能明顯降低下載延時，包越大效果越明顯。流式加載需要解決如下問題：
1）如何決定哪些內容要優先下載？
正常情況下啟動所需資源比較固定（公共資源、全局的配置文件、首頁JavaScript文件與圖片等等），這些在應用打包的時候排在文件的前部即可；當首次打開是某個非首頁時，我們就需要在傳輸時將該頁面所需資源排列到網絡流前部。
2）訪問到了某個未下載的資源怎么辦？
網絡狀況是不可控的，存在一定的概率出現延時較高的情況。如果此時從首次打開的A頁面跳轉的B頁面而B頁面所需的資源尚未下載完成，則需要在頁面跳轉的過程進行等待，并向服務發起優先調度B頁面資源。等B頁面資源下載完成后，繼續頁面跳轉的過程。
3）簽名問題如何解決？
原始的簽名方式是對整包進行簽名，待整個包下載完成后才能執行校驗，這是無法滿足流式加載的需求的。為此我們引入了二級校驗的方式：對包的不同片段單獨生成hash值，將所有的Hash值拼接成一個Hash文件，對該Hash文件進行簽名。下載時Hash文件被優先傳輸，傳輸完先校驗Hash文件的合法性。之后流式加載過程中，無論哪個片段下載完成后，可以立即計算Hash值，并與Hash文件中相應的Hash值進行比對，校驗合法性。
快照 -- 解決首屏渲染問題
首頁的渲染也是一個比較耗時的過程，要經過JavaScript加載、頁面與JavaScript框架邏輯的執行、布局的運算，最終到原生UI控件的繪制。這里我們引入一種快照機制，來加速渲染過程。
圖1-4 快照
首先，在云端對所需要的頁面進行預渲染處理，生成一種渲染的中間格式--快照。它不需要JavaScript的運算，解析后可以直接快速地進行頁面數據請求、UI的排版與繪制。快照格式壓縮后也非常小，50K左右的JavaScript文件生成快照的大約幾K。
由于快照文件非常小，可以作為快應用的元數據的一部分分發到對應的快應用啟動入口。例如應用市場，用戶在應用市場搜索到快應用時，快照已經隨著快應用的名字，包下載鏈接等信息一起加載完成。
當快應用首次加載啟動時，包的下載地址與快照文件一起傳給快應用引擎。引擎在請求下載快應用包的同時，加載解析快照，渲染出首屏。當包下載完成后,標準的渲染流程在快照的基礎上繼續執行。
優化效果展示
以“快看漫畫”為例，通過這些優化，目前評測下來應用的冷啟動時間降低將近一半（從~2秒到~1秒）。后續會逐步上線并擴展更多場景。
總結
即點即用是應用和服務的趨勢。快應用作為一種新型的應用形態，通過結合動態化前端框架，原生渲染能力，以及操作系統和芯片級整合，達到較好的用戶體驗。當然體驗優化，場景擴展永無止境，我們會持續努力，不斷探索優化來支撐更好的體驗。
2、如何快速開發一個快應用
華為快應用IDE是由華為推出一款針對快應用的集成開發環境，基于快應用廠商聯盟標準，提供了快應用開發、構建、調試、測試、發布等能力。
圖1-1 快應用開發流程
2.1 環境準備
http://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool
安裝完成以后，支持啟動IDE會看到如下界面：
可以看到，這是典型的IDE結構，之后就開始開發一個快應用。
2.2 開發一個影評的快應用
新建一個快應用工程，我們使用最基礎的HelloWorld模板，點擊菜單“文件->新建項目”，輸入項目項目信息即可完成創建。
項目創建完成后，可以看到IDE的主要功能布局。這是一個典型的常見IDE布局結構：菜單欄、控制欄、資源管理區、代碼編輯區、預覽區、控制臺區，這些都是開發者比較常見的，都很容易上手使用。
開始具體的編碼了。這里設計了一個簡單的影評應用業務邏輯：應用的首頁是電影的列表，點擊進去以后，可以查看到相應影評。首先是首頁電影列表的開發，我們直接將模板中的hello.ux為影評首頁，然后新增一個影評的詳細子頁面，命名為detail.ux。將所需的圖片資源放在Common目錄下。影評文本寫在ux源碼文件里。這些動作可以通過在資源管理區使用右鍵中完成。
接下來配置頁面與路徑，參考標準規范，在工程的manifest.json文件的router和display，添加detail頁面，把Hello，改成“影評”，同時添加“詳情”。
到這里，整個應用的結構已經完成了，下面就是具體的編碼了。首頁需要展現電影列表，我們這里使用List[]數組，使用快應用的list組件循環顯示影評的圖片$item.image和標題$item.title。goDetail()函數在點擊時跳轉到影評詳情頁detail.ux。這里有驚喜，IDE的編碼輔助上提供了很不錯的支持，基于快應用標準，代碼的聯想、補齊、語法檢測與修改意見、定義與引用跳轉，都很好的支持了，省去了不少標準語法check的工作。
完成影評列表的首頁開發，下面就是具體影評的詳細頁面了。detail.ux作為詳情頁，這里使用簡單text組件顯示文本，當前也可以做更多的樣式，可以添加圖片或電影視頻片段等等。我們這里直接寫幾個影評信息，就完成了詳情頁的開發了。
接下來就是看運行效果了，點擊“預覽”控制按鈕，在預覽區域就能看到運行效果了，可以一邊寫代碼，一邊看到實時的運行效果，這個功能很實用，也解決了之前被開發者抱怨沒有預覽，不便于開發的問題。
編碼已經基本完成了，下面試一下調試功能，快應用IDE的調試功能提供了Source斷點調試、Element元素審查、NetWork網絡抓包、Log分析等特性。點擊調試按鈕（快捷鍵F5），啟動調試進程，如下圖，也是典型的DevTools方式，比較常用，這里嘗試了斷點調試與Inspect。
直接在控制欄，點擊“調試”按鈕，進入調試。
點擊控制欄的“Inspect”，推送的手機運行，會在桌面彈出運行框，這個時候也是可以拔出手機繼續使用的。
到這里我們影評快應用的開發已經完成了，繼續看IDE其他特性。在控制欄有一個測試按鈕。點擊測試按鈕，在登錄成功后，在彈出的面板里，點擊”按鈕”就可以一鍵生成自動化測試任務。大概10分鐘左右，測試就完成，還可以查看詳細的測試報告。從測試報告可以看出，快應用的測試是在云端進行的，覆蓋了主流的機型與安卓版本，測試項也很豐富，每一個測試頁面都覆蓋到了，可以在報告中看到詳細的步驟。這樣解決了沒有手機覆蓋兼容性、測試工作投入大的難題，很實用。
最后發布快應用，可以直接進入這個地址：https://www.quickapp.cn/即可在廠商聯盟官網上發布這個快應用，綁定完各廠商的開發者帳號后，發布一次即可在所有的聯盟的手機廠商上上架使用了。
轉載于:https://www.cnblogs.com/androidga/p/9273671.html
總結
以上是生活随笔為你收集整理的华为快应用引擎架构及开发实践的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： go语言之行--golang核武器gor
- 下一篇： （转）博弈 SG函数