Sencha Touch と ExtJS

Sencha Advent Calendar 2013 7日目です。

最近、私が Sencha に詳しいと言うことで、とある仕事で Sencha を使うことになりました。しかし、Sencha でも ExtJS の方。私が得意なのは Touch なんだけど。。。最近の ExtJS は全く知らない(汗

とはいえ、ExtJS4 になって Ext.define とか MVC とか Sencha cmd とか似たような感じっぽい。というよりむしろ Touch の元になったものなので、何とかなるだろうと始めてみました。最初は使うコンポーネントが違うくらいだろうと思ったのですが、使い出していると意外と細かいところで違うものなんだなぁ、と気がつきました。

というわけで、今日のテーマは「ここが違うよ!ExtJS と Sencha Touch
Sencha Touch と ExtJS の両方をある程度知っている人にしか分からない、細かすぎて伝わらないネタです。

configが違う

Sencha Touchでは、Ext.define で渡すコンフィグオブジェクトに、config という名前のプロパティオブジェクトを付けると、それは特殊なconfigプロパティとして認識されます。例えば、config オブジェクトに name というプロパティをセットすると、自動的に updateName や applyName というメソッドが追加されます。それらをオーバーライドすることで、各プロパティをセットしたときのフックが定義できます。

ExtJSでも config は使えるのですが、各種コンポーネントがこの作りに対応していません。Touchのコンポーネントは基本的にこのconfigを使って作られているため、プロパティのフックが簡単に行えるのですが、ExtJSではできません。そのうち対応してくれると嬉しいなぁ。

コントローラーが違う

ExtJSも4からMVCアーキテクチャが導入され、Controllerクラスが使えます。ただし、これも Touch のController と少し違います。
ExtJSのControllerの定義は次のような感じ。

 Ext.define('MyApp.controller.Users', {
     extend: 'Ext.app.Controller',

     refs: [{
         ref: 'list',
         selector: 'grid'
     }],

     init: function() {
         this.control({
             'button': {
                 click: this.refreshGrid
             }
         });
     },

     refreshGrid: function() {
         this.getList().store.load();
     }
 });

対して、Touchのコントローラーはこんな感じ。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        },

        refs: {
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        //called whenever the Login button is tapped
    },

    doLogout: function() {
        //called whenever any Button with action=logout is tapped
    }
});


refs で コンポーネントをComponentQuery で指定するのはほとんど同じです。しかし、control定義が全然違う。少し驚きですね。また、ExtJS の control定義では、refs で定義した名前が使えない!!これにはやられました。Touchから入った人ははまるポイントではないでしょうか。(ってそんな人いるのか・・?)

bootloaderが違う

Sencha Cmdで、sencha generate app でアプリケーションを作るときに、sdkパスを Touch か ExtJSを切り替えるだけで、どっちのアプリケーションでも簡単に作れます。index.html も作ってくれるのですが、これが読み込む JS がまた違う。

Touch のほうは、microloader というのを読み込んで、それがアプリケーションを読み込んでくれます。この microloader を development か production を切り替えるだけで開発と本番を切り替えられます。次のような index.htmlが作られます。

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <style type="text/css">/* 略 */</style>
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

ExtJSは全然違います。次は ExtJS の index.html です。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <link rel="stylesheet" href="bootstrap.css">
            <script src="ext/ext-dev.js"></script>
            <script src="bootstrap.js"></script>
        <!-- </x-bootstrap> -->
        <script src="app.js"></script>
    <!-- </x-compile> -->
</head>
<body></body>
</html>

bootstrap という 似たような物があるのですが、microloaderとはまた別の物。これが結構くせ者で、ビルドする度にパスが変わったりで慣れるまで苦労しました。実は ExtJS のテンプレートの方にも .sencha/app/microloader/ があります。これが使えるのか検証してないですが、使えるようになってくれると嬉しい。

まとめ

総じて、やはりTouchのほうが新しいため、アーキテクチャも洗練されているように感じます。もちろん ExtJS には便利で強力なコンポーネントが山ほどあるのが魅力ですが、既存のコンポーネントを新しくするのは影響も大きく大変なのでしょう。近い将来、どちらも同じように使えるようになることを期待しています。

