1.3　初識Ionic v3.x

經(jīng)過之前的介紹，相信讀者已經(jīng)了解了跨平臺移動開發(fā)框架的含義以及使用它們的原因。目前市面上經(jīng)過大浪淘沙，尚存的移動開發(fā)框架各具特色，而且大都開源免費，如何選擇出適合自己的那一款就成了開發(fā)者必須要面對的問題。

1.3.1　為什么選擇Ionic

雖不能說在移動開發(fā)領(lǐng)域非常資深和見多識廣，筆者也是在歷經(jīng)數(shù)月了解把玩多個移動開發(fā)框架后最終選擇了Ionic作為主力開發(fā)平臺。個人考慮的原因大概有以下幾點，供讀者借鑒參考和批判：

?　成熟堪用

從2015年5月12日發(fā)布v1.0正式版本以來，經(jīng)過Ionic框架開發(fā)團隊不斷改進，最近Github上該開源項目的issue（報錯）總數(shù)趨于不變。除了能找到一些Ionic處于早期Beta版階段時被黑得伸手不見五指的歷史老帖，國內(nèi)外的開發(fā)者論壇上目前對Ionic的口碑反映都還不錯。在stackoverflow網(wǎng)站上Ionic的新問題也已經(jīng)不多了。種種跡象表明現(xiàn)在的Ionic歷經(jīng)時間的洗禮，達到了成熟可控沒有弱智bug的程度。

?　適合團隊協(xié)作和中大型項目

通過集成Angular和AngularUIRouter，Ionic框架充分發(fā)揮了Angular的優(yōu)勢。本書會在第3章介紹Angular的一些特性。在這里讀者需要了解的就是，有了Angular做基礎(chǔ)，Ionic開發(fā)應(yīng)用的過程比基于jQuery/Zepto或者jQuery Mobile框架的過程更容易進行工程質(zhì)量管理和開發(fā)團隊職責(zé)劃分。

?　相對的性能優(yōu)勢

Ionic早期的版本雖然功能初步完備，但是面對大數(shù)據(jù)量或動畫切換場景時往往性能不佳。經(jīng)過一年多的持續(xù)改進和定點優(yōu)化，情況已經(jīng)有很大改善。對于一些經(jīng)典的性能瓶頸場景，Ionic或提供特殊優(yōu)化過的Angular指令，或內(nèi)置可靈活定制的緩存機制，或給出調(diào)整影響性能的開關(guān)參數(shù)，使開發(fā)人員能無痛地讓開發(fā)出的應(yīng)用在使用流暢性上大致接近原生應(yīng)用。

?　良好的社區(qū)支持服務(wù)

目前處于正式版的v3.x，Ionic都有專人在社區(qū)進行問題解答和在Github跟蹤解決issue。對于有bug暫未解決的部分，官方文檔網(wǎng)站也都會及時明確提示，使開發(fā)者能夠避開雷區(qū)。

?　完整的開發(fā)構(gòu)建工具鏈

在完成第2章的Ionic開發(fā)調(diào)試環(huán)境安裝后，通過使用NPM、Gulp、Bower、Gordova和Ionic CLI一起組成的工具鏈，就能快速進入App應(yīng)用的迭代開發(fā)測試階段，節(jié)省傳統(tǒng)開發(fā)中大量的無效時間。相信讀者在后面章節(jié)的動手實驗環(huán)節(jié)中將能深入感受到這一點帶來的便利。

1.3.2　基于Web技術(shù)HTML 5/CSS 3/JavaScript

大體上基于Ionic框架的開發(fā)可以理解成開發(fā)一個基于Web技術(shù)開發(fā)SPA（單頁面應(yīng)用），通俗地說就是使用HTML 5/CSS 3/JavaScript開發(fā)一個App應(yīng)用頁面。可能有些讀者未曾了解和接觸過Angular和SASS/SCSS技術(shù)，目前可以把Angular理解為基于TypeScript開發(fā)的框架，而SASS/SCSS只是用于最終生成CSS代碼的過程文件。因此具備HTML 5/CSS 3/JavaScript基礎(chǔ)知識的開發(fā)者，是有能力快速入門和產(chǎn)出的。

從圖1.5的示例圖中讀者可以發(fā)現(xiàn)，一個使用Ionic框架開發(fā)的App應(yīng)用主要有效運行代碼就是主HTML文件＋主CSS文件＋若干TypeScript文件構(gòu)成。

1.3.3　基于Angular框架

選擇基于Angular框架，Ionic開發(fā)團隊?wèi)?yīng)該是經(jīng)過深思熟慮的，雖然最近在React Native大火之后出現(xiàn)了很多對Angular詬病的聲音。

