Hybrid App 開發實踐總結
引言
隨着 Web 技術和移動設備的快速發展，Hybrid 技術已經成爲一種最主流最多見的方案。一套好的 Hybrid架構方案 能讓 App 既能擁有極致的體驗和性能，同時也能擁有 Web技術 靈活的開發模式、跨平臺能力以及熱更新機制，想一想是否是都雞凍不已。。😄。本系列文章是公司在這方面實踐的一個總結！html
Native App 開發模式
Native App，原生APP，使用原生（即Android或iOS）開發的APP。應用的性能好是無容置疑的，可是企業大都處於嘗試和摸索期，企業須要在短期內快速推出不一樣的功能、產品來適應市場的需求和變化。對於有專業開發團隊的互聯網公司而言推陳出新都是個難題，更不要說在企業中的應用。
其缺點有：前端
- 開發、更新、維護的週期太長
- 沒法跨平臺：Android和iOS都須要開發各自平臺的版本——開發成本高；
- 升級麻煩：每次升級都要下載安裝包，Android還好，反正不須要審覈，下載就下載吧，但iOS就麻煩了，發佈每一個版本還得通過App Store的審覈
- Android和iOS很難同步發佈。
Web App 開發模式
HTML5技術的興起給Web App注入了新的生機。但是Web App目前的本質是金玉其外敗絮其中，功能不但沒法和Native App媲美，用戶體驗更是衆所周知的弊端。在當前iOS、Android系統主導的桌面入口的形態下，讓用戶打開瀏覽器，再訪問某個網址，體驗還很差，不人性化的體驗與流程致使大量用戶流失。java
Hybrid App 開發模式
Hybrid App，俗稱混合應用，即混合了 Native技術 與 Web技術 進行開發的移動應用。如今比較流行的混合方案主要有三種，主要是在UI渲染機制上的不一樣：node
- 基於 WebView UI 的基礎方案，市面上大部分主流 App 都有采用，例如微信JS-SDK、Cordova，經過 JSBridge 完成 H5 與 Native 的雙向通信，從而賦予H5必定程度的原生能力。
- 基於 Native UI 的方案，例如 React-Native、Weex。在賦予 H5 原生API能力的基礎上，進一步經過 JSBridge 將js解析成的虛擬節點樹(Virtual DOM)傳遞到 Native 並使用原生渲染。
- 另外還有近期比較流行的小程序方案，也是經過更加定製化的 JSBridge，並使用雙 WebView 雙線程的模式隔離了JS邏輯與UI渲染，造成了特殊的開發模式，增強了 H5 與 Native 混合程度，提升了頁面性能及開發體驗。
以上的三種方案，其實一樣都是基於 JSBridge 完成的通信層，第二三種方案，其實能夠看作是在方案一的基礎上，繼續經過不一樣的新技術進一步提升了應用的混合程度。所以，JSBridge 也是整個混合應用最關鍵的部分！mysql
技術選型
任何技術方案的選型，其實都應該基於使用場景和現有條件。基於公司現有狀況的幾點考慮，在方案一上進一步優化，更加適合咱們的需求。android
- 需求 Web技術 快速迭代、靈活開發的特色和線上熱更新的機制。
- 產品的核心能力是強大的拍照、掃描二維碼、圖片上傳等功能，所以單純的 H5技術能作的事很是有限，不能知足需求，經過 Hybrid 技術來強化H5，即是一種必需。
- 公司業務上，並無很是複雜的UI渲染需求，並且公司已經有一套完善的前端框架而且已經很是成熟，所以咱們並不強需相似 RN 這樣的方案。
結果：React Native 和 Cordova 針對跨平臺應用有着不一樣的設計理念，也就迎合了不一樣的需求。Cordova 可以將已有的單頁 Web 應用很方便的運行在不一樣設備上，代價是一些表現效果的損失。React Native 應用會更接近原生應用，但也會須要針對不一樣系統從新實現某些代碼。因爲咱們有成熟的整套的前端開發框架，爲了減小開發成本和額外的學習成本，咱們採用了 cordova ！git
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 開發所用到的總體技術棧和開發環境
所用到的技術棧以下：web
- 系統環境 CentOS + Docker
- 持續集成&持續交付 jenkins + git
- nodeJs、npm、cordova、android環境、MySql數據庫
- 移動端熱更新 code-push-cli + code-push-server 本身跑服務
- 反向代理 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首屏渲染
說明
若是將以上技術棧描述清楚須要不小的篇幅，因此我會將文章進行拆分：sql