前言

我是一個前端 (也許全端) 工程師，好不容易學會寫 Angular 2 了耶，但難道我就一輩子只能寫網站嗎？QQ 如果想要寫手機的 App，還要再去學 Java 寫 Android App，去學 Swift 來寫 IOS App，這樣雖然也不是不可以，但是每學一個技術就要經歷一個學習曲線，多痛苦啊！！

當然既然是前端工程師寫個 Web App 難不倒我們，可是 Web App 還是有很多地方比不上 Native App，例如一定要連上網。可是我們又不想特地去學 Native Code 呢？這時候就可以寫 Hybrid App 了。

Hybrid App： 混合語言程式的部份代碼會以 Web 技術編寫，如 HTML5、 CSS 和 JavaScript。這些程式都是被包裹在原生容器 (Native Container) 和透過手機上的瀏覽器引擎來呈現 HTML 和執行 JavaScript。 Hybrid App 的優點是一個編碼程式能夠跨越不同的作業平台，不需要為每個操作系統編寫特定的編碼。

我現在會 Angular，再以 Hybrid App 方式開發，就可以用到我的專長啦！！
我們採用 Cordova + Ionic + Angular 2 來開發。

  • Cordova 是混合式框架
  • Ionic 是基於 Cordova 的高階 UI 框架
  • Angular 2 是網頁技術框架

Ionic 2

Ionic 演變至今是第二代，跟第一代差別在哪呢？第一代是搭配 AngularJS(1.x)，而隨著 Angular 2 的誕生，Ionic 2 也產生了，當然一些細節功能也有改動。

附上官網的介紹：

Know how to build websites? Then you already know how to build mobile apps. Ionic Framework offers the best web and native app components for building highly interactive native and progressive web apps with Angular.

Angular 2 跟 React 彼此為競爭對手，Ionic 2 跟 React Native 採用兩者的網頁框架，所以同樣為對手。兩者概念其實都是 Hybrid App 的框架。因為採用的網頁框架就是主流，混合框架這兩個也是主流，至於選甚麼好就見仁見智。

這邊附上用 Ionic 開發的 APP，大家可以點進去看看

開發漂亮介面、功能強大的 App 決不是問題！ :)

以下為其中幾款的樣貌

chefsteps

Pacifica

明天繼續介紹如何實作。