1.2　跨平臺移動開發(fā)框架

對于技術(shù)人員來說，一個技術(shù)平臺路線的選擇往往決定了未來2～3年的努力方向和收入水平增長速度能否跟上和超越國家貨幣總量增長速度。為了提升收入水平，主要可以采用兩種策略：

?　深：專攻某方面專門技術(shù)成為專家，包治該領(lǐng)域內(nèi)疑難雜癥。崇尚磨刀不誤砍柴工，十年磨一劍。

?　快：跟隨社會與行業(yè)動向，迅速站到風(fēng)口抓住商機，敏捷地搶到頭桶金。崇尚天下武功，唯快不破。

本書更適合那些希望從國家社會民族產(chǎn)業(yè)的大局入手，不過早拘泥小節(jié)，使用第二個手段野蠻生長，把機會快速變現(xiàn)成個人和團隊現(xiàn)金流的技術(shù)人員或創(chuàng)業(yè)人士。當(dāng)然作者不推崇和強調(diào)這兩種手段之間的對立。對技術(shù)的鉆研和深入探索也非常重要，畢竟知道分子和半桶水是無法適應(yīng)稍微復(fù)雜的商業(yè)需求和后續(xù)演進的。然而本書介紹的Ionic框架技術(shù)，會更側(cè)重于快而不是深。

1.2.1　什么是跨平臺移動開發(fā)框架

相信本書的讀者都經(jīng)歷過為自己或家人朋友購買智能手機。如果不是因為經(jīng)濟上的原因，買一個蘋果手機還是安卓手機都有可能成為一個艱難的選擇。兩者操作系統(tǒng)的不同導(dǎo)致了其上的App應(yīng)用文件也是不兼容的。與PC市場上微軟的Windows操作系統(tǒng)一支獨大的情況相反，蘋果和谷歌分別推出的iOS和Android移動操作系統(tǒng)，都各自有指定的技術(shù)開發(fā)平臺和官方推薦的開發(fā)語言。

作為一個移動應(yīng)用開發(fā)者不得不做出取舍，是做個專家只能精通某一移動操作系統(tǒng)平臺還是冒著什么都會一點，但又什么都只會比Hello World深一點的風(fēng)險同時兼顧多個移動操作系統(tǒng)平臺呢？這里還不能算上市場份額正在不斷丟失，說多了都是淚的Windows Phone操作系統(tǒng)。看似兩難的選擇題目前有另外一個選項可以考慮：跨平臺移動開發(fā)框架。

跨平臺移動開發(fā)框架是指基本經(jīng)過一次開發(fā)，然后通過打包工具適配輸出可以在多個移動操作系統(tǒng)（也包括PC操作系統(tǒng)）流暢運行并能調(diào)用豐富硬件設(shè)備功能的開發(fā)框架。為了實現(xiàn)多系統(tǒng)之間的兼容，跨平臺開發(fā)框架的思路都是采用HTML 5/CSS 3/JavaScript為主力開發(fā)語言平臺，利用移動操作系統(tǒng)對Web技術(shù)或內(nèi)嵌Web瀏覽器的支持來執(zhí)行代碼邏輯，使用開發(fā)環(huán)境提供的工具生成適合各操作系統(tǒng)平臺的安裝文件。

以本書主要篇幅介紹的Ionic v3.x為例，從技術(shù)上來看，它是一款基于HTML 5/CSS 3/JavaScript并主要使用TypeScript為開發(fā)語言的跨平臺開發(fā)框架。使用它進行開發(fā)的主要產(chǎn)品是用于界面結(jié)構(gòu)的網(wǎng)頁視圖模板、定制后生成的CSS渲染文件和包含數(shù)據(jù)業(yè)務(wù)邏輯的JavaScript文件。為了能夠被安裝在多個移動操作系統(tǒng)上，它的構(gòu)建命令會調(diào)用底層的Cordova框架來生成用于Android平臺安裝的apk文件和用于iOS平臺安裝的ipa文件。而Ionic具有的開發(fā)框架特性，是指它已經(jīng)內(nèi)置了符合移動平臺外觀特征和操作邏輯的一組預(yù)定義設(shè)計組件，它們能通過Angular這個基于MVVM（Model-View-ViewModel的簡寫）模式的業(yè)內(nèi)流行前端開發(fā)框架完美配合。使用Ionic的開發(fā)人員并不用從頭開始寫HTML 5/CSS 3/JavaScript代碼，而是站在業(yè)內(nèi)有豐富的前端界面與功能組件開發(fā)經(jīng)驗的設(shè)計師團隊的肩膀上，通過對已有應(yīng)用模板的定制修改擴展，快速地將商業(yè)計劃變成可以運行的App應(yīng)用。