Angular建立在這樣的信念上：應(yīng)該把聲明式編程用于構(gòu)建用戶界面以及編寫軟件構(gòu)建，而指令式編程非常適合來表示業(yè)務(wù)邏輯。Angular框架采用并擴展了傳統(tǒng)HTML，它設(shè)計了雙向的數(shù)據(jù)綁定來適應(yīng)動態(tài)內(nèi)容刷新，這種雙向數(shù)據(jù)綁定允許模型和使用模型數(shù)據(jù)來完成界面渲染的多視圖之間的自動同步。因此，Angular使得引入jQuery這樣的庫來對DOM的操作不再重要并提升了可測試性。

Angular完成了以下的設(shè)計目標(biāo)：

?　將應(yīng)用邏輯與對DOM的操作解耦，這能提高代碼的可測試性。

?　將應(yīng)用程序的測試看的跟應(yīng)用程序的編寫一樣重要，而代碼的模塊構(gòu)成方式對編寫單元測試的難度有巨大的影響。

?　將應(yīng)用程序的客戶端與服務(wù)器端解耦，這允許客戶端和服務(wù)器端的開發(fā)可以分頭行動，并且讓雙方的復(fù)用成為可能。

?　指導(dǎo)和約束開發(fā)者構(gòu)建應(yīng)用程序的整個歷程：從用戶界面的設(shè)計，到編寫業(yè)務(wù)邏輯，再到測試。

Angular實現(xiàn)了MVVM模式，并鼓勵模型、視圖和視圖-模型組件之間的松耦合。通過依賴注入（dependency injection），Angular為客戶端的Web應(yīng)用引入了傳統(tǒng)服務(wù)端開發(fā)常用的模式實踐。

相對jQuery類庫來說，Angular是一個復(fù)雜完善的系統(tǒng)級框架，因此學(xué)習(xí)和上手都需要相對花費更多的時間和精力。本書第3章將為未曾接觸過Angular框架的讀者介紹Ionic開發(fā)中需要了解的基礎(chǔ)概念。

1.3.4　接近原生App應(yīng)用的絢麗界面組件

Ionic提供了模擬參照iOS和Android平臺上的原生移動應(yīng)用布局和眾多移動端界面組件。這些布局和交互型組件都帶有可調(diào)整的動畫效果和支持觸摸手勢事件。因此Ionic在為技術(shù)人員提供快速開發(fā)能力的同時，又最大程度兼顧了用戶友好性和界面美觀。更有甚者，界面設(shè)計的專業(yè)開發(fā)者在Ionic界面組件的基礎(chǔ)上實踐了Material Design的概念，推出了有更多開源絢麗界面組件的網(wǎng)站http://ionicmaterial.com/。該網(wǎng)站也提供了如圖1.6所示的模擬界面預(yù)覽組件供學(xué)習(xí)參考。

本書第5～9章將會逐一詳細介紹Ionic提供的各種界面組件，有興趣的讀者可以提前翻看組件示例圖來了解。

1.3.5　自適應(yīng)（Responsive）布局

移動設(shè)備已經(jīng)慢慢超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。然而Android設(shè)備屏幕大小分布的碎片化使開發(fā)者不得不面對一個難題：如何才能在不同大小的設(shè)備上使同樣的內(nèi)容呈現(xiàn)時更加自然友好？

2010年，Ethan Marcotte提出了“自適應(yīng)網(wǎng)頁設(shè)計”（Responsive Web Design）這個名詞。它指可以自動識別屏幕寬度，并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。圖1.7展現(xiàn)的就是同一網(wǎng)頁在瀏覽器調(diào)整為四種不同寬度時自動調(diào)整布局結(jié)構(gòu)的示例。

Ionic框架已經(jīng)內(nèi)置了自適應(yīng)布局的支持，它額外提供了三個不同響應(yīng)式CSS類默認樣式用于區(qū)分手機豎屏與橫屏、平板豎屏與橫屏這4種寬度布局類別。另外開發(fā)者也可以自定義更多的響應(yīng)式CSS類滿足特殊需要。

1.3.6　支持個（任）性定制

本章的1.3.4節(jié)筆者提到Ionic內(nèi)置了多組適應(yīng)布局和交互型組件。這些開箱即用，功能完善、界面完美的組件集能夠滿足大多數(shù)開發(fā)場景的需要。但世界并不總是那么如意，可能某些時候開發(fā)者需要應(yīng)對自己或他人的腦洞大開，必須將已有組件做各種個性化更改的局面。

