今週（10/23-26）、米国オースティンで、年に一度の Sencha の大規模なカンファレンスがあり、そのなかで、Sencha Touch の次期メジャーバージョン「Sencha Touch 2」についての紹介がありました。
Twitter ベースの情報なので発表内容はよく分からないのですが、なかなかイケてるようです :p
ベンダーからのアピールは「Sencha Touch 2とはどのようなものか」を参考にして頂くとして、本記事では、実際に少し使ってみた印象をお伝えしてみたいと思います。
※Sencha Touch 2 はまだリリースされていませんが、プレビュー版はこちらからダウンロードすることができます。
コードが綺麗に書けるように
現バージョンの Sencha Touch を使っている人が Sencha Touch 2 を使ってみて最初に感じることは、「コードの書き方が全然違ってる！！」ということかもしれません。
もちろん、コンフィグオプションを指定してコンポーネントを組み立てていくスタイルは相変わらずなのですが、クラスの定義方法から、イベントのハンドリング、ロジック内でのコンポーネントの扱い方など、記述方法が大きく刷新されました。
現バージョンの記述が手になじんでいる方は抵抗があるかも知れませんが、新しいシステムはかなり洗練されていて、新たに学習する価値は十分にあるものだと思います。
仕組みは、ExtJS 4 で導入された新システムから、かなり影響を受けたものになっています。
ここで詳細を解説するのはオーバースペックなので、いくつかをピックアップしてご紹介したいと思います。
クラス定義がすっきり
これまでの Sencha Touch では、ビューに関するクラスの定義は、JavaScript ではおなじみのオブジェクトリテラル + Ext.reg メソッド↓
|
1 2 3 4 5 |
MyApp.FormPanel = Ext.extend(Ext.form.FormPanel, { defaultType : 'textfield', scroll : 'vertical', ... Ext.reg('MyAppList', MyApp.List); |
モデルに関するクラスの定義は、独自の Ext.regModel メソッド↓
|
1 2 3 4 5 6 |
Ext.regModel('MyModel', { proxy : { type : 'localstorage', id : 'myModel' }, ... |
コントローラに関するクラスの定義は、独自の Ext.regController メソッド↓
|
1 2 3 4 5 6 |
Ext.regController('FormPanelController', { genNewModel : function() { return Ext.ModelMgr.create({ id : new Date().format('U') }, MyModel'); ... |
を使って記述していました。
これ以外にも、なんだかおまじないのようなルールがいくつかあって煩わしく感じていたのですが、
Sencha Touch 2 では、
|
1 2 3 4 5 6 7 |
Ext.define(myapp.view.FormPanel', { extend: 'Ext.form.Panel', xtype: 'myapppanel', config: { layout: 'fit', ... |
と、 Ext.define メソッドに一本化されました。
これだけでも、コード全体の見通しが、大分すっきりします。
イベントの取扱いがすっきり
また、現バージョンの Sencha Touch では、各コンポーネント毎に
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ xtype: 'button', action: 'doLogin', scope: this, handler: function(btn) { var form = this.items.items[0]; Ext.dispatch({ controller: btn.controller, action: btn.action, form: form }); } ... |
とイベントハンドラを定義して、コントローラクラスに処理をディスパッチするためだけのコードを書く必要があったのですが、 Sencha Touch 2 では、コントローラクラスに、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
init: function() { this.control({ '#home-button': { tap: this.onHomeButtonTap }, '#task-list': { show: this.onShowList, select: this.onListSelect }, '#task-create-button': { tap: this.onCreateButtonTap }, ... |
と記述するだけで、イベントをキャプチャして、コントローラのメソッドに処理をディスパッチできるようになりました。
イベントを登録したいコンポーネントは、CSSセレクタさながらに、
|
1 2 3 |
'#egg' // id「egg」コンポーネント 'parentPanel > childPanel#spam' // 親パネルの直下の子パネルの id「spam」コンポーネント 'button[action=ham]' // ham というアクション名のボタン |
といった記述で指定できるようになっています。
コンポーネントの取扱いがすっきり
Sencha Touch はコンポーネントをどんどん積み上げていくため、気がつくとコンポーネントのネストが深くなりがちです。これまで、下位階層のコンポーネントを取得するために、
|
1 |
leftDock.items.items[0].items.items[0] .. |
といったコードを記述する必要がありました。冗長というか、危なげな感じです。。
これが、Sencha Touch 2 では、
|
1 |
leftDock.down('formpanel'); |
のように、 位置と名前を指定して、コンポーネントを取得できるようになりました。
兄弟位置のコンポーネントの場合は、
|
1 |
leftDock.up('panel').down('rightdock'); |
といった感じでしょうか。もうちょっとスマートにできそうな気がしますが、ドキュメントやコードを見る限りでは、対応のものは見つかりませんでした。
これら以外にも、 プロパティの getter/setter、コンフィグからメソッドや名前空間を自動生成してくれるなど、できるだけ利用側のコードが簡潔になるような改善が行われています。これらのメリットは、コードの規模が大きくなるにつれて、じわじわ効いてくるように思います。
※逆にいうと、コードが簡潔になる代償として、暗黙の規約が増えた部分はあるかと思います。いくつかのルールを理解するまでは、戸惑うことが多そうです。
でも、忘れてはいけない、一番大きいのは、、
とコードが書きやすくなった部分を強調しましたが、実際のところ、 Sencha Touch 2 の一番の目玉は「パフォーマンス改善」のようです。
確かに、体感的にはっきり違いが分かるほど、描画が速くなっています。※ちゃんと、現バージョンとの比較を計測してなくてすみません。。
また、まだ試せていませんが、コマンドひとつでネイティブアプリにパッケージ化する機能も、Sencha Touch 2 で提供される予定です。これも、目玉ポイントのひとつです。
まとめ
今回刷新された記述方法は今後しばらくは続くと思われるので、これから Sencha Touch を始める方はぜひ Version 2 から始められるのがよいのではないでしょうか。
ただ、現状手に入るものはプレビュー版なので、それなりにバグがあります。筆者も、利用中、エラーが解消されず長時間悩んだあげく、ライブラリのコードがおかしいことに気づき、本家のフォーラムを見て、同様の問題でみんな困っていることを知る、といったことが何度もありました。
また、開発中の機能も結構あります。目立つところでは、URLとコントローラのマッチング機能がまだないです（※Sencha Touch 1 で言うところの Ext.Router）。
これらは、正式版（or次回のプレビュー版？）リリースで解消されるのを期待しています ;)
最後に、、やっぱり困るのは、サンプルコードがあまりないことです。上記のように書き方が大きく変わるため、現バージョンのコードは参考になる程度です。これから始められる方は、お手本となるコードや情報を探すのに当面は苦労することと思います。
せめて少しでもお役に、ということで、簡単な CRUD操作を行うアプリのサンプルコードを GitHub にあげてみました。よければ、ご参考にして頂けると嬉しいです。
SenchaTouch2-simple-CRUD-sample
# Google App Engine for Python 上で動く簡単なサンプルです。[サンプルを見る]
Python、いいですよね！
Python について興味のある方は、11月に弊社のセミナールームで行われる
Python mini Hack-a-thon に参加してみてはいかがでしょう（←無理やり宣伝。。）。
最近のコメント