行動裝置 App的分類

標籤：存在   視頻   app   info   padding   設計   html5+   編寫   下載   

　　隨著智能手機的普及，移動端應用幾乎成為每個互連網產品的標配。在快速迭代的互連網戰場中高效開發、低成本上線產品，是每個應用Team Dev追求的目標。此時，選擇合適的應用類型和開發模式便至關重要。行動裝置 App可以粗分為三種：原生應用(native app)， 網頁應用(web app，或HTML5 app)，以及它們的混血兒——混合模式行動裝置 App(hybrid app)。當然，還有最近新出的小程式，允許你使用它的API通過前端技術來實現原生應用，我覺得它更像react native，將網頁技術轉換成原生UI，不同的是它是運行在App中的，我覺得它比RN更有優勢的是，開發人員開發門檻更低了，甚至不用擔心跨平台（RN依然要寫兩套代碼），而且還有這個入口，將來可能是一個趨勢。

　　什麼是Hybrid Mobile App

　　Hybrid app從外觀上來看是一個native app，實則只有一個UIWebView，裡面訪問的是一個web app，如新聞類和視頻類的應用普遍採取該策略：native的架構加上web的內容。不同於native app需要針對不同的平台使用不同的開發語言（如使用Objective-C、Swift開發iOS應用，使用Java等開發Android應用，使用C#開發Windows Phone應用），hybrid app允許開發人員僅使用一套網頁語言代碼（HTML5+CSS+JavaScript），即可開發能夠在不同平台上部署的類原生應用 。由於hybrid app結合了native app良好使用者互動體驗和web app跨平台開發的優勢，能夠顯著節省行動裝置 App開發的時間和成本，hybrid app得到越來越多公司的青睞。

按照網頁語言和程式語言的混合，hybrid app通常可以分為三種類型：

1. 多View混合型：native view和web view獨立展示，交替出現。 其應用主體通常是native app，web技術作為補充。即在需要的時候，將web view作為獨立的view運行，在web view內完成相關的展示操作。開發難度與native app相當。舉個栗子：Instagram的timeline使用的是web view。

2. 單View混合型：在同一個view內，native view和web view為層疊關係，同時出現。開發成本較高，難度較大，但是體驗較好。舉個栗子：百度搜尋同時實現充分的靈活性和較好的使用者體驗。

3. Web主體型：應用主體是web view，穿插native功能，主要以網頁語言編寫。整體開發難度低，基本可以實現跨平台；而使用者體驗好壞，主要取決於底層中介軟體的互動與跨平台能力。舉個栗子：專案管理工具 Basecamp使用web view呈現內容，調用系統原生API實現介面導航等功能來提高使用者體驗。

Hybrid app也並非是完美的解決方案。由於其使用HTML5，某些依賴於複雜的原生功能或者繁重的過渡動畫的應用會出現卡頓；同時，為了類比native app的UI和感官，需要投入額外的時間和精力；儘管可以跨平台，但是並不能完全支援所有的裝置和作業系統；最後，如果應用的體驗不夠原生化，如一個簡單的網站，則還有被Apple App Store拒絕的風險。

什麼時候選擇Hybrid App

在hybrid app備受追捧的今天，我們也許會隨大流優先考慮開發hybrid app。但是，每個產品各具特色，還沒有哪一種解決方案可以完美地應萬變。hybrid app的中庸讓它大放異彩，也限制了它的應用情境 。在決定採用一種開發模式之前，有許多因素需要考慮，諸如：

• 你希望針對哪個平台做開發？

• 你希望通過市集發布應用嗎？

• 你希望利用手機特有的效能嗎？

• 你的團隊技術能力如何？

• 你的項目周期和預算是多少？

如果要設計Angry Birds一類對圖形要求很高的遊戲，那麼在暫不考慮技術團隊能力的情況下，native app是最優選擇；如果要設計如Yelp一類內容導向的應用，那麼hybrid app會是很好的選擇；如果項目時間緊張，沒有足夠的人手和資金，對圖形和系統原生特性沒有要求，那麼web app將是性價比最高的解決方案。

