Hybrid App 開發實踐總結

來源:互聯網
上載者:User

標籤:靜態資源   跨平台   oid   css   市場   定製   方式   需要   mysql資料庫   

引言

隨著 Web 技術和行動裝置的快速發展,Hybrid 技術已經成為一種最主流最常見的方案。一套好的 Hybrid架構方案 能讓 App 既能擁有極致的體驗和效能,同時也能擁有 Web技術 靈活的開發模式、跨平台能力以及熱更新機制,想想是不是都雞凍不已。。??。本系列文章是公司在這方面實踐的一個總結!

Native App 開發模式

Native App,原生APP,使用原生(即Android或iOS)開發的APP。應用的效能好是無容置疑的,但是企業大都處於嘗試和摸索期,企業需要在短時間內快速推出不同的功能、產品來適應市場的需求和變化。對於有專業Team Dev的互連網公司而言推陳出新都是個難題,更不要說在企業中的應用。
其缺點有:

  1. 開發、更新、維護的周期太長
  2. 無法跨平台:Android和iOS都需要開發各自平台的版本——開發成本高;
  3. 升級麻煩:每次升級都要下載安裝包,Android還好,反正不需要審核,下載就下載吧,但iOS就麻煩了,發布每個版本還得經過App Store的審核
  4. Android和iOS很難同步發布。
Web App 開發模式

HTML5技術的興起給Web App注入了新的生機。可是Web App目前的本質是金玉其外敗絮其中,功能不但無法和Native App媲美,使用者體驗更是眾所周知的弊端。在當前iOS、Android系統主導的案頭入口的形態下,讓使用者開啟瀏覽器,再訪問某個網址,體驗還不好,不人性化的體驗與流程導致大量使用者流失。

Hybrid App 開發模式

Hybrid App,俗稱混合應用,即混合了 Native技術 與 Web技術 進行開發的行動裝置 App。現在比較流行的混合方案主要有三種,主要是在UI渲染機制上的不同:

  1. 基於 WebView UI 的基礎方案,市面上大部分主流 App 都有採用,例如JS-SDK、Cordova,通過 JSBridge 完成 H5 與 Native 的雙向通訊,從而賦予H5一定程度的原生能力。
  2. 基於 Native UI 的方案,例如 React-Native、Weex。在賦予 H5 原生API能力的基礎上,進一步通過 JSBridge 將js解析成的虛擬節點樹(Virtual DOM)傳遞到 Native 並使用原生渲染。
  3. 另外還有近期比較流行的小程式方案,也是通過更加定製化的 JSBridge,並使用雙 WebView 雙線程的模式隔離了JS邏輯與UI渲染,形成了特殊的開發模式,加強了 H5 與 Native 混合程度,提高了頁面效能及開發體驗。

以上的三種方案,其實同樣都是基於 JSBridge 完成的通訊層,第二三種方案,其實可以看做是在方案一的基礎上,繼續通過不同的新技術進一步提高了應用的混合程度。因此,JSBridge 也是整個混合應用最關鍵的部分!

技術選型

任何技術方案的選型,其實都應該基於使用情境和現有條件。基於公司現有情況的幾點考慮,在方案一上進一步最佳化,更加適合我們的需求。

  1. 需求 Web技術 快速迭代、靈活開發的特點和線上熱更新的機制。
  2. 產品的核心能力是強大的拍照、掃描二維碼、圖片上傳等功能,因此單純的 H5技術能做的事非常有限,不能滿足需求,通過 Hybrid 技術來強化H5,便是一種必需。
  3. 公司業務上,並沒有非常複雜的UI渲染需求,而且公司已經有一套完善的前端架構並且已經非常成熟,因此我們並不強需類似 RN 這樣的方案。

結果:React Native 和 Cordova 針對跨平台應用有著不同的設計理念,也就迎合了不同的需求。Cordova 能夠將已有的單頁 Web 應用程式很方便的運行在不同裝置上,代價是一些表現效果的損失。React Native 應用會更接近原生應用,但也會需要針對不同系統重新實現某些代碼。由於我們有成熟的整套的前端開發架構,為了減少開發成本和額外的學習成本,我們採用了 cordova !

cordova架構

  • Web App 層是開發人員編寫代碼的主要地方,應用程式以網頁的形式呈現,在一個index.html的本地分頁檔中引用所需要的各種Web資源,如CSS、JavaScript、映像、影音檔案等。應用程式的配置儲存在config.xml檔案中。
  • WebView 層用來呈現使用者介面,即web頁面的展現。例如,在android平台是通過WebView控制項實現web頁面的呈現。
  • Plugins 主要用於在JavaScript代碼中調用各平台native的功能。Cordova項目已經包含一些核心的plugin,如電池、網路攝影機、通訊錄等。開發人員也可以開發自訂的plugin,來實現所需要的功能。其原理就是Native 擷取 JavaScript環境內容,並直接在上面掛載對象或者方法,使 js 可以直接調用,Android 與 IOS 分別擁有對應的掛載方式。
cordova 開發所用到的整體技術棧和開發環境

所用到的技術棧如下:

  • 系統內容 CentOS + Docker
  • 持續整合&持續傳遞 jenkins + git
  • nodeJs、npm、cordova、android環境、MySql資料庫
  • 移動端熱更新 code-push-cli + code-push-server 自己跑服務
  • 反向 Proxy Nginx

各個docker的職責劃分
  • jenkins的docker負責編譯cordova產生android的apk檔案並將最新的靜態資源上傳至code-push-server
  • code-push-server的docker 負責資源更新
  • mysql資料庫的docker 主要服務於code-push-server
  • git負責代碼管理
  • nodeJs的docker負責提供下載jenkins編譯後的的apk檔案或者中介層代理(和java服務通訊)或者服務於前端SSR首屏渲染
說明

如果將以上技術棧描述清楚需要不小的篇幅,所以我會將文章進行拆分:

1. Hybrid App 開發實踐總結 ~ 開篇(本文)2. cordova的環境配置和建立第一個android App3. 伺服器端docker的安裝,nginx、jenkins、git服務的架設4. 伺服器端code-push-server、mysql服務的架設5. 用戶端code-push外掛程式的引入及code-push-cli的使用7. 如何使用純shell編寫一個快速搭建開發人員環境的命令列工具和安卓端真機調試

Hybrid App 開發實踐總結

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.