試水Ionic架構（一）

最近因為項目需要，開始接觸Ionic（這似乎是一句套話了）。從對Ionic一無所知到初窺門徑，感覺心下頗為歡喜。跟移動前端開發相關的平台，之前接觸過Sencha和Xamarin，看了Ionic之後，感覺這個小東西更合口味。這篇階段總結算是這一個多禮拜以來學到的一些知識的一點點心得。

因為工作一般都在架構方面，所以更傾向於從架構的角度看待Ionic。

本篇作為新手的學習小結，如果是對Ionic已經了解的童鞋請繞行。本文更適合剛剛接觸Ionic的新人，從一個較高的角度來觀察這個架構，不至於迷失在各種術語之中。

（平時最不喜歡用術語，能用大白話說清楚的，何必呢？）

先說說前端平台這個玩意兒。

打開一個手機應用，看到的就是這個應用的前台，就是以前說的用戶界面。用來使開發這個界面更為容易的一個或幾個通用的庫，加上工具之類的，就是開發平台或者說架構。

一個容易理解的例子是：有一個朋友約球App，打開手機，可以看到有幾人在線，每個人的本周可以約球的時間，常去的場子的空閑時間，約球當天的天氣情況，場地費用以及是否有人已經發出了約球邀請等等。先說人員在線情況、空閑時段、球場情況、天氣情況以及場地費用等等這些信息，要麼存在伺服器或者雲端，要麼就是可以通過一些手段從其他地方抓過來，總之用Service（服務，例如REST / Web API）或者Pathol之類的抓取手段就能獲得。現在信息有了，需要呈現在手機上，然後還要把手機上約球的狀態或者信息再上傳回伺服器或者雲端，還可以推送最新的約球信息給小夥伴。

要實現上面的應用，可以有很多現成的技術利用，Ionic架構就是其中之一，它的好處是寫一次代碼，就可以發布給Android，iOS，還可以直接在瀏覽器里用。

現在再考慮另一個方面。

一個開發平台除了用來開發各種功能的庫，還需要其他幾個方面的幫助：要有一個合適的IDE，或者簡單的一個編輯器（大的如MS Visual Studio，小的如簡單的Notepad++）；要有編譯器，不管是有界面的還是命令行；要有debug和測試的工具，比如Chrome就自帶debug功能；對大的項目，代碼和package的管理也是需要的。

那麼下面就是從一個宏觀的架構角度來看Ionic到底是怎麼回事兒。

先看標題的圖（這是原創的圖，如需引用請自覺保留本文出處，謝謝！）

就從最熟悉的部分開始。首先是HTML和CSS，這倆東西二十年前就已經存在了，然後就是Javascript。HTML就是網頁，從靜態的演化成動態的，從1.0彷彿Windows 3.2的臉一路演進到5.0，出落得華麗典雅。CSS包含了格式定義，比如字體、顏色什麼的，給HTML用，讓HTML更方便的呈現更漂亮更統一的樣貌。Javascript一開始也是給HTML加上一些炫酷的效果，記得十幾年前第一次用Javascript寫了一個標題閃爍的HTML，覺得很酷，結果被Flash虐的一塌糊塗。那時，誰能想到Javascript能成就如今的輝煌啊！連風頭一時的SilverLight都已經被棄為弊履了。

不過寫過CSS和Javascript的小夥伴應該都有感觸，特別是正規學習過C、C++、Java或者C#的，對Javascript那些奇怪的語句和副作用弄得一臉懵，不說functoin可以沒有名字吧，就說一個地方聲明的變數竟然在作用域外還能訪問，就是因為Javascript不講作用域這個理，不講理還能咋辦？

但是Javascript的確好使，好使到現今的瀏覽器幾乎只認這個。老一輩的網民應該還記得一個叫做「Netscape」的瀏覽器吧？Javascript跟它頗有淵源。這個瀏覽器被IE打敗之後，其核心就轉移到Mozilla。這是另一個故事了，感興趣的可以去看：全面了解瀏覽器（內核）發展史。

言歸正傳，微軟幹了一件事兒，做了一個叫做Typescript的東西，是Javascript的超集（supperset）。超集這事兒說白了就是你有的我都有，我有的你沒有。關於Typescript說三件事兒就夠了。第一件，Typescript是一種類型化的語言，也就是說它有類型檢查，想想在寫代碼的時候可以有語法提醒是件多麼愜意的事情吧。第二件，它是Javascript的超集，也就說Javascript的寫法在Typescript里完全合法，不用擔心有任何不適應。第三件，它其實是一個包裝，把Javascript包裝成一個類型化的語言，然後用編譯器把Typescript編譯成Javascript，沒錯，就是Javascript。除此之外，Typescript不提供任何新的語言特性（就較高角度來說是這樣，微觀上講當然還有一些新東西）。

所以作為一個C#的資深玩家，突然感覺Javascript親切了許多，也不再對各種離奇的副作用心懷芥蒂，提心弔膽了。

Angular就是建立在Typescript、HTML和CSS基礎上的一個Web應用的框架。說白了，Angular是一個Javascript的庫，它用HTML定義一個Web UI組件的模板（Template），然後用Typescript寫這個組件背後的邏輯。當然CSS也變成SaSS，不過除了簡潔點一些之外，SaSS就是一個CSS，其實Angular也是把SaSS最終編譯成CSS，就像把Typescript編譯成Javascript。

從圖上看，Ionic似乎除了Angular和一個CLI之外就沒什麼了，事實的確如此，Ionic是基於Angular寫的一個庫，利用Angular的架構和設計，寫了一堆各式各樣的UI組件，使得用它來開發手機應用變得異常方便。為了把Ionic的應用發布到各種不同的手機上，Ionic提供了CLI，這是一個命令行工具，把其他一切都包含到一起，比如把一個Ionic應用編譯成iOS上運行的App。

Cordova是給程序提供訪問手機硬體功能的能力。這也是一個包裝好的庫，不需要了解其內部構造，只要知道通過Cordova，Ionic可以訪問諸如照相機、定位等等跟手機硬體相關的功能。