表一對比了native app, hybrid app和web app在不同方面的表現，可以協助你根據實際情況選擇最佳的解決方案。

InfoQ上高嘉峻的一篇文章分享了幾個hybrid app開發的誤區，也是開發過程中應該盡量避免的：

1. 為了HTML5而hybrid app：HTML5是HTML4.0.1和XHTML1.0的升級版，有更強大的表現功能，並加入了local storage等技術，為web頁面提供了更大的想象空間和更多的可能性。但是，作為發展中的技術，HTML5收到瀏覽器安全色性和手機硬體水平的影響，能提供的功能和native app扔有一定的差距。開發應用時，首先是要滿足使用者需求，而不是追趕技術革新的大潮。所以開發應用時，應從應用本身功能和團隊開發資源綜合考量，決定是否採用hybrid app開發模式。

2. 忽略關鍵因素：Web是基於PC的一種開發模式，而mobile app運行於移動端。通常，web開發人員使用PC瀏覽器類比app中的web view進行調試，而不是直接使用手機上的web view。 二者能支配的CPU資源，最大佔有記憶體，運行網路環境，和滑鼠/觸控操作，瀏覽器對CSS/JS的解析和對事件的處理有著巨大的差別。而這些差別常常是web頁面能否正常運行於app中的關鍵因素。

3. 富互動導致體驗差：這主要體現在兩個方面：（1）web與手機平台預設互動習慣不一致：iOS和Android各有一套互動習慣，包括視覺風格，介面切換，操作習慣等。比如手機端系統風格是左右滑屏來進入或者退出介面，而舊介面保持狀態；web則是預設無論載入還是後退，都會重新整理舊介面，造成體驗上的損失。如果類比native的互動方式，那麼會提高開發成本，卻也難以達到native的流暢性。（2）與native相比同樣的功能在效能上存在差距：Web介面上JS對HTML Node的操作需要消耗大量的CPU資源。首先，手機的CPU效能普遍低於PC端；其次，不同手機之間的硬體水平也參差不齊，比如在iPhone6s上可以流暢啟動並執行介面，在iPhone5、MX5上可能就無法達到同樣的流暢度。

4. 跨平台：Hybrid app的優勢之一是繼承web跨平台的特性。然而，在智能手機軟硬體版本眾多的今天，相容性是個不容忽視的問題。不同的安卓作業系統其瀏覽器核心對JS和CSS的解析、事件處理會有不同；iOS不同版本之間也存在較大差異。所以，在跨平台開發時，相容性也是需要重點考慮的問題。

5. 互動一致性：這裡的一致性並非指同一應用在不同平台上的一致性體驗，而是指在同一平台上，hybrid app和native平台的一致性。比如“返回”操作，在iOS平台上頁面頂部留有一個44像素高的導覽列，左側的返回按鈕用於返回操作，可以通過絕對位址的方式連結到任何其它介面；而Android通常使用裝置提供的返回鍵，返回上一個介面，如果自行配置平台返回按鈕，那麼它會和裝置提供的返回鍵指向不同的位置。

結語：不同公司不同業務應該選擇適合自己的App開發方式。原生的體驗好，但是開發成本高，不能跨平台，需要下載，入口太深，使用者粘性低，迭代慢。Hybird成本低，跨平台，迭代快，但體驗相對要差一些，大多還是靠UIWebView嵌入頁面。Webapp更容易傳播和轉化，但是不是真正的App，只是網頁，應付不了富互動的需求，也無法調用裝置API。React Native學習曲線陡峭，不能完全做到跨平台，還有一些遺留Bug，但是體驗接近原生並且可快速迭代。剛出的小程式，學習成本低，類似RN，入口是，有優勢，接近原生應用，真正的跨平台，缺點是新技術，生態環境差，封閉，需要審核，也無法做到超快速迭代。

行動裝置 App的分類