移動端開發技術概覽

01-27

這兩年，隨著技術的進步，移動開發也被逐步納入了所謂大前端的範疇。如果說，以前的前端主要是"寫網站的"，那麼今天的前端就已經變成了寫"門面"的，不管這個門面是什麼形態。

正因為門面的形態大相徑庭，自然其需求複雜度也倍增。相應的，技術挑戰以及解決方案也空前繁榮。這裡我就給初次接觸前端的同學們盤點一下相應的技術。

原生應用（Native App）

手機應用的傳統形態：基於Java/Kotlin的Android、基於OC/Swift的iOS原生應用（Native App），仍然佔據著主流地位。

這首先得益於傳統的慣性。在移動開發崛起的這麼多年來，原生開發技術積累了海量的資源和現有應用，這些如果沒有足夠強的利益驅動是不會被輕易換掉的。

其次，移動OS的很多Api是很難被它的替代技術所調用的，即使能通過某種方式調用他們，其調用過程往往也很繁瑣。

最後，還有一個重要的因素是在某些場景下（比如遊戲）只有它們才能達到極致的體驗，而在激烈競爭的消費端市場中，一點點差異就可能意味著巨大的利益。

混合式應用（Hybrid）

所謂混合式應用，簡單說就是外面套個原生的殼，裡面是一個瀏覽器，這個瀏覽器中運行一個Web應用，而原生的殼則提供了某種橋樑，讓Web應用能調到原生API。因為在一個應用中同時使用了原生和Web技術，故稱之為混合式應用。

混合式應用出現得很早，最著名的產品叫做PhoneGap，後來PhoneGap公司在被Adobe收購前把它的內核開源出來，這就是著名的Cordova。後來，Intel又開源了一款自定義瀏覽器內核 Crosswalk，讓你可以輕鬆嵌入自己的應用中，並內置了很多常用的原生 API 介面供 Web 調用，可以說是另一種形態的 Hybrid 應用。除此之外還有很多類似的技術可供選擇。

混合式應用兼具原生和Web兩者的優點……和缺點。它像原生應用一樣能夠調用系統的API，但是自己寫插件的難度和原生應用是一樣的；它像Web應用一樣容易開發，具有完善的生態和開放性，但是它的性能也像Web應用一樣慢。

基於JS的Native

原生應用之所以難寫，其中一個重要的原因就是使用的都是重量級語言，其優點和缺點都很明顯。在大規模、長周期、工程化開發中，一門成熟的、類型化的語言會表現出強大的團隊生產力，然而在概念驗證階段，一門JS這樣的動態語言可以把產品快速推向市場，可以搶先對手一步，讓自己獲得改進產品的寶貴時機。

於是，Facebook首創了用JS來寫原生應用的技術：ReactNative。它自己實現了一套界面渲染引擎，這套引擎模仿了HTML的語法和Virtual DOM API，但是並沒有藉助WebView引擎來進行渲染，因此在理論上，它可以達到和原生界面一樣的性能，而寫代碼仍然使用前端所熟悉的js生態。

後來，在ReactNative如日中天的時候，一個對手悄然出現了，它就是NativeScript。NativeScript在思路上和ReactNative相似，但是完全獨立開發的。最顯著的區別就是它在授權形式上是乾淨的Apache 2.0協議，而ReactNative則是附帶了一個專利（Paten）條款，也就是最近不斷鬧出風波的BSD+Patens授權方式。在技術上，NativeScript是一個框架中立的Native渲染引擎，不依附於任何前端框架。

當然，NativeScript的官方開發組自帶了一套高質量的Angular框架作為內置應用引擎，但是要記住它並沒有鎖定在Angular上。所以，如果react生態圈希望去Patens化，那麼基於Preact + NativeScript寫一套應用引擎可能會是一個成本最低也最安全的做法。

