最近開始給網(wǎng)站的移動版本做技術(shù)選型，發(fā)現(xiàn)了很多好玩的東西，寫出來給大家分享下。

ionicFramework

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

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

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

[[124697]]

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

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

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

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

Ripple Emulator

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

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

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

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