最近開始給網站的移動版本做技術選型，發現了很多好玩的東西，寫出來給大家分享下。

ionicFramework

我是hybrid app的忠實粉絲和大力倡導者，從 新浪移動云開始就不斷的尋找能幫助Web程序員開發出漂亮又好用的UI層框架。在歷經了jqmobile、sencha touch等框架后，一直沒能找到一個真正符合我的想法的框架：它應該為hybrid app設計、組件化結構、UI簡潔而優美。

很多同學不明白為Hybrid app設計跟為Mobile web設計有什么不同，我只說最典型的一點：Hybrid App的資源都在本地的，沒有網絡讀取的消耗，所以最理想的方式是一次性載入多個界面，應用直接在多個界面之間切換，而不是為了節省流量通過ajax按需 載入。后者正是jqm等框架的做法。sencha touch在概念層上我接受不了，它讓我感覺自己不是在寫界面，而是在做算法作業。關于這些老框架的吐槽， 以前寫過，就不再多說。接下來說說最近的新發現。

轉眼快兩年，很多更適合hybrid app的框架開始出現。這次選型我其實先選了  chocolatechip-ui 。

[[124697]]

它和我之前寫過的lazymobile理念很類似，采用div來作為App界面，界面之間的切換其實就是瀏覽器在div上的滑動。界面采用了 ios7的平面設計風格，很討喜。我看到就心動了，讀完基本代碼實現后就找了個小需求來試用。那是一個tab+side menu的app，然后我發現chocolate-chip的組件的封裝程度不夠，多個組件之間重復嵌套時會出現各種互相影響。這顯然違背了正交性原則。 于是我依依不舍的和它分了手。

然后我遇到了 ionicframework。ionic采用 angularjs作 為其基礎，這就在封裝性上有了質的提升。你可以使用類似<weibo>的標簽來描述一條微博。它也同樣采用angualar-ui里邊的 states來切換界面，從而保證了切換過程的平滑。另外就是它還直接整合了Cordova(就是phonegap了)的命令行工具，寫完后直接一個命令 就可以編譯app了。

ionic的學習成本比較高。因為Angularjs是一個真正的MVC框架，它的M和V雙向綁定。我春節花了點時間學了一下，能寫一些簡單應用 了。學習的時候有時候還是思維轉換不過來，比如我曾苦苦思索form表單要怎么提交，提交到哪里去。但實際上form表單的控件本來就是綁定到數據對象 的，只要調用數據對象的save方法就好了。

但整體來講我還是很推薦這個框架的，而且我也認為AngularJS的做法代表了未來，學習一些新東西有時候會讓人生更多樂趣。

Ripple Emulator

在編寫代碼的時候，我一般用node的http-server直接在代碼目錄起一個web服務，用瀏覽器調試。但是代碼里邊那些phonegap 的擴展功能往往會導致頁面報錯。之前為了解決這個問題，我們做了云窗調試器，但現在因為某些原因，基本不更新了。另外云窗調試器需要將代碼傳到SAE上后 才能調試，也沒有本地來得便捷。

這里要推薦給大家的是一個Chrome擴展， Ripple Emulator。

用了這個擴展，你就可以直接在Chrome上調試Colrdova的功能了。能選擇模擬器來測試屏幕大小，還能選擇模擬器的Cordova版本。五星推薦，用了你會回來點贊的。

還有一些Angular相關的工具我也在用，這次就先不整理了。以后有空再慢慢整理吧，請關注我的微博獲取***的消息。