除了架構上的優勢之外，NativeScript還有一手絕活，那就是讓你可以不必寫任何插件就能直接調用原生API，你只要知道那麼幾條數據類型的對應規則就可以了。這可以進一步減少對Java/OC等技能的依賴，讓前端本已龐大不堪的技術體系免於爆炸的危險。

PWA
PWA 是 Google 提出的一個新概念，事實上，它和微信小程序在理念上有點類似，不過它是在小程序提出之前的半年左右就已經明確提出的。

PWA 其實在技術上創新並不多，它主要是理念上的創新，也就是把一大堆現有技術組合起來，形成了一種全新的用戶體驗。

通常，我們要決定安裝一個應用是很難的，要考慮它是否惡意，要判定它的許可權申請是否合理，要考慮內存佔用，要考慮下載時間，而且我們還只能通過應用市場去供用戶下載。這每一個步驟都會流失一部分用戶，所有步驟串起來流失的就更多了。而PWA則可以降低用戶的決策成本。

就像是一些商品的試用裝一樣，支持PWA的網站在用戶瀏覽時會提醒他可以把這個"網站"的圖標加入手機的屏幕菜單。加入之後，用戶就可以像使用普通的應用一樣使用這個PWA應用了，它啟動時也不再具有瀏覽器的標準形態，它還可以獲得發送提醒之類的許可權。之後，隨著用戶對功能的探索，PWA也會逐漸變得豐滿。

更有意思的是，PWA支持離線使用，也就是說，本來是一個網站，你把它加到屏幕菜單之後，它就不再依賴網路了（至少對大部分工作是如此）。

與小程序不同，PWA 是秉承著 Web 的開放精神而生的，它試圖打破各個公司的疆界，不再讓用戶成為某個邪惡大公司的禁臠，讓 Web 回歸自由與開放。對我們最直接的價值在於，我們的 PWA 應用也可以被搜索引擎搜索到了，以後你的應用將不再以各種應用市場作為唯一的傳播渠道。

可見，雖然沒有像小程序一樣在國內被熱炒，但PWA仍然是前途無量的，而且確實有一些國內的公司已經靠 PWA 取得了成功。

該如何選擇？
顯然，跟風是最省心但也往往是最差的選擇，即使要跟風，至少你也應該知道如何選。

大多數的應用，特別是初創期的應用，是根本不在乎那點動畫流暢度的損失的，甚至大部分用戶都覺察不出來。

初創期的應用，最在乎的是儘可能廣泛的曝光渠道，如果你的曝光渠道包括 Web （含掃碼），那麼你應該以 Hybrid 形態為主，因為它的頁面部分幾乎是可以在瀏覽器中和App中通用的，你可以用最小的代價開拓一條新的傳播渠道。當然，奢侈點的話你也可以做成PWA，但是PWA需要手機上有高版本Chrome瀏覽器的支持，但是在中國……你懂的。

對於一些特定領域的應用，比如時尚類的，動畫流暢度確實會在一定程度上影響用戶的觀感，這時候你可以根據自己的人力資源進行選擇。如果有好的前端，那麼就可以選擇基於JS的Native技術。如果你的業務不用在乎ReactNative的法律風險（比如根本沒想過到國外上市，或接受國外投資），那麼可以選擇ReactNative，畢竟它目前生態最成熟；反之，可以試試NativeScript，特別是，如果你的手下有資深的Java程序員（注意，不是資深JavaScript），那麼你應該選擇NativeScript + Angular的組合，因為Angular對Java程序員來說幾乎是免費的，兩者的生態共享了太多核心概念，以至於一個高級Java基本上自學一個月就能成為一個中級Angular。

如果你資金充足，手下同時有iOS和Android的高手，那麼，選擇原生吧，藉助這些你將有機會甩開對手。既然能用錢砸死對手，又何必繞彎子呢。

如果你的存量應用已經是原生的，而且相當成熟，那麼除非遇到人才危機，否則還是安心用下去吧。