最近 Facebook React 團隊釋出了 React Native, 用來構(gòu)建 Mobile Native 應(yīng)用. 非常給力的口號即是標題所指: Learn Once, Use Anywhere.

我突然覺得, 他們正好把我思想的口號給用去了( 不過我沒想到這么美的詞 ), 因為我已經(jīng)在更早的時候就決定要講一講 Ionic 了, 這個口號也同樣是: Learn Once, Use Anywhere, 但是, 加了一句, For AngularJS.

開始 Ionic 之前, 我們要先回顧下歷史.

Web 領(lǐng)域的歷程

Web 領(lǐng)域從 1995 年第一個真正的網(wǎng)站建立到 2015 年, 發(fā)展的飛起. 整體而言, 我認為經(jīng)歷了以下發(fā)展階段:

1. 原始期 - 拼接字串( 用 C, C++, Bash 編寫 CGI )
2. 語言期 - 專為 Web 而生的語言 php, 商業(yè)化項目 jsp
3. MVC 框架期 - Java 秀的飛起, 最著名的當(dāng)屬 J2EE, 以及后起之秀 Spring
4. MVC 框架顛峰期 - 當(dāng)屬 Rails, 將動態(tài)語言的優(yōu)勢發(fā)揮到極致, 以及各種語言衍生的一大批類 Rails 框架
5. 前后端分離期 - 目前所處的 "混亂" 時期

我認為, 前后端分離是必然的趨勢, 切看我的分析.

前后端分離的必然原因

Web 剛興起的時候, 它真的只是 "Web", 它只管瀏覽器的渲染, 大家頭疼的只是各家瀏覽器的兼容性問題. 于是乎, jQuery, Bootstrap 等和它們的組件們層出不窮, 來解決這類問題.

隨著 Web3.0 的到來( 我參考 <文明之光> 發(fā)明的詞, 意指移動端 Web 的起步 ), 我們發(fā)現(xiàn), 現(xiàn)在的問題不是瀏覽器的問題了, 而是伴隨著各種各樣的屏幕, 以及各種各樣的嵌入Web. 而且, 最擅長構(gòu)建界面的 Web 技術(shù)還沒有打入 APP 陣營.

我們以前的經(jīng)驗似乎都不夠用了, 但是, 我們發(fā)現(xiàn), 如果不把瀏覽器當(dāng)瀏覽器, 而把它們當(dāng)作數(shù)據(jù)處理層( 這要求瀏覽器擁有很高的計算能力, 以前這不可想像, 而但是, 一個 iPhone5 的手機處理能力超過幾年前的一個 PC ), 服務(wù)器只提供數(shù)據(jù)( 目前最流行的方案即 Restful API ), 如此, 我們就可以解決 Web3.0 下的主要的問題:

1. 屏幕的多樣性( Web 渲染技術(shù)是目前最強大的 UI 渲染技術(shù), 沒有之一, 可以渲染各種屏幕效果無壓力 )
2. 用戶體驗 ( 在移動網(wǎng)絡(luò)還不夠給力的時候, 前端代碼預(yù)先下載簡直完美 )

通過這樣的革新, Web 技術(shù)自然而然滲入到原生 App 的領(lǐng)域. 其優(yōu)勢在于:

1. 開發(fā)效率更高( 我認為等到 Web APP 技術(shù)成熟, 至少十倍于原生 App 開發(fā)效率 )
2. 跨平臺開發(fā)( Web APP 可以做到基本跨平臺使用, 并且隨著技術(shù)推進, 可以做到接近原生性能 )
3. 最重要的一點, 學(xué)一次, 到處用.( 當(dāng)你掌握了前后端分離的開發(fā)技術(shù), 你既可以寫 APP, 又可以做網(wǎng)站, 不僅 iOS, 而且 Android, 甚至于 WinPhone )

既然如此, 是時候影響到原有的 Web 開發(fā)技術(shù)了:

