hybird APP開發技術講解

APP三種開發模式

智能手機之普及不用多說,手機APP滲投到各個行業:電商(淘寶、京東等)、金融(各手機行業、P2P借貸等)、醫療(智慧醫療)、交通(滴滴、Uber等)、教育(慕課網等)、餐飲(餓了嗎、美團等)……反正只要是個企業,無論規模大小,都已經訂製或將要訂製自己的APP。這麼多APP無外乎就三種模式:Native App、Web App、Hybrid App。

1、Native App

Native App,原生APP,使用原生(即Android或iOS)開發的APP。兩年多以前這非常流行,到現在爲止,原生開發人員數量衆多,一抓一大票,技術成熟,好多培訓機構都抱着老掉牙的API翻來覆去的講——尤其是Android。Sorry,說錯話了……使用原生開發有其優勢:應用的性能好,適配起來相對容易。學習成本要看人,個人覺得技術點不多,門檻相對稍高,但入門後學習起來就很輕鬆——網絡資料實在是太多了。

但原生APP最頭疼的有三個問題:

1、無法跨平臺:Android和iOS都需要開發各自平臺的版本——開發成本高;

2、升級麻煩:每次升級都要下載安裝包,Android還好,反正不需要審覈,下載就下載吧,但iOS就麻煩了,發佈每個版本還得經過App Store的審覈,這導致第三個問題;

3、Android和iOS很難同步發佈。

2、Web App

所謂的Web App,就是把手機當做一個瀏覽器(Android使用WebView,iOS使用UIWebView),做幾個頁面掛在服務器端,類似於一個小網站。這樣說雖然不太貼切,但實際上給人的感覺就是這樣的。雖然開發成本大大降低,但頁面訪問速度慢、操作體驗差。於是第三種模式誕生了。

3、Hybrid App

乍一看和Web App沒啥差別,但涉及到的技術成本、開發成本、學習成本比Web App高,它綜合了Web App的開發速度和Native App的高性能體驗。之所以說學習成本高,是因爲開發高性能的Hybrid App有難度,網絡資料少。我是兩年半前開始接觸混合模式開發的,當時如何做好屏幕適配、提高UI響應速度、如何最大化使用原生功能等內容,網絡幾乎沒有資料。網上能搜索到的都是很粗略的東西,或者就是Hello World級別的東西,涉及到稍微細節一點的東西幾乎沒有。由於本系列文章都只講Hybrid,故在此不再囉嗦了。

三種開發模式各自的特點如下面的表格所示:

 

Native App

Hybrid App

Web App

原生功能體驗

優秀

接近優秀

性能

非常快

跨平臺開發成本

昂貴

合理

便宜

碎片化適配

非常嚴重

嚴重

嚴重

編程技術支持

短缺

非常短缺

通用人才

版本升級維護

保守

低延時

開放

安全

 

 

4、Hybrid App所需技術

Hybrid App由於需要保證運行性能與開發速度,需要如下技術支持,本系列博文均會按照Demo的開發順序依次描述本人的開發心得和教訓,希望能起到一個拋磚引玉的作用。

5、Native技術

Native技術主要用於提供原生支持,要做到跨平臺,就需要掌握部分Android和iOS的知識,除了多線程,文件存儲等基礎知識,Android需要非常熟練的掌握WebView、WebSettings、WebChromeClient、WebClient四大對象。iOS需要非常熟練掌握UIWebView對象。

6、Web技術

1、 HTML5

熟練掌握HTML5的各個標籤,如何編寫最優的文檔結構。

2、 CSS

熟練掌握CSS2和CSS3的新特性,能按照效果圖編寫最高性能的樣式。

使用SCSS生成CSS,將CSS可編程化。

3、 JavaScript

實現業務邏輯控制。個人理解JavaScript主要包含兩大內容:DOM編程和麪向對象編程。大部分JS開發人員就只掌握DOM編程,諸如document.getElementById()等,但面向對象是很重要的一個方面。

4、 性能和開發

模塊化編程:編寫可複用的組建;

CSS渲染:瞭解瀏覽器的CSS渲染引擎才能編寫更高效率的樣式;

JS解析:瞭解瀏覽器的JS解析引擎才能優化JS腳本;

HTTP協議:熟練掌握HTTP請求的各個內容;

AJAX:和服務器端的交互大都採用AJAX。

1.3.     流行框架

1.3.1.     Hybrid 框架

Cordova/PhoneGap:側重於JS與原生的交互,開發簡單,但性能差,如觸摸時反應不靈敏。

AppCan:性能還行,使用簡單,但要提交代碼給AppCan的服務器才能打包,相信有追求的企業是不會把自己的代碼提交給第三方,把打包權利交給第三方的。

Ionic Framework:在Cordova的基礎上增加一些UI/JS方面的東西,樣式還不錯,但同樣具有Cordova的不足。

1.3.2.     UI/JS框架

jQuery Mobile:上手簡單,組件豐富,但性能超級差,閃屏現象嚴重。

Senche Touch:簡單看過,沒有使用過,貌似UI很漂亮,學習成本高。

React Native:FB推出的,當年FB是最早嘗試Hybrid的,但性能超差,於是APP放棄了Hybrid,走原生的道路。在大家都不看好H5時,FB暗中深入挖掘H5,三年之後推出了這個框架,非常推薦各位去學習其中的思想。

GMU:百度推出的,這個不錯。

1.3.3.     UI/JS庫

這個就多了,jQuery、Zepto、Swiper、iScroll、RequireJS、AngularJS……

1.3.4.     個人建議

由於移動端是一個重視性能和用戶體驗的終端,大量採用框架存在一些問題:

1、 擴展、維護、定製成本,這個非常需要考慮,或許框架提供的UI風格和自己設計的UI風格差異大,導致設計圍繞框架轉,不符合產品的需求。

2、 既然是框架,強調的是覆蓋面廣度和功能的全面,會有很多無用的東西,帶來累贅;

3、 框架本身存在BUG,或許需要開發人員面對一些能力之外的問題。

總之,如果只追求像山寨作坊一樣快速產出、不計性能的開發產品,那使用現成的框架是不二選擇。但如果追求性能和真正的產品,建議使用庫,不要使用框架。但是很多框架的實現思想都很優秀,雖然不建議使用,但我們應該多接觸學習其中的思想,才能寫更好的代碼。僅僅建議而已,不中聽請忽略。

1.4.     系列大綱

本系列博文將按照我近三年來開發Hybrid App過程中的體會進行編寫,以一個APP完整開發爲線索,形成一套完整的混合模式開發的解決方案。

1、 JS和原生交互架構

2、 WEB端基礎知識準備

3、 UI適配方案

4、 UI組件開發及封裝

5、 JS模塊化開發

6、 升級、部署方案

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章