HTML5到跨平臺App應用深度解析

APICloud_攻城獅發表於2018-11-08

本文將進一步介紹跨平臺技術的分類,並深度揭示APICloud混合開發技術的技術原理。

跨平臺技術的分類

目前跨平臺技術領域分為兩個發展方向:

第一個是HTML5 + Native混合方向;

第二個是中間語言編譯方向,其中APICloud和小程式都屬於前者。

HTML5 + Native混合,也就是我們通常所說的混合開發。

這種模式的開發主體是HTML5,但整個app的架構是Native架構:通過HTML5快速實現app的UI佈局、產品業務邏輯,在開發過程中涉及HTML5無法實現或者體驗不好的功能,則藉助Native模組來實現。

混合開發在保證app渲染效率和使用者體驗的同時,能夠降低app開發成本和複雜度,提高app開發效率。

中間語言編譯方向,代表產品為React Native(RN),Xamarin以及Google剛剛釋出的Flutter。

如何理解中間語言編譯?

以RN為例,傳統的app開發,要求開發者使用Android和iOS原生技術-Java、Object-C、C/C++等進行開發,而RN的開發過程則要求開發者使用JS進行編碼輸出app,但在app執行過程中,JS又對映回到安卓和iOS原生層面執行。藉助JS快速實現編碼,翻譯為原生程式碼執行,這就是中間語言編譯方向。

Xamarin則要求使用微軟自己的語言C#,對於大部分開發者而言,C#的學習成本比較高且Xamarin需要付費使用,因此它目前在國內應用比較少。Flutter的開發語言為Dart,它是谷歌發明的程式語言,這個語言很有趣,它的語法類似於C語言,又將JS和Java的一些設計思想以及語法規則融合了進去。Dart語言在此前應用比較少,可參考的資料不多,開發者上手需要一個過程。

Html5到跨平臺app應用

每一項新興技術的出現和流行,都是為了規模化的去統一解決一系列複雜問題,APICloud選擇混合開發方向,目的是希望藉助HTML5降低app開發複雜度,提高app開發效率。

通過工程化的實踐手段,我們首先設計了一個app開發引擎。簡單的向大家介紹一下這個引擎的架構:

HTML5到跨平臺App應用深度解析
整個引擎基於Android和iOS系統的原生技術架構

最上層為app應用層,涉及到業務以及功能相關的部分,要求開發者使用HTML + CSS進行UI佈局和渲染,功能和業務邏輯則通過JS實現,這是app開發者直接參與的地方。

第二層則是API層,API層核心的功能是橋接和管理,負責JS與Java,JS與Object-C之間的通訊,管理API的分發,以及一些JS-Framework的載入和執行。

引擎與模組的API通過這裡向開發者開放

接下來是引擎,引擎主要負責應用的訊息命令管理、事件管理、模組管理、以及UI渲染。

我們通過將Android和iOS系統的原生視窗機制抽象出來,再模擬原生的方式實現了一個新的視窗系統,由Widget/Window/Frame/UI Model構成,形成混合渲染能力,使得app效能和體驗接近原生。

引擎通過開放模組機制,支援動態載入模組,豐富和增強app功能,滿足各式各樣的需求。

最底下則是OS層,OS層中主要涉及Android和iOS系統之間一些不同的特性,是我們要花大量時間精力進行適配和抽象的地方。

除此之外,一個app還應當具備符合Android和iOS原生app的生命週期特性,例如:如何啟動,啟動流程以及生命週期事件分發等。

以下是app開發引擎對app生命週期管理的主要處理流程。

HTML5到跨平臺App應用深度解析
引擎觸發app的生命週期同原生app一致,觸發點來自使用者

使用者點選桌面的某個圖示,或者點選手機狀態列的某個通知,系統會將這個事件分發到對應的app,引擎在收到這個事件後開始初始化。

初始化的過程為:原生視窗系統初始化,展示啟動頁->HTML5執行環境初始化->載入模組執行環境->事件及訊息佇列管理初始化->根視窗開始渲染,之後開始載入HTML5頁面,這個HTML5頁面是整個app的入口。

App啟動完畢後進入等待狀態,由使用者的點選等事件驅動開啟新的視窗,載入新的模組,UI更新等。

通過app開發引擎,初步達到了使用HTML5 + Native混合開發,提高開發效率的目的,然而實踐過程遠比想象的要複雜,為此APICloud在專產品層面付出了非凡的努力。

在浩瀚的人類文明中,得益於計算機的迅速發展和技術的廣泛應用,拉開了第三次工業革命的新篇章,與此同時資訊科技成為拉動經濟的重要增長點。

在移動網際網路時代,app開發技術無疑是行業發展的重要驅動力,企業對於產品快速落地與靈活迭代的迫切需求,則使跨平臺開發技術廣泛應用;而APICloud通過擁有核心智慧財產權的混合app開發技術,進一步幫助企業快速實現移動網際網路布局,並以生態之力為開發者提供全面的技術服務。

相關文章