『壹』 跨端開發面面談之基於WebView的Hybrid開發模式
跨終端移動開發是近期准備總結的一個主題，作為這一系列的開始，首先簡單說說基於WebView的Hybrid混合開發模式。
有過混合應用開發經驗的同學，對基於WebView的Hybrid開發模式應該不會陌生。藉助於原生端各平台的WebView組件，可以實現Native和JavaScript的雙向通信，從而將Web App與Mobile App融合起來，開啟混合開發的新模式。
基於WebView的Hybrid開發模式到如今已經非常成熟，不再是一個實驗性新技術，而是廣泛應用在各大廠商的平台型應用如微信、手Q中。
jsBridge作為連接Native和JavaScript的橋梁，是基於WebView的Hybrid開發模式中的關鍵點。
在了解其通信原理後，再來看JSBridge究竟是什麼。從前端角度來看，可能會把JSBridge理解為業務開發過程中，以全局變數注入到WebView中，幫助調用原生API的JavaScript工具庫。這樣的理解不夠准確，按照我的理解，JSBridge不是一個標準的規范，基於原生系統為WebView組件提供的能力，已經可以建立起WebView JavaScript bridge，即使不再做更高程度的封裝，也可以完成從Native到JavaScript的雙向通信了。
我們所說的JSBridge，是對底層通道的抽象封裝，這一過程包括了原生和JavaScript兩側內容，在原生端需要考慮系統API差異，對上層調扒猛用提供統一介面，在JavaScript端需要考慮調用方式，請求管理等內容。JSBridge的設計實現已經是成熟技術了，其設計可以參考 In-depth Profiling of JSBridge 、 Hybrid APP架構設計思路 ，一個安卓端完整JSBridge實現可以參考 JsBridge實現 。
目前，基於WebView的Hybrid開發模式穗仔非常成熟，廣泛應用於各類平台型App中。實現一個完善的JSBridge是在現有App中集成使用Hybrid開發模式的基礎，在完成這一基礎設施建設後，大家繼續在各個方向深挖，在不同的維度不斷優化性能和體驗。
多數App的Hybrid部分做到上面部分，已經有了還不錯的體驗。在我的了解中，空間團隊在上面基礎上繼續優化給出的是當前做的更好的方案。其主要流程如下圖所示，詳細內容可以參考 QQ空間前端工程師如何做首屏優化
除了在現有App中集成使用這一開發模式，還可以使用這一技術開發獨立App。早期的PhoneGap、Cordova、現在的Ionic，是這一領域較為知名的開發框架。
我司前端技術棧曾以Angular為主，一些App也由前端團隊基於Angular技術棧選型Ionic。初入團隊曾維護過基於Angular 1.x的Ionic App，用於我司投資顧問服務客戶的以IM為春族橋主、綜合一些其他業務，可以算一個比較復雜的應用。
前端技術背景的同學，採用Ionic框架開發App的學習成本不高。開發過程中仍在沿用前端技術，寫的仍是Web App,跑在原生WebView容器中。採用Ionic提供的組件庫，可以快速搭建項目界面。其擴展原生的機制也比較方便，如有原生能力的需求，並且沒有現成實現的，可以自行封裝使用，不過這個過程就需要原生開發同學的參與了。在我們的上述App開發中，主要是安卓端消息推送模塊由原生開發同學提供了支持，其餘對原生能力的需求如拍照、相冊訪問等常見需求，都有現成方案。
然而，採用Ionic完成上述應用，也有明顯不足的地方。首先是聊天列表方面，我們知道，如微信和QQ聊天窗口，這是一個異構的無限滾動長列表，在進入聊天界面時，一般只載入最近的一屏聊天數據，然後通過滾動載入歷史消息。在原生端完成這一需求有各種常見手段，而僅靠Web端技術，在各種折騰後，效果都不盡如人意。其次是動畫，這里的動畫包括了換頁動畫和其他動畫，流暢程度一般。最後是前端開發通病，要處理瀏覽器兼容性問題，crosswalk只是一個理論解決方案，其體積限制了幾乎不會被採用。
Ionic不斷迭代，新的版本中依賴新的Angular。新的Angular與Angular 1.x開發體驗已經完全不同，如果你還不了解，可以閱讀我們團隊書籍 揭秘Angular 2 。新的Ionic的開發體驗，相比以往也有提升，在其工具鏈中，提供了拖拽式項目生成工具
同時，Ionic pro提供的開發者工具，為應用整個生命周期提供了完善的支持平台，包括了以下功能，不過，使用需要付費。
站在當下來看，對於前端技術背景開發者來說，如果已有Angular基礎，不希望引入過高學習成本，需要快速開發一個復雜程度不算太高、或者對應用性能不是特別敏感的跨終端App，選擇Ionic依然是一個可行方案。
然而，既然你已經身在前端領域這樣一個技術更迭日新月異的圈子裡，還是應該使勁的折騰，關注跨端開發這個主題新的技術熱點，接下來我也會繼續談談在NativeScript、React Native、Flutter的一些體驗，可以保持關注。
『貳』 如何使用HTML5技術開發Hybrid App
Hybrid App（混合模式移動應用）是指介於web-app、native-app這兩者之間的app，兼具「Native App良好用戶交互體驗的優勢」和「Web App跨平台開發的優勢」。
1、AppCan
AppCan是國內Hybrid App混合模式開發的倡導者，AppCan應用引擎支持Hybrid App的開發和運行。並且著重解決了基於HTML5的移動應用"不流暢"和猜消和"體驗差"的問題。使用AppCan應用引擎提供的Native交互能力，可以讓HTML5開發的移動應用基本接近Native App的體驗。[3]
AppCan作為中國Hybrid混合應用開發、移動平台、移動雲平台的倡導者和領導者，以「免費+開源+開放」的互聯網模式，為廣大開發者提供一站式的移動應用開發支持服務。[4] 與此同時，從移動應用開發、管理、運營、安全四個方面，為各級政府和企事業單位，構建運營一體化的企業移動平台，企業通過個性化的移動運營門戶，增強客戶服務品質，提升整體經營管理水平。
現在，正益移動AppCan行業解決方案已成功應用於金融、航空、政府、石化、傳媒等領域，客戶包括東方航空、國家電網、中化集團、泰康人壽、新華社等眾多大型企業，贏得了市場廣泛認可，是國內企業移動信息化領域的龍頭企業。[4]
2、Appcelerator
Appcelerator的Titanium開發平台使開發者可以通過HTML、PHP、JavaScript、Ruby、Python等Web編程語言開發手機、平橋沒板和桌面的原生App。其優勢在於它可以讓用戶輕松地訪問超過300個API以及定位信息。
此外，Appcelerator提供針對特定行為或事件定製的統計。App的數據既可儲存在雲端，也可儲存在設備上。
3、Kerkee
Kerkee是一個多主體共存型Hybrid框架，具有跨平台、用戶體驗好、性能高、擴展性好、靈活性強、易維護、規范化、集成雲服務、具有Debug環境、徹底解決跨域問題。[2]
從開發者角度來說，它支持三種的團隊開發模式：
針對Web開發者：
這種模式其中的一個場景是：只會Web開發，卻不會Native開發的開發者提供了一系列的平台型介面。這種方式具有開發周期短，跨平台等優點。
針對Native開發者 ：
這種開發模式的其中一個場景是：Native開發者想要截獲Web頁面的數據或者對數據進行自己的處理，或者Web頁面中的行為進行修改。在這個時候，Kerkee框架將會為他們帶來便利。
針對Web開發者和Native團隊共同合作的開發團隊 ：
對於這種模式的團隊，kerkee框架具體更開放更透明的協作，並且嚴格地隔離各自職責。各得Web團隊和Native團隊把主要精力定位到各自的模塊上，有利於各自的模塊優化到極致。
4、WeX5
WeX5採用混合應用（hybrid app）開發模式, UI體系完全基於w3c的html5+css3+js；引入jquery和bootstrap並對移動做了底層優化，效率和性能接近原生應用。穗盯WeX5本機API Framework採用phonegap(cordova)框架。[5]
5、APICloud
APICloud是一款「雲端一體」的移動開發平台，信仰「雲端一體」的理念，重新定義了移動應用開發。APICloud為開發者從「雲」和「端」兩個方向提供API，簡化移動應用開發技術，讓移動應用的開發周期從一個月縮短到7天。APICloud由「雲API」和「端API」兩部分組成，可以幫助開發者快速實現移動應用的開發、測試、發布、管理和運營的全生命周期管理。
6、PhoneGap
PhoneGap是一個免費且開源的開發環境，使開發者可以開發出在Android、Palm、黑莓、iPhone、iTouch及iPad等設備上運行的App。其使用的是HTML和JavaScript等標準的Web開發語言。開發者使用PhoneGap進行開發，可調用加速計、GPS/定位、照相機、聲音等功能。
PhoneGap還提供Adobe AIR App以及在線的培訓課程，幫助開發者了解原生API並在他們自己的平台上開發移動App。
7、NativeScript
NativeScript是使用移動平台的 JavaScript 引擎來進行跨平台開發。邏輯部分自然無需多說，關鍵在於如何使用平台特性。NativeScript是通過反射得到所有平台 API，預編譯它們，然後將這些 API 注入到 JavaScript 運行環境，接下來在 Javascript 調用後攔截這個調用，並運行 native 代碼。NativeScript是使用大量 web 開發的技巧來進行 app 開發，因為工具鏈和語言都非常熟悉受到了很多前端開發者的歡迎。
8、Kinvey
Kinvey同樣是一個為移動應用開發者提供後台創建服務的平台。Kinvey強調加速移動應用開發與銷售的「即取即用」理念。Kinvey的中間層與數據層均託管在多個雲服務提供商處，包括 Rackspace、Amazon與Microsoft。所有通過Kinvey存儲的數據都會有四種方式備份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的伺服器，假如其中一兩個出現了故障，用戶的數據依然安然無恙。[6]
9、ExMobi
ExMobi通過全面的數據集成技術和豐富的跨平台客戶端展現能力，將業務系統快速、安全、高效的移植於移動終端。ExMobi從開發（IDE環境）、集成（IT系統對接、雲服務）、打包（各個操作系統的應用打包）、發布（應用的運行）、管理（日誌管理，更新管理）上提供了一套完整的解決方案。並通過專業的培訓和支撐渠道為開發者提供可持續的學習和交流空間，掃除開發障礙。[7]
『叄』 Hybrid App 用哪個框架好
您好，國內外Hybrid App的開發框架眾多。如何選擇又成為一個難題。下面對開發者比較關心的集中知名跨平台開發移動應用中間件進行列表和對比，以便選擇最適合您的移動應用中間件。 PhoneGap是相對比較早進入公眾視線的一種選擇。但是，開發者簡單的基於PhoneGap來開發移動應用肯定會發現結果和Web App比較差的用戶體驗類似。這也是為什麼基於PhoneGap有實用性的移動應用主要集中在iOS上。可是PhoneGap這種現狀弱化了HTML5的跨平台價值。Titanium是一種基於翻譯機制的跨平台中間件，能夠開發出具有Native體驗的移動應用，但是因為翻譯機制的限制導致移動應用開發不能像真正的HTML5開發一樣靈活。哪怕一個按鈕也不能像普通HTML一樣來編寫，而必須按照Titanium約定的特定格式。Salama是全新研發的一套Hybrid APP和雲端服務整合的開發套件。在終端，一共有三種開發模式：高度混合模式、JS模式和低度混合模式。在低度混合模式下，需要追求終端速度和顯示效果的開發者，可以在不改變原有的構架思路的前提下進行開發。在JS模式下，所有的畫面顯示及業務邏輯均由JS程序實現，對於原來的基於WEB的開發者，只要熟悉JS、CSS、HTML的前端工程師就可以輕松構建自己的應用。在高度混合模式下，原生和HTML5可以隨意組合，可以為開發者在進行大型商業軟體開發的過程中提供最高的性價比。不僅如此，在雲端Salama還提供了一整套雲服務，涵蓋了業務處理、資料庫操作、文件等資源的存儲分發等服務。Salama已經為多家公司提供了方案，知名客戶有TOSHIBA-AIRCON、GEDORE等品牌商，同時也在Salama平台上構造了Ishow企業電子目錄產品服務。AppCan在技術架構上和PhoneGap類似是Web主體型中間件，但是通過結合了一些原生交互效果能夠達到iOS、Android平台都比較一致的用戶體驗。但是相比PhoneGap的開源，AppCan相對封閉的路線顯得過於謹慎。Hybrid App這個領域雖然還處於比較初期的階段，但是已經有很多優秀的公司和技術團隊在致力於跨平台開發移動應用中間件技術的研究，給了開發者眾多選擇。開發者可以根據實際的項目需求來選擇中間件。Web App雖被瀏覽器廠商和搜索引擎公司所推崇，但存在用戶體驗差、盈利模式不明確等現階段無法解決的問題，或最終夭折。Hybrid App正在被越來越多的公司和開發者所認同，勢必會成為新世界的王。