以上、Sencha Touch から見た ExtJS の違いでした。

モバイルWebアプリのこれまでとこれから。

バタバタしていて遅れましたが、先日とあるセミナーでお話しさせて頂きました。

すみません、最初にお詫びします。「Sencha Touch VS jQuery Mobile」というタイトルですが、その内容は一部しか出てきません(--;
別件で調査していた内容を盛り込むでいくと、どんどんそっちが膨らみ、「モバイルWebアプリのこれまでとこれから」という壮大な内容になってしまいました。副題がメインを喰ってしまった!しかも、無駄に枚数膨らんで全部で186p!w

(主題の方を知りたい方は以前作ったスライドのほうをどうぞ)

スライドに盛り込めなかったフレームワークはまだまだ沢山あって、いつかまとめて書いてみたいです。

また、最後の BassS と Webサービスのリベンジ というところ、全く私の勝手な妄想ですが皆さんはどうお考えでしょうか??まだ全然詰め切れてないですが、もう少し考えてみるべき面白そうな議題と思っています。ぜひコメントなど頂けると嬉しいです!

Sencha Touchパーフェクトガイド が出版されました!

年末年始に書いていた本「HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド 」が遂に出版されました!

共著で私は主に7章、8章あたりを担当させていただきました。メイン担当はありますが、もちろん他の部分もレビューし、全体的に参加しています。

Sencha Touch 2についての本は意外と少なく(日本語書籍では2冊目)、これだけのボリュームのある書籍は世界でも希です。(現時点では)まさにパーフェクトといえる内容だと自負しています。

特に3部の実践では、実務で役に立つ内容がてんこ盛り!実際に使った人が悩むポイントやはまり所などが詳しく解説されています。私も非常に勉強になりました^^;

しかし、まだまだ書き足りないと思うところがあるのも事実。。特に Ext のユーティリティメソッドに関してはほとんど触れられなかったのが少し残念です。(そのあたりは後述の Sencha Touch 2 Up and Running が詳しい。) また、テストやデバッグについてもあればよかったかも、とも思います。

とはいえ、最初の基本から応用、そして実践までの解説に関しては、今のところ本書が世界で最も詳しく書かれていると思います!

どのくらいボリューミーなのか、ということを他の書籍と客観的に評価してみましょう。

Sencha Touch 関連で出ている書籍で有名なのは大体以下の3つです。

id:nowokay こと、きしださんの日本で最初の Sencha Touch 2 の書籍!すごい表紙が一部で話題に!!

Sencha Forum のふざけたアイコン(w でもおなじみの Mitchell Simoens も書いている Sencha Touch 2のバイブル的存在。2への対応中で、3月末に正式出版されるらしい。現在プレビュー版を購入できる。(英語)

最近出た オライリーの Sencha Touch 2本。幅広く全体を薄く網羅している感じ。なぜかユーティリティメソッドの説明が充実 (英語)


これらの名著たちと、本書のボリュームをページ数と、容積から比較してみます。

タイトル ページ数 サイズ(cm) 容積(㎠)
Sencha Touch パーフェクトガイド 432 23.4 x 18.2 x 2.8 1192.464
Sencha Touchではじめるモバイルアプリ開発 255 20.8 x 14.8 x 2 615.68
Sencha Touch In Action 375 未定 未定
Sencha Touch 2 Up and Running 230 23.3 x 17.8 x 1.5 622.11

圧倒的ボリューム!!ページ数では2位の15%、3位の約70%増しで、容積にいたっては次点のなんと 90%増でおよそ約2倍! ページ数が膨らんだなぁ充実したなぁ、と思っていましたがここまで多かったとは。

ということで、この充実っぷり、是非一度お手にとってご確認いただければ幸いです。

充実の目次!

  • 第1部 Sencha Touch の概要
    • 第1章 イントロダクション
      • 1.1 ネイティブアプリケーションの終焉
      • 1.2 はじめよう、Sencha Touch
      • 1.3 本書の構成
      • 1.4 ソースコードのダウンロード
    • 第2章 開発準備
      • 2.1 開発準備
      • 2.2 Sencha Cmd
      • 2.3 Hello, World アプリケーション
    • 第3章 はじめての Sencha Touch
      • 3.1 モデル
      • 3.2 ビュー
      • 3.3 コントローラ
  • 第2部 Sencha Touch の基本構成
    • 第4章 クラスシステム
      • 4.1 クラス定義
      • 4.2 コンストラクタ
      • 4.3 コンフィグ
      • 4.4 インスタンス
      • 4.5 継承
      • 4.6 オーバーライド
      • 4.7 ミックスイン
      • 4.8 シングルトン
      • 4.9 静的メンバ
      • 4.10 別名
      • 4.11 依存性管理
      • 4.12 めとめ
    • 第5章 コンポーネント
    • 第6章 イベントシステム
      • 6.1 イベントシステム概要
      • 6.2 イベントリスナ
      • 6.3 リスナオプション
      • 6.4 独自イベント
      • 6.5 タッチイベント
      • 6.6 まとめ
    • 第7章 データパッケージ
      • 7.1 データパッケージ概要
      • 7.2 モデル
      • 7.3 ストア
      • 7.4 プロキシ
      • 7.5 まとめ
    • 第8章 リストとテンプレート
      • 8.1 リスト
      • 8.2 テンプレート
      • 8.3 まとめ
    • 第9章 アプリケーション
      • 9.1 アプリケーション
      • 9.2 コントローラ
      • 9.3 ルーティング
      • 9.4 プロファイル
      • 9.5 まとめ
    • 第10章 Sencha Touch デザイン概論
      • 10.1 環境の構築
      • 10.2 Sass の基本文法
      • 10.3 Compass について
      • 10.4 Sencha Touch でのデザイン変更について
      • 10.5 まとめ
    • 第11章 ネイティブパッケージング
      • 11.1 パッケージング
      • 11.2 ネイティブパッケージングの流れ
      • 11.3 iOS アプリケーションの作成について
      • 11.4 Android アプリケーションの作成
      • 11.5 ネイティブ API
      • 11.6 まとめ
  • 第3部 実践 Sencha Touch アプリケーション開発
    • 第12章 プロジェクト開始
      • 12.1 開発するアプリケーション
    • 第13章 CRUD
      • 13.1 表示(Read)
      • 13.2 作成(Create)
      • 13.3 更新(Update)
      • 13.4 削除(Delete)
      • 13.5 ルーティングとヒストリー
      • 13.6 URL の変更
    • 第14章 カスタムコンポーネント
    • 第15章 Sencha Touch Charts
      • 15.1 Sencah Touch Charts 概要
      • 15.2 図形描画の基礎
      • 15.3 グラフの基礎
      • 15.4 家計簿アプリケーションへの組み込み
    • 第16章 アプリケーションの仕上げ
      • 16.1 タブレット用画面の実装
      • 16.2 アプリケーションのリリース
      • 16.3 まとめ
  • 著者紹介

長い。さすが400ページ超えだけあって、目次も長い。

そして、奇しくも今日は自分の誕生日。
書いた本がそんな日に出版されるなんて、最高の誕生日プレゼントになりました。
ありがとうございます!

ネイティブよりも速いと評判のfastbookの裏側を調べてみる

本記事は、Sencha Advent Calendar 2012 の23日目の記事です。1日遅れでごめんなさい!あ、今日であってた(;´▽`A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前!おめでとうございます!

Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。


f:id:dsuke:20121223112253p:plain

ネイティブを凌ぐすごいパフォーマンスに驚きますよね!これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。

ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbook にあるようなのですが、メンテナンス中と出てアクセスできません。。ソースみたかった。。。2012.12.26追記: 今見るとアクセスできますね。けど、本当にWebViewでラップしただけで中身はWebから表示してるだけでした。つまりJSのソースは無い) 仕方ないので公開されているものを解析しつつ推測してみます。

基本的に3つのスクリプトファイルからできているようです

  • index.js: 他のスクリプトやCSSを読み込むローダー
  • app.js: アプリケーション本体
  • sdk.js: Sencha Touch SDK(3.0alpha!)

app.js にアプリのロジックが圧縮されて入っています。圧縮と言ってもそれほど複雑な物ではないので、Webインスペクターで Pretty print すれば、まあなんとか読めます。気になるのは、sdkですね。Ext.versionを見てみると、versionが "3.0alpha" とあります!まだ一般公開されていない、次期 Sencha Touch で作られてるんですね!

とりあえず app.js を記事で触れられている改善点を中心に見てみました。

パフォーマンス改善のポイントはいくつかありますが、特に無限Listコンポーネントが重要のようです。これは最近、Sencha Touch 2.1で改良された無限ListコンポーネントWhat’s Coming in Sencha Touch 2.1)のことかと思ったら、実はそうでもないようです。

Sencha Touch 2.1.0 の SDK に含まれる examples に、touchtweets というTwitterアプリのサンプルがあります。これは新しい無限リストに対応しているそうです。(オンライン上のデモはまだ2.0.1のようだ)

fastbookではiframeを使ってDOMツリーを分割したとあります(実際はobjectタグだった。iframeではなくobjectなのはなぜだろう?)。しかし、先のサンプルのリストはiframeではありませんでした。fastbookで使われているのは「Sandboxコンテナー」というまったく新しい機能のようです。残念ながらまだSDKには入っていません。 Sencha Market なんかで出してくれないかなー、と期待してます。

次の、TaskQueueは、Ext.TaskQueueのことですね。これはSencha Touch 2.1から新しく追加された機能です。複数のDOM要素の操作をバッチ処理のようにまとめることで、DOMのリフローとリペイントを最小化するようです。リフローについては ブラウザ動作の理解-リフローとリペイント及びその最適化 に詳しくあります。ただ、まだこのクラスはAPIドキュメント上はprivateとなっていて、フレームワーク内部での利用しか推奨されていません。

次に AnimationQueue を追加したとあります。これもfastbookのための新規クラスです。これは内部に taskQueue と idleQueue の二つのキューを持ち、taskQueueがある間はそれを実行し、taskQueueが無くなったら idleQueue を実行する、という仕組みでアニメーションやロードの処理を分割しているようです。特にアニメーションに特化した機能では無く、汎用的な仕組みなため、これも早く標準APIへ組み込んで欲しいですね。

Web Workerは、Ext.Xhrという新しいクラスに組み込まれています。また、これ用に xhr-worker.js が読み込まれています。このスクリプトでWorkerとのmessageやりとりをしているようです。Web WorkerではAjaxでのリソース取得、デコードを行っています。元々Ajaxで非同期通信ではあるのですが、WebWorkerを使うことでUIスレッドから切り離し、よりスクロールの滑らかさなどを維持するようです。特に現在のマルチコアプロセッサを持つスマートフォンなどでは有効だそうです。

総じて、やはりfastbookはかなりチューニングされています。通常Sencha Touchで使われるMVCアーキテクチャでのアプリケーションのロード方法とも少し違います。カリカリにチューニングされているからこそ、この性能が出るんですね。

単純にSencha Touchを使ったからといって、皆が皆ここまでのアプリケーションを作れるわけではありません。それはネイティブにとっても言えることでしょう。ネイティブだからパフォーマンスが良い、HTML5(Sencha Touch)だから優れている、というのはナンセンスです。大筋の傾向はありますが、個別事例ではそれが全てではありません。結局は作り手の技術と情熱次第。

そういう意味で、fastbookはSenchaが優れているということではなく、まさしく作り手次第でHTML5でもここまで出来るんだ、ということを証明してくれたのだと思います。

Sencha Touch 2.1の変更点まとめ

本記事は、Sencha Advent Calendar 2012 の3日目の記事です。Sencha Advent Calendar ですが、今のところ参加者がとても少ないです。。どんなネタでも大歓迎ですので、ご参加お待ちしています!

先月、11月6日に Sencha Touch 2.1 がリリースされました。ざっくりと以下のような点が追加・改善されたようです。

  • パフォーマンスの改善
    • ネストしたレイアウトでのパフォーマンス改善
    • paintedイベントへの変更
    • TaskQueueメカニズムの追加
  • Chart の機能改善
    • Drawパッケージの改善
      • 拡張可能なスプライト
      • 修飾子と属性の定義
      • フライウェイト・インスタンス化・スプライト
      • Retinaディスプレイサポート
    • Chartパッケージに新しいチャートを追加
      • 集合チャート
      • 金融チャート
  • コンポーネントの強化
    • 無限スクロール付きリスト
  • 新しいSencha Cmd
    • 強化されたネイティブサポート

詳しくは以下をみてください。

ところが、2.1で新しくなったのはこれだけではありません。というか、全然もっとある!!ということで Release Notesから、個人的に興味あるものをピックアップして紹介したいと思います。

チャート系

  • Implemented SVG support for Draw
  • SVG is now forced on Android 4.1 devices due to Canvas issues
  • Added webkitBackingStorePixelRatio support

チャート系のアップデートに伴い、draw系パッケージも各種強化されました。詳細は割愛。詳しくはRelease Notesみて下さい。Android 4.1 ではCanvasの問題から強制的にSVGになるようです。

dataパッケージ系

  • [TOUCH-2792] Implemented filters, sorters and paging into WebStorage proxy
  • [TOUCH-2844] Optimized clear method on WebStorage Proxy

WebStorageでもフィルタ、ストア、クリアができるようになった!

  • [TOUCH-2800] Implemented new WebSQL proxy
  • [TOUCH-3551] Added filtering and sorting capabilities to the SQL proxy

ようやくWebSQLプロキシが実装されました!!フィルタとソートも追加。

Sencha Command 関連

  • in-app purchases API for iOS
  • Contacts APIs for iOS and Android
  • Push notifications for iOS
  • openURL support

アプリ内課金、連絡先API、プッシュ通知などにも対応!

パフォーマンス

  • SizeMonitor refactored for improved performance
  • Improved Android 4 Scroll Indicator performance
  • Update Button SASS so it looks better on device
  • Change ListItems to not use vertical docking for headers. This improves performance since there is less DOM and less box layouts

スクロールや回転、リストのパフォーマンスアップ。ボタンデザインの修正。

  • [TOUCH-3497] Added support for iPhone 5 resolution startup screen

解像度が変わりましたからねー。

その他

  • [TOUCH-2888] Changed the default zIndex in message box to a larger number to stop accidental zIndex issues when creating other floating panels/components
    • 1.xの頃からあるバグで昔私も報告したなー。ようやく直ったようで。
  • [TOUCH-3042] Allow hideOnMaskTap to be changed dynamically
    • これは地味に欲しい機能。
  • [TOUCH-3031] Allow JS files to be specified as remote
    • JSの部分遅延ロードができるのかな?
  • Ext.browser, Ext.feature, Ext.os が追加
    • 機能判別やブラウザ、OS判定が便利になった!
  • POST calls will now honor the disableCache option
    • 例の iOS6 のPOSTキャッシュのバグ回避?
  • Added proper support for IE10 animateStartTime
    • IE10サポートも進んでいるようです。

総括

Release notesからざっくりと拾い出してみました。実はまだドキュメントに載っていない新機能が色々とありました。ソースを見ると入っているのですが、ドキュメント化が間に合ってないみたい。2.1 になって、細かい使い勝手などが結構改善されています。2.0 → 2.1 への乗り換えはそんなにコスト掛からないと思うので、是非検討されるとよいんじゃないでしょうか?

あと、たまにRelase notesを見ると思わぬ情報があったりしておもしろいですねー。ちゃんとドキュメント読みましょう、ということですね。

さて、Sencha Advent Calendar 明日は、また @kawanoshinobu さんです!その次が未定なので、ぜひ誰かJOINしてください!(切実