Sencha Touch 和 jQuery Mobile 的比較

oschina發表於2013-08-05
jQuery

　　很多人問我Sencha Touch (百度百科Sencha Touch譯者加) 和jQuery Mobile哪個更好。事實上，它兩的區別就像是Web後臺程式設計，PHP和Java。它們都能完成同樣的功能，但其實它們是為不同的目的而創造的。

　　Sencha Touch基於web-kit瀏覽器並做了優化，而jQuery Mobile適用於一般瀏覽器。因為Sencha Touch做了優化，很多人覺得它比jQuery Mobile更棒。混合移動應用(類似用用Webview程式設計，譯者注)會讓Sencha Touch熠熠生輝，它會讓移動應用非常流暢就像是用原生API開發的一樣。但jQuery Mobile也會在不同的地方發光發彩的。與Sencha Touch只支援web-kit不同，jQuery Mobile在支援HTML5的瀏覽器工作的也是相當的漂亮。無論你是使用Windows，MAC OS，Android或是iOS系統，jQuery Mobile都能吸引你的眼球。

　Sencha Touch vs jQuery Mobile

　　下面我將以我個人經驗來談談它們的不同，這也許不會很客觀。就個人而言我不會偏袒任何一方，下面的章節經按組進行比較，每組都有勝者。

　　第一組-行銷和平臺支援

　　Sencha Touch和jQuery Mobile都以HTML5框架著稱。jQuery Mobile謙虛的說自己只是內建於所有流行的移動裝置平臺，而Sencha Touch則說自己是唯一能讓為開發者在iOS，Android，BlachBerry，Windows Phone等更多的OS上開發漂亮應用的框架。老實說，這種誇大其詞的廣告讓我失望。我還沒有發現它說的那樣好，Sencha Touch只能孤芳自賞了。

  • 只支援web kit核心瀏覽器(據說這會在未來有所變化)
  • 大家知道的，有很多移動應用框架比Sencha Touch好

　　jQuery Mobile

  • 很多框架都不會為某一特定的平臺做優化的，包括jQuery Mobile(據說1.4版本會做一些優化)

　　結論：jQuery Mobile勝

　　第二組-UI和視覺映像

　　正如您所見，Sencha Touch和jQuery Mobile在UI視覺是有些區別的。一個是完全的javascript驅動，而另一個是用HTML驅動的。這兩種方式都可以展示漂亮的UI，但是Sencha 的UI更像是用原生API開發的一樣(在混合應用程式中)。很不幸，它兩在複雜UI程式中表現的就很糟糕了，尤其是jQuery Mobile.

　　Sencha Touch

  • 在移動裝置上，Sencha會比jQuery更加的流暢
  • Sencha遵循MVC哲學，它不會讓你寫任何HTML程式碼，一切基於javascript
  • Sencha 提供更多的UI元素和元件，比如說旋轉
  • Sencha支援SVG(可縮放向量圖形，譯者注)，對於遊戲來說是個好事
  • Sencha Touch IDE是付費的，雖然這個和UI沒有關係。

　　jQuery Mobile

  • 於Sencha不同，jQuery Mobile UI更像是web UI
  • 要想展現jQuery Mobile UI只要在HTML中加入jQuery Mobile CSS即可，就像是jQuery UI框架的使用一樣
  • 使用Ajax會讓有些開發者在頁面特效處理方面感到困惑
  • 使用CSS會讓一些UI看起來很相似，要讓UI表現的不一樣得額外花費時間來處理。比如說SongMeanings.com網站中的mobile內容。
  • 與Sencha Touch不同，jQuery Mobile得讓你好好關心頁面的構成，有時這是很麻煩的。所有都綁在了一起，這，時好時壞說不定。1.4版本也許會有所改善。

　　結論：Sencha Touch 勝

　　第三組-可用性，使用的難易

