2016年10月16日 星期日

Ionic 2系列001:第一個Ionic 2專案

JavaScript功能持續更新著,瀏覽器也不斷追著JavaScript新功能在跑。一些受歡迎的JavaScript framework當然也得因應這些改變,而推出更新的版本。最近,JavaScript最大的改變應該就是正式加入「物件」相關語法-也就是俗稱的ES6(ECMAScript 6 或稱為ECMAScript 2015)。

但這對以Ionic框架開發hybrid apps有何影響?簡言之,因應ES6的變革,Angular推出了Angular 2,Ionic也順勢推出Ionic 2(2016年10月已過beta版,來到Ionic 2.0RC1),Ionic apps的開發也完全物件化,整體改變相當巨大。因此,接下來的文章將會以Ionic 2的介紹為主。

Ionic 2與Ionic 1的差異

安裝部分仍可參考之前的舊文Hybrid Apps開發系列之1:Ionic/Cordova框架環境設定,但如果之前已經安裝過node.js,必須先更新npm,說明如下:
  1. Node.js與npm:如果原本已經裝了node.js,則必須先更新npm
    npm install -g npm
    
  2. Ionic 2/Angular 2:不論有無安裝過,都必須再以npm安裝。安裝之後,新的Ionic 2命令列工具(Ionic CLI)仍適用於先前Ionic 1專案。
    npm install -g ionic
    
  3. Cordova:Cordova情形也與Ionic 2相同,必須安裝、或更新到最新版
    npm install -g cordova
    
目前(2016/10)安裝之cordova與ionic最新版本

儘管安裝程序與先前相同,但開發Ionic 2專案基本上是砍掉重練的概念。Angular 2/ Ionic 2採用了微軟的TypeScript(語法較ES6更多,可以看成是ES6標準的implementation),因此以Ionic 2 CLI產生之專案,從專案架構到程式碼都與Ionic 1完全不同。

第一個Ionic 2專案

Ionic 2 CLI成功安裝之後,建立專案的方式不變:
ionic start MyApp blank
依舊可建立名為"MyApp"的Ionic 1專案,如先前舊文Hybrid Apps開發系列之2:第一個專案所述。但若要建立TypeScript版本的Ionic 2專案,則必須加上--v2(註:網路部份文章介紹"-ts"參數,現已變為預設選項,不需再加),如:
ionic start MyApp01 blank --v2
ionic start MyApp02 --v2
前者指定blank將建立空白專案"MyApp01",後者未指定模板,則建立Tabs式專案"MyApp02"。
當建好Ionic 2專案,切換至專案目錄,再執行
ionic serve
便會開啟瀏覽器,顯示app執行結果,如下圖是Tabs專案的執行畫面:


或是輸入
ionic serve --lab
則會看到不同平台上的模擬結果:
ionic serve --lab同時顯示iOS, Android與Windows三種平台的模擬畫面

Ionic 2專案結構

Ionic 2採用TypeScript為預設語言,專案結構也因應語言特性而做了大幅改變,空白專案結構如下圖:

Ionic 2專案結構做了大幅度更動
  1. src資料夾為所有程式碼所在位置,www資料夾則為自動產生。當你使用ionic serve或其他build與執行指令時,Ionic便會將src的程式碼(TypeScript或ES6),轉譯(transpiling)為瀏覽器可執行的ES 5程式碼,放置於www資料夾中。換句話說,www資料夾的任何更動,在下次執行專案時,便會被覆蓋掉。
  2. src資料夾內不再有JavaScript的.js檔,取而代之的是.ts檔(TypeScript)。資料夾內有:
    • app資料夾:資料夾內app.component.ts便是Ionic 2 apps程式的進入點,app.module.ts則用來設定所使用的模組。
    • pages:Ionic 2 apps每一個頁面都會對應到pages內的某個資料夾。例如上圖有pages/home,代表有一個home頁面。更進一步檢視home資料夾,內有home.ts(頁面程式元件)、home.html(頁面模板)、以及home.scss(頁面css定義)。Ionic 2 CLI也提供了在專案裡建立單一頁面的指令,下例便會建立pages/LoginPage資料夾:
      ionic g page LoginPage
    • theme:放置apps的css設定檔(.scss檔)
    • assets:放置圖片、檔案等apps會使用到的資源。
    • index.html:apps的webview的進入點。
以上簡要說明Ionic 2與Ionic 1的差異。然而,打開上述資料夾中的.ts檔,其寫法與先前Ionic 1 JavaScript完全不同。因此,接下來的文章,將會進一步介紹如何用TypeScript撰寫Ionic 2 app。

最後,對開發人員最重要的問題是:我需要從Ionic 1換成Ionic 2嗎?Ionic 2加入物件導向語法後,變得更結構化,更容易reuse。長遠來看,加入Ionic 2的開發行列,應該是利大於弊。唯一要克服的便是TypeScript。

讀者若有興趣可自行閱讀下列文章,進一步了解ES5,ES6,TypeScript的差別:

  1. ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?(這裡有簡體中文翻譯版)
  2. 從ES6規範看JavaScript的現在和未來
  3. 快速瞭解 TypeScript 是什麼東西

沒有留言:

張貼留言