1.2.2　為什么選擇跨平臺移動開發(fā)框架

之所以推薦讀者選擇跨平臺移動開發(fā)框架，是因為它有以下優(yōu)勢：

?　一次編寫多平臺兼容

兩大移動操作系統(tǒng)平臺（iOS和Android）均使用同一瀏覽器內(nèi)核，能夠完美支持HTML 5技術(shù)。開發(fā)出的代碼可以使用框架提供的打包工具生成適配于相應(yīng)平臺的應(yīng)用安裝包，以不斷適應(yīng)移動操作系統(tǒng)的演化而升級的標準工具，確保應(yīng)用的兼容性。而框架提供的對底層硬件設(shè)備的JavaScript訪問接口又保證了充分發(fā)揮設(shè)備的能力，突破了HTML 5只能在Web瀏覽器里渲染的限制。

?　迅速上手，立即產(chǎn)出

沒有學(xué)過計算機專業(yè)知識，不懂C++、Java、C#的業(yè)余愛好者或是創(chuàng)業(yè)者，也能夠通過業(yè)余時間學(xué)習(xí)網(wǎng)上大量充斥的免費HTML 5/CSS 3/JavaScript教程，遵照開發(fā)框架的入門指引開發(fā)出可用的App應(yīng)用。特別對于創(chuàng)業(yè)者來說，在事業(yè)啟動時如果能夠Fail fast or win big（快速失敗或是獲得大成功），將有助于更快到達成功的彼岸或放棄無謂的嘗試。

?　擁抱變化，貼近用戶

碎片化的國內(nèi)Android應(yīng)用市場和被蘋果任性而嚴厲管理的Apple Store，都是App應(yīng)用發(fā)布推廣和升級的噩夢。而通過網(wǎng)頁形式動態(tài)渲染界面和內(nèi)容的跨平臺移動開發(fā)框架，輔以動態(tài)加載組件，基本能做到無痛苦的更新推送。另外也可以處理成有些內(nèi)容頁面直接訪問在線站點，提高更新效率，繞開某些應(yīng)用市場過于煩瑣的審核機制。現(xiàn)實中雖然不至于出現(xiàn)一夜之間把App應(yīng)用的業(yè)務(wù)領(lǐng)域從互聯(lián)網(wǎng)金融轉(zhuǎn)向為O2O社區(qū)服務(wù)的實際需要，但具備這個應(yīng)變能力是創(chuàng)業(yè)團隊和個人在這個殘酷的商業(yè)社會生存下去的一個重要保障。

?　提供界面框架使無美工基礎(chǔ)的全棧開發(fā)者也能開發(fā)出友好的用戶界面

因為在這些開發(fā)框架中基本都已經(jīng)提供了定義好的適合移動平臺的組件和樣式，開發(fā)人員只需要根據(jù)需要選擇組件和樣式即可。基于開源技術(shù)的組件和樣式又都提供客制化的途徑，開發(fā)人員后期也可以為了美化界面而修改框架原生設(shè)置來定制App應(yīng)用界面。

1.2.3　可選的跨平臺移動開發(fā)框架簡介

目前在國內(nèi)流行的跨平臺移動開發(fā)框架有：Ionic、React Native、Weex、jQuery Mobile等。類似的其他框架還有很多，這里只介紹有代表性和有活躍開發(fā)者群的。此外由于本書的主題是關(guān)于Ionic，因此將會集中大量篇幅為讀者介紹Ionic，以幫助樹立學(xué)習(xí)該開發(fā)框架的信心和決心。

1．Ionic

在2015年5月12日宣布正式發(fā)布的Ionic被認為是目前最成熟和有潛力的一款HTML 5跨平臺移動開發(fā)框架。直觀地看，它提供了很多符合移動平臺界面觀感和操作邏輯的UI組件來幫助開發(fā)者開發(fā)強大的互聯(lián)網(wǎng)App移動應(yīng)用（以及企業(yè)App移動應(yīng)用）。