在 Web3.0 的發(fā)展下, 傳統(tǒng)的 MVC 框架, 會轉(zhuǎn)變?yōu)榍昂蠖朔蛛x的開發(fā)方式. 這樣, 你就可以學(xué)一次, 到處用.

AngularJS 領(lǐng)域下的 Learn once, Use Anywhere 新秀: Ionic

AngularJS 是一個類似于 Rails 的全棧式的前端框架, 它擁有自己的路由, 控制器, 作用域, 和組件, 非常適合作為前端的全棧基礎(chǔ)框架. 而 Ionic 正是基于它而完成一個框架:

1. Ionic 目標是開發(fā)原生 APP 而不是 Web APP, 從體驗上如此.
2. Ionic 可以操作大部分原生 API, 因為它基于 Cordova ( 一個可以用 JS 操作原生 API 的基礎(chǔ)項目 )
3. Ionic 是面向未來的框架, 換句話說, 它是為新手機準備的.( 官方僅支持 iOS6+, Android4.1+ )

Ionic 的技術(shù)構(gòu)成為:

1. AngularJS 為基礎(chǔ), 在其上封裝了眾多組件, 如 側(cè)面滑動, Tabs, 刷新, 無限滾動等等你能想到的與原生 APP 類似的組件.
2. 一套 CSS 樣式, 一方面配合上面的組件, 另一方面并提供給你使用.
3. 一套改進的工作流, 基于我之前那篇 Web 工作流里用到的所有的工具.( 默認是 NodeJS, Gulp, Bower )
4. 一套命令行工具, 幫助你快速開發(fā), 測試, 構(gòu)建, 發(fā)布你的 APP.

Ionic 工作流非常簡單:

1. ionic start myapp [template]
2. 像 AngularJS 應(yīng)用一樣寫自己的頁面與控制器( 與原生效果幾乎一致 )
3. ionic platform add ios
4. ionic build ios
5. ionic emulate ios

一些國內(nèi)的例子:

1. CNodeJS
2. WBlogApp
3. Ionic ShowCase

就在最近, Ionic 上線了 LiveReload 功能, 你可以在模擬器與測試機器( 沒錯, 是你的手機 )上, 得到實時的代碼刷新功能.( 此刻, 我想, 真正的 iOS 工程師還在編譯他們的 xcode 吧.)

如果你就是工程師, 馬上去試試吧: http:///getting-started/

在這個領(lǐng)域, Ionic 的野心就跟 Web2.0 時代的集大成者 Rails 一樣大, 都想建立整個開發(fā)流的生態(tài)環(huán)境.

反哺 Web2.0

一旦你的團隊計劃一并開發(fā) APP, Web APP, 以及網(wǎng)站, 那么, 最佳的選擇即是一套前后端分離的技術(shù)棧, 它可能是這樣:

1. AngularJS( 前端框架 )
2. Ionic ( APP 全?？蚣?)
3. Angular UI ( Bootstrap for AngularJS )
4. Rails / ExpressJS / Go( API 后臺 )

現(xiàn)在, 我們可以不再使用傳統(tǒng)的 MVC 框架的 Web 開發(fā)工作流, 而只需要關(guān)心前后端分離后的工作流:

1. API 開發(fā)與測試
2. 前端工作流( 類似于 Yeoman )

你既不需要學(xué)習(xí)傳統(tǒng)的 MVC 中的 復(fù)雜的 form 處理流程, 也不用關(guān)心 session, cache 等在 Web3.0 不存在的問題, 只需要關(guān)注好前后端分離之后的問題即可:

1. SEO ( 已經(jīng)有服務(wù)端渲染的方案解決了: https:///)
2. 用戶體驗 ( 因為前后端分離后網(wǎng)頁也變的更快, 也許模擬的慢一點, 會讓某些人更習(xí)慣點 )
3. 與原生 APP 相比性能的優(yōu)化

最后, 使用 AngularJS 與 Ionic, 運用同一種思想開發(fā) APP 與網(wǎng)站, 這就是:

Learn Once, Use Anywhere.