Web App 行動開發 (1) - Web App 開發介紹


App 三大開發陣營android_ios

App 近年真的大放異彩,App Store 也是一個讓沒有直接銷售管道的軟體研發工程師,有個築夢的環境與機會。想要開發 App 的方法有很多種,我們先來介紹一下主要的 App 開發方式有哪些種類,主要分為三大陣營:

  • Native App

原生程式 App,使用原生程式語言開發,例如:Android 用 Java、iOS 用 Object-C。優點:速度快;缺點:無跨平台能力、必須學習專有語言。

  • Web App

利用 App 內嵌瀏覽器利用 Web 技術實作功能。優點:跨平台、使用 Web 標準技術;缺點:API 功能有限、速度不如原生程式。

  • Hybrid App

混合式 App 結合 Web App 跨平台能力與原生程式的速度優勢,可保留 Web App 部分跨平台的能力,將複雜與高運算的行為交由 Native 程式處理。優點:部分跨平台 / 速度尚可;缺點:實作架構複雜、整合技術有門檻。

行動作業系統兩大主流 iOS 與 Android 陣營

接下來介紹目前市佔率最較高的兩種行動裝置作業系統 iOS 與 Android,比較如下:

Google Android

  • 原生開發語言 Java
  • 開發成本低、設備便宜
  • Google Play 上架憑證一次付款終身享用
  • 軟體售價低、競爭激烈
  • OS 版本混亂且碎片化 (如下圖)
  • 裝置效能與螢幕解析度不一、測試工作繁瑣

android_breaks

Apple iOS

  • 原生開發語言 Objective-C / C++
  • 設備昂貴、開發成本高
  • iTunes Store 每年需繳年費(年繳保護費制)
  • 市場穩定、軟體單價高
  • OS 系統穩定且資源品質高
  • 設備單純、效能規格高

今天的主角 What's Web App

以下是我對 Web App 的定義:

利用 App 內嵌 Browser 來開啟網頁,使用 Web 技術實作適合行動裝置操作的應用程式。
然而在開發 Web App 通常會用到以下幾種主要的技術:
  • HTML 5
  • CSS 3
  • JavaScript
  • JavaScript Bridge(一種與 Native 溝通的技術)

大部分的網頁開發者會選擇 Web App 是因為至少在程式語言上比較熟悉,但許多 Web Designer 並不常在傳統的 Web 開發上使用到 HTML 5 的相關技術,原因是我們很難限制使用者必須使用符合 HTML 5 實作的瀏覽器來觀看網站,因此 HTML 5 都是以輔助的角色存在我們的設計中。

但是 Web App 就不一樣了,瀏覽器是我們自己內嵌的,很容易控制執行效果。那麼現在的瀏覽器對 HTML 5 的支援情況究竟如何呢?可參考以下圖表 (來至 THE HTML5 TEST 網站):

html5_support

上表很明顯 Google Chrome 與 Safari 對於 HTML 5 的支援是足夠的,可以作為未來開發的參考。

為何要選擇 Web App 開發

通常會選擇  Web App 開發架構有以下幾種原因與優勢:

  • 優異的跨平台能力 - 由於目前手機作業系統無法統一,也很難預測未來誰是大宗,以長遠的角度來看,能夠採用跨平台的技術是在好不過的。由時候也礙於研發能量有限,無法有足夠的資源滿足各種平台上的實作,也是其中的原因。
  • 使用 Web 開發人員熟悉的技術 - 倘若你原本就是 Web Software Engineer,那麼直接利用現有的程式開發技巧來跨入 App,門檻較低。很多人已經預測未來的應用程式只會剩下 Web 這樣的形態存活,採用標準化的 Web 開發技術也是有利的策略。但依據我的經驗,若是用傳統 Web 的開發思維來開發 Web App,其實是不夠的。Web App 比較適合有 Web 開發經驗的老手,畢竟常使用到的技巧都是較新且較複雜的架構。至於 Flash....... 大家都應該明白它的下場,真慶幸當初沒有好好學 Flash!
  • 開發環境單純 - 要開發 Web App 裝個瀏覽器即可達到最低需求,一般測試根本不需要上機測,等大致完工或需要呼叫硬體時再佈署到實機上測試即可。

但 Web App 其實還是有缺點的,例如:Android 執行速度不佳(除非高階機種)、能力不如 Native 強大(需要借助JavaScript Bridge 技術)、記憶體耗量高、CSS 渲染技術實作不一致。如果用在開發比較複雜的 App,整體的開發週期其實是很長的(當然看個人追求的品質),Web App 實際上要花費很多的心力才能做的跟 Native 一樣好用,但是:

軟體的最大價值在於複製!

雖然 Web App 開發成本高,但是只要一跨平台就值得了。所以如果你一開始沒有要計畫跨平台,那麼 Web App 可能會為你帶來痛苦。

JavaScript Bridge 技術

前面提了很多次 JavaScript Bridge 這個名詞,先來就介紹一下 Web App 的典型系統架構,如下:

app_arch

其中紅色方框的就是 JavaScript 的角色,目前最有名的就是 PhoneGap (Codorva) 這一個 Library,JavaScript Bridge 實作的原理是透過 Browser (WebView) 的底層機制與 JavaScript Runtime 溝通,每個不同 OS 提供的 WebView JavaScript Bridge 實作方法都不盡相同。

藉由這樣的技術 Web 就可以與 Native 進行溝通,達到原本 Web 做不到的功能(像是裝置震動、陀螺儀、加速器、電話簿等等)。有人會想到其實瀏覽器外掛一樣可以達到效果,但是許多封閉的 OS 是不允許使用者安裝外掛程式的,因此我們才需要這樣的技術。善用 Web 實作基本功能與 UI,透過 Native 處理比較複雜的運算與功能,這樣的組合就成了 Hybrid App,保留跨平台能力擁有執行速度優勢,算是比較兩全其美的解法。

到這裡那麼各位客官對 Web App 是不是有比較深入的了解呢?有空會在分享行動開發的相關經驗與技術,敬請期待囉。感謝。

系列文章

參考資料

Facebook 留言

廣告

樂樂童鞋