Ionic框架的目的是以Web技術(shù)開發(fā)移動應(yīng)用，而基于Apache Cordova的編譯平臺，實現(xiàn)了編譯打包成各個移動操作系統(tǒng)平臺適配的應(yīng)用程序包。

在評估基于HTML 5技術(shù)的App應(yīng)用各項指標中，運行速度占據(jù)非常重要的位置。基于Ionic編寫的App應(yīng)用在最新的移動設(shè)備中表現(xiàn)卓越，運行流暢，能讓用戶感覺到用HTML 5開發(fā)的App也可以飛起來。

Ionic已經(jīng)成為MVVM前端框架AngularJS的移動端標準解決方案。Ionic基于AngularJS創(chuàng)造出一款適合開發(fā)者分離業(yè)務(wù)模型、構(gòu)建單元測試的強大應(yīng)用開發(fā)框架。因此Ionic可以適用于大中小各種規(guī)模的App應(yīng)用開發(fā)和團隊協(xié)作。

Ionic為當(dāng)前流行的兩種移動設(shè)備而設(shè)計，并且有相當(dāng)完美的展現(xiàn)層。伴隨框架提供的眾多流行移動組件、單頁面路由結(jié)構(gòu)、內(nèi)置的用戶界面交互規(guī)范、華麗且可擴展定義的主題和全面的官方文檔，移動開發(fā)者一旦上手就不愿意離開它了。

利用Ionic提供的CLI（命令行接口），只需要通過輸入一個命令就可以完成創(chuàng)建應(yīng)用初始框架、構(gòu)建測試包、部署應(yīng)用程序到指定的平臺設(shè)備或模擬器上。

安裝Ionic消耗的時間成本也非常低，只需要在命令行運行npm install-g ionic完畢就可以開始上手了。

最值得一提的是，Ionic的開發(fā)運營團隊提供了完整的社區(qū)生態(tài)和支持體系。在圖1.1演示的Ionic官方發(fā)現(xiàn)者（discover）網(wǎng)站http://ionic.io/discover里讀者可以由此入口找到關(guān)于Ionic的官方與社區(qū)資源。

官方網(wǎng)站：http://ionicframework.com/

2．React-Native

React-Native是Facebook在2015年初React.js技術(shù)研討大會上公布的一個開源項目。它支持用開源的JavaScript庫React.js來開發(fā)iOS和Android原生App。在初期React-Native僅支持iOS平臺，同年9月份，該開源項目同時支持Android平臺。

React-Native的原理是在JavaScript中用React抽象操作系統(tǒng)原生的UI組件，代替DOM元素來渲染，比如以<View>取代<div>，以<Image>替代<img>等。

和其他的跨平臺移動Web框架相比，React-Native優(yōu)點顯著：不用WebView，徹底擺脫了WebView讓人不爽的交互和性能問題、React-Native封裝的原生控件有更好的觸摸滾動體驗和靈敏的手勢識別、React-Native有更適合的線程模型保證了前臺操作的流暢性。

目前階段React-Native比較明顯的缺點則是需要維護兩套代碼。圖1.2中顯示的React Native開發(fā)的App，是iOS版本下的應(yīng)用。

中文官方網(wǎng)站：http://reactnative.cn/

3．Weex

Weex是阿里巴巴在2016年4月21日Qcon大會上發(fā)布的跨平臺移動開發(fā)工具。他遵循Web標準，同時支持vue.js的語法。因此，可以使用vue.js語法來開發(fā)應(yīng)用程序，并且按照官方文檔所說，他的特點是體積小、語法簡單、易于掌握，可以橫向擴展和定制原生組件和功能以及較高的性能，因為筆者沒有使用過Weex，在此不多做介紹。圖1.3中顯示的是對多平臺支持的Weex。

中文官方網(wǎng)站：http://weex.apache.org/cn/

4．jQuery Mobile