　　這是個完全不同的比較。jQuery Mobile是標記語言驅動，它是依賴於jQuery並很容易控制的。如果你喜歡MVC模式，那你就得選擇Sencha Touch。當然這會帶來付費的問題，至少這會讓不喜歡用javascript的人不順心的。最後，我們這組比較就是比較使用的難易的。

　　Sencha Touch

  • 全都是javascript，新手會有些迷惑
  • 很難debug
  • 不容易上手

　　jQuery Mobile

  • 如果你和大多人一樣喜歡jQuery，你也會喜歡jQuery Mobile的
  • 語法簡單
  • 可以用Backbone.js或Knockout.js來彌補MVC設計方面的缺陷
  • 支援很多不同的主題，而且一切都可以用CSS來操作
  • 任何IDE都可以開發

　　結論：jQuery Mobile勝

　　第四組-文件

　　再好的產品也會因此而被人們遺忘。它們兩的文件都不錯。Sencha Touch官方文件相當不錯，jQuery Mobile文件的封面都是很漂亮的。但是，Sencha Touch的文件比jQuery Mobile的更好。

　　Sencha  Touch

  • 比jQuery Moblie文件更好，而且不會讓人困惑。
  • 內容不多
  • 官方支援可不免費，也不會涉及IDE

　　jQuery Mobile

  • 沒達到Sencha Touch官方文件的水準
  • 有部落格，文章，論壇，Stackoverflow...等方式的支援
  • 封面很漂亮

　　結論：Sencha Touch 勝

　　第五組-工具，外掛，第三方支援

　　這個話題也是很重要的,好的開發工具和外掛會讓開發者更容易上手。

　　Sencha Touch

  • 支援自家本地應用程式
  • 支援主題包
  • IDE要付費

　　jQuery Mobile

  • Phonegap是支援本地應用的開發包，用jQuery Mobile開發Phonegap會讓人感到有些怪
  • 支援主題包，但支援的不全面，因為一些核心的CSS元素不容易更改，比如說已經被啟用的元素
  • 支援大量第三方外掛，與jQuery外掛相容
  • 比Sencha Touch更容易擴充套件

　　結論：平局，jQuery Mobile略勝一籌

　　最終比較

　　jQuery Mobile

　　優點

  • 易開發
  • 不錯的第三方支援，外掛就是知識，知識就是力量
  • 易除錯
  • Stackoverflow

　　缺點

  • 比Sencha Touch慢
  • APP幾乎是同樣的UI，如果你是個能忍的UI設計師，那你就可以接受這種呆滯的UI
  • 官方文件缺少一些東西，因為其在UI方面介紹的太多而欠缺在架構方面的介紹

　　使用場合

  • 移動網站
  • 簡單的混合應用程式

　　程式碼例子

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>
 
            <div data-role="content">
 
            </div>
        </div>    
    </body>
</html>

　　Sencha Touch

　　優點

  • 執行非非常流暢，有中像是原生API開發的一樣
  • 有MVC結構
  • 文件很完美

　　缺點

  • 對於缺乏經驗的開發者來說過於複雜
  • 第三方支援太少
  • 由於只支援webkit，所以除過混合應用程式外，對於一般程式來說作用不大
  • IDE和支援都得付費

　　使用場合

  • 建議在複雜的混合應用程式，特別是要求看起來像是原生API開放的程式中使用

　　程式碼例子

new Ext.Application({
    name: 'MyApp',
 
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
 
            id    : 'mainPanel',
            layout: 'card',
            items : [
                {
                    html: 'Welcome to My App!'
                }
            ]
        });
    }
});

　　它們兩都是成熟的框架。jQuery Mobile 容易使用而且在大部分場合都能工作良好，但是如果你想優化優化混合移動應用程式，那你就選擇Sencha Touch吧。

　　其它值得看看的HTML5移動應用框架:

　　英文原文：http://www.gajotres.net/sencha-touch-vs-jquery-mobile/

相關文章