APP開發的三種模式
- Native APP
即原生應用,相對于Web APP和Hybrid APP來說,應用的全部功能和界面都是用各平臺操作系統(如Android,IOS,Windows Phone)提供的SDK開發,不使用Web相關技術來展示頁面和實現功能。
優點:體驗最優,性能最好。
缺點:開發成本高,無法跨平臺,對應用商店依賴較高。 - Web APP
所有功能和界面都由web實現,然后以各平臺SDK中的瀏覽器組件(如Android中的webView,IOS中的UIWebView,Windows Phone中的WebBrowser)為載體,加載頁面,展示界面,提供功能(類似瀏覽器)。
優點:開發成本低,維護更新簡單,可跨平臺
缺點:體驗和性能差,功能限制,對網絡環境要求較高。 - Hybrid APP
混合應用,結合了上面兩種模式,綜合了綜合了Web App的開發速度和Native App的高性能體驗。復雜和易變的信息展示頁面可由Web實現,追求性能和體驗的功能模塊可由原生實現。
優點:開發成本較低,可跨平臺,維護更新較容易。
缺點:體驗一般。
Hybrid APP所需的技術
- Native技術
各平臺的相關開發技能。(借助第三方框架可不用掌握Native技術) - Web技術
大部分為前端的開發技能,H5標簽,CSS樣式,JS腳本等等,以及其他一些性能優化和模塊化編程的技術。 - 交互實現
natvie和web交互的方法比較常用的有兩種,一是約定URL Schema然后通過監控瀏覽器組件的請求。二是通過JavaScriptCore將native方法注入給window對象。
流行的第三方框架
許多大公司以及組織,像Facebook和Apache都在極力的發展和推廣這種跨平臺框架,這些跨平臺框架主要是將原生的功能封裝好后通過規范的JS接口提供給前端,從而使團隊或者前端開發人員無需具備各平臺的開發技能就能開發出跨平臺的混合應用。其中比較流行的框架有:
- Cordova/PhoneGap
Cordova是Apache的一個開源項目,基于PhoneGap。
Cordova的體系架構從上往下分為,前端(html,js),html 渲染引擎(各平臺的瀏覽器組件),cordova plugin。
cordova plugin為cordova重最核心的部分,擴展了js訪問手機硬件和原生API的接口。
開發者可自定義cordova plugin擴展自己的原生接口,添加到cordova。
總體來說cordova即可以簡單的部署到多平臺,也支持單平臺的深層定制。 - ReactNative
Facebook推出的跨平臺框架。 使用js和React就可以開發app,React是Facebook自己的js庫。用reactnative開發的界面會完全轉化為native界面。部署的時候不用重新編譯,可以熱加載。而且可以植入原生代碼。
reactnative是通過JavaScriptcore將native中的方法映射到js中,沒有使用瀏覽器組件(除低版本IOS),嚴格意義上來說開發出來的并不是Hybrid app。所以,開發時比較依賴reactnative暴露出來的接口,除此之外,初次學習成本比較高,需要學習react的使用(一套前端不能復用到pc)。 - WeX5
國內開源免費的開發工具。
WeX5的IDE基于Eclipse,提供可視化,組件化,拖拽式開發環境。
前端采用H5+CSS3+JS標準,并且提供了大量面向APP開發的,可定制的前端組件。組件樣式基于支持移動設備優先,響應式設計的Bootstrap。
頁面代碼部分,使用RequireJS管理頁面模塊,模塊間遵守AMD規范。
APP開發部分,使用原生瀏覽器組件展示頁面,使用Cordova插件訪問手機硬件和訪問原生API。 - ionic
ionic是一個用來開發混合手機應用的,開源的,免費的代碼庫。可以優化html、css和js的性能,構建高效的應用程序,而且還可以用于構建Sass和AngularJS的優化。(待補充..)
這些框架在帶來便利的同時也帶來一些問題和缺點:
- 擴展、維護、定制成本,框架提供的界面和功能存在一定的局限性,有時候不能滿足產品的定制和需求,導致設計圍繞框架轉,不符合產品的需求。
- 引入一個大而全的框架意味著帶來許多的累贅,增加APP體積以及工程復雜度。
- 框架本身的缺陷以及潛在的bug。
交互設計
前端與native之間的交互大致可以分為以下幾類
- 通用接口(數據傳遞,手機硬件訪問,原生API訪問)
- 賬號信息
- 開發調試
(此模塊待完善...)