jQuery Mobile的前身是jQuery。jQuery是一款非常流行的Web程序開發(fā)時使用的JavaScript類庫，當(dāng)時它的出現(xiàn)只是為了PC端的瀏覽器而設(shè)計開發(fā)的。在移動互聯(lián)網(wǎng)中為了更好地滿足瀏覽器運行Web程序的需求，基于jQuery和jQueryUI的基礎(chǔ)上，jQuery Mobile應(yīng)運而生。它是jQuery在移動設(shè)備上的版本，它不僅帶來能夠讓主流移動平臺支持的jQuery核心庫，還包括一整套完整和統(tǒng)一的移動UI框架。對于已熟練掌握jQuery、任務(wù)是編寫小型App應(yīng)用的個人或小團隊來說，jQuery Mobile不失為一個好的選項。筆者在北美搭乘過的灰狗（GreyHound）公司提供的簡單App應(yīng)用，就是使用jQuery Mobile開發(fā)的。圖1.4中http://jquerymobile.com/resources/列出了一些使用jQuery Mobile開發(fā)出的移動應(yīng)用示例。

官方網(wǎng)站：http://jquerymobile.com/

1.2.4　什么是PhoneGap/Cordova/Ionic

在混合型應(yīng)用（Hybrid App）技術(shù)里，PhoneGap和Cordova這兩個詞往往會被混用。雖然本書主要內(nèi)容是介紹Ionic開發(fā)框架，但是弄清楚提供打包支持和底層硬件設(shè)備接口組件的Cordova的來龍去脈也有助于技術(shù)人員與同行探討IT文化。

2008年8月，PhoneGap在舊金山舉辦的iPhone Dev Camp上嶄露頭角，起名為PhoneGap源于創(chuàng)始人的想法：“跨越Web技術(shù)和iPhone之間的鴻溝（Gap）”。當(dāng)時PhoneGap還隸屬于Nitobe（泥土鱉）公司。經(jīng)過幾個版本的更新，PhoneGap開始支持更多的移動操作系統(tǒng)平臺。在2011年，Adobe公司收購了Nitobe公司，隨后Adobe把PhoneGap項目捐獻給了Apache基金會，但是保留了PhoneGap的商標所有權(quán)。而Apache收錄這個項目后在2012年Adobe PhoneGap更新到1.4版本時最終更名為Apache Cordova。

隨后就出現(xiàn)了PhoneGap和Cordova兩個名字經(jīng)常被混淆使用的狀況。兩者區(qū)別如下：

?　Cordova是Adobe捐獻給Apache的開源項目名，而PhoneGap是Adobe的商業(yè)產(chǎn)品名。

?　PhoneGap產(chǎn)品另外還包括一些額外的屬于Adobe的商用組件，例如PhoneGap Build和Adobe Shadow。

目前其實Adobe的PhoneGap產(chǎn)品和Apache的Cordova項目維護的是共同的一份源代碼組件。最終我們可以把PhoneGap看作是Apache Cordova的一個分支。類似于Apache Cordova是一臺發(fā)動機，運行在PhoneGap上，就像WebKit這個瀏覽器引擎運行在Chrome瀏覽器和Safari瀏覽器上。為了正確地反映現(xiàn)狀，本書使用的是Cordova這個代號，盡管很多時候兩者是可以混用的。

然而不是裝了Cordova以后開發(fā)起跨平臺的App應(yīng)用就一了百了了。Cordova提供的是比較底層的硬件設(shè)備功能庫和App打包功能，而它對表現(xiàn)層并沒有任何實現(xiàn)支持。因此業(yè)內(nèi)使用Cordova開發(fā)往往至少需要再加上作為展現(xiàn)和交互的UI層工具或者框架，而Ionic和前面提及的jQuery Mobile主要職責(zé)都是提供這部分UI層功能。

所以讀者可以把Ionic理解成一個基于Web技術(shù)開發(fā)SPA（單頁面應(yīng)用）的框架，通俗地說就是使用HTML 5/CSS 3/JavaScript開發(fā)一個App應(yīng)用頁面。

為了便于大型項目的開發(fā)協(xié)作，Ionic本身的組件和樣式開發(fā)分別集成利用了AngularJS和SASS/SCSS。最后為了提供給開發(fā)者一站式開發(fā)平臺，Ionic又集成了Cordova的構(gòu)建打包功能，使得開發(fā)者最終可以直接用Ionic的CLI（命令行接口）來調(diào)用Cordova的創(chuàng)建、編譯、打包等功能。