提前考慮到這一點的Ionic團隊在開發(fā)組件的樣式CSS類時放開了本書第4章將要介紹的SASS/SCSS，將CSS更動態(tài)化，此外再結(jié)合本書第10章將要介紹的設(shè)備信息服務(wù)組件，開發(fā)者就能依據(jù)移動設(shè)備的硬件參數(shù)和平臺資源配置，將應(yīng)用定制成任意的模樣。

1.3.7　Ionic的缺點

前面介紹了一大堆使用Ionic框架做跨平臺移動應(yīng)用開發(fā)的優(yōu)勢，但是理性最終總能戰(zhàn)勝狂熱，讀者有必要了解Ionic與生俱來的一些缺陷，從而知道不適合使用Ionic的環(huán)境或者需要提前籌劃規(guī)避的深坑。

經(jīng)過近2年全球開發(fā)人員的使用，基本對Ionic存在的缺點達成了共識：

?　Hybrid（混合）模式開發(fā)的應(yīng)用自有的性能缺陷。

由于應(yīng)用的邏輯執(zhí)行是基于瀏覽器所帶的JavaScript動態(tài)代碼在界面主線程上執(zhí)行，因此在低端Android設(shè)備上性能缺陷嚴(yán)重，用戶操控時卡頓感很明顯。好在隨著Android設(shè)備提供商的硬件跑分殘酷競爭，目前市面所售的智能手機使用Ionic開發(fā)出的App應(yīng)用與原生應(yīng)用相比已經(jīng)基本無差異感了。不過即使如此，Ionic也不能用于有較高實時圖形響應(yīng)要求的游戲開發(fā)。

?　深度依賴于Angluar框架。

Angluar框架在為Ionic帶來各種好處的同時，也帶來了初學(xué)者學(xué)習(xí)曲線陡峭（這對那些筆者極端仰慕的天資聰穎者當(dāng)然例外），深刻理解的人用起來效率很高，不理解的用了到處是坑的局面。而對Angluar框架的深度依賴，也讓Ionic在Angluar開發(fā)團隊開發(fā)其2.0版本時決定重起爐灶拋棄以前的架構(gòu)的時候處境尷尬，不得不有點被脅迫地將Ionic框架同步升級為2.0版本，將開發(fā)使用的主力語言從JavaScript轉(zhuǎn)為微軟主導(dǎo)開發(fā)的TypeScript。

?　深度依賴Cordova插件提供硬件設(shè)備的接口。

當(dāng)沒有相應(yīng)的Cordova插件提供想要的硬件設(shè)備的接口時，開發(fā)人員需要自己分別編寫iOS和Android平臺的插件。當(dāng)然這種情形出現(xiàn)的概率并不大。

?　Windows Phone支持比較弱。

Ionic的官方網(wǎng)站已經(jīng)基本沒有關(guān)于Windows Phone的開發(fā)內(nèi)容，好在Windows Phone的市場也已經(jīng)日暮西山，這部分微軟死忠用戶的價值基本不用惦記了。

在筆者看來，對于開發(fā)應(yīng)用型的技術(shù)，應(yīng)該也本著“合則用，不合則棄”的原則來決定是否投入精力來學(xué)習(xí)。讀者需要根據(jù)Ionic的優(yōu)缺點、自身的技術(shù)積累優(yōu)勢和計劃編寫的移動App的特點來考慮是否要使用Ionic框架。

1.3.8　Ionic的商業(yè)案例

從Ionic的Beta版開始，國外就已經(jīng)有眾多的個人開發(fā)者和公司開始追蹤和試用這個據(jù)稱是混合開發(fā)的神器，從此誕生了不少使用Ionic框架開發(fā)的App應(yīng)用。目前據(jù)Ionic網(wǎng)站的官方統(tǒng)計，已有超過120萬移動App應(yīng)用是用Ionic框架來構(gòu)建的。感興趣的讀者可以到http://showcase.ionicframework.com/查找一些被Ionic官方推薦的應(yīng)用列表，如圖1.8所示。

考慮到大部分購買本書的讀者更關(guān)注Ionic的中文資料和在國內(nèi)互聯(lián)網(wǎng)的使用，這里筆者也列出了專門以Ionic為主題的技術(shù)論壇的網(wǎng)頁http://ionichina.com/showcase上展示的基于Ionic開發(fā)的部分App應(yīng)用，如圖1.9所示。

1.3.9　Ionic的開源案例

學(xué)習(xí)和提升IT開發(fā)技術(shù)的最好方式就是大量閱讀其他優(yōu)秀開發(fā)者的代碼。在Ionic的官方網(wǎng)站同時也維護了為初學(xué)者準(zhǔn)備的很多基于Ionic框架開發(fā)的App應(yīng)用開源案例，感興趣的讀者可以去自行登錄下載學(xué)習(xí)http://market.ionic.io/starters，如圖1.10所示。