Deft JS を Ext JS 5 対応にアップグレードする
こんにちは、ゼノフィnakamuraです。
はじめに
Deft JSは、コミュニティドリブンの便利なビルディングブロックのライブラリで、Sencha Ext JSを使った大規模なアプリケーションを素早く開発できるようになります。 Deft JSの主な目的はモジュール化、再利用性、テスト性を押し進めることです。Deft JS は、フレームワークではなく、ライブラリです：これは微妙な違いです。エクステンションライブラリとして、単体で利用できる機能を提供しますが、その機能を組み合わせると、より強力になります。
Deft JS は様々なプラットフォームからアイディアを集めてきます。 フロントエンドアーキテクチャの最高なアイディアを交配させ、おなじみのシンタクス規約に従っていて、Sencha のフレームワークの自然なエクステンションと感じられる、APIを通して公開されます。Deft JS は Sencha フレームワークと張り合うつもりははなく、互いに補完するソリューションです。お互いにプラスになるソリューションを表す目的です。
2012 年からオープンソースのプロジェクトとして、Deft JS は開発者コミュニティからのフィードバックを統合し、Ext JS フレームワークを補完的するソリューションを提供しています。 Sencha 開発者コミュニティは、大規模なアプリケーション作成の経験を基にし、Deft JS に協力してコントリビュートしました。
Ext JS 5 がこのフィードバックループがうまくいっていることを証明しました。Sencha は、このリリースで元々 Deft JS や GluJS などのサードパーティ ライブラリがサポートしていたニーズに応えるために、様々な基本的な改善を行いました。
Deft JS チームは、Ext JS 5 の可能性についてワクワクしています。さて、まずは Deft JS が提供している機能をいくつか紹介します。そこから、我々のライブラリを Ext JS 5 に移行する時の体験と次のDeft JS のバージョン、 Deft JS 5 で何が期待できるか説明します。
Deft JS の中心となる機能
Ext JS 4.x と Sencha Touch 2.x 用の Deft JS が現在提供しているキーとなる機能は次のものがあります。
IoC (制御の反転) コンテナー
IoC と IoC コンテナは、Spring のようなフレームワークを通して、Java、.NET、ActionScript などでよく利用されています。 IoC の力は、コントロールのフローを「反転」することです。 あるオブジェクトが別のオブジェクトを使用する必要がある特、生成したり別な場所から取得するかわりに、IoC コンテナが自動的に必要なオブジェクトを提供します。 これにより、どのオブジェクトを提供する判断は外部的に行われるため、柔軟性とテスト性を高めることができます。
Deft JS は疎結合されている再利用可能なコンポーネントからアプリケーションの動的な組み合わせをコーディネートし、構成可能な IoC コンテナを通してオブジェクト相互依存性を満たします。
Deft JS IoC コンテナは次のことを提供します
- クラスのアノテーションによる依存性の注入を提供します
- ユーザー定義の識別子で依存性をマッピングします
- クラスインスタンスまたはファクトリ関数、値によって依存性を解決します
- クラスインスタンスとファクトリ関数の依存性のシングルトンとプロトタイプ解決法をサポートしています
- 依存性の意欲的インスタンス化 (Eager Instantiation) と遅延インスタンス化 (Lazy Instantiation) を提供します
- クラスのコンストラクタが実行される前に、依存性を Ext JS のクラスコンフィグやプロパティに注入します
MVC と View Controller
View Controller は、多くのModel View Controller (MVC) アーキテクチャパターンの実装でよく使われています。
この軽量のコントローラーは、指定されたビューとその子コンポーネントの状態を管理します。ジェスチャーに反応し、ビューとその子コンポーネントが発信するイベントをリッスンして、注入されたビジネスオブジェクトやサービスに作業をデリゲートします。
Deft JS は、Ext JS 4 と Sencha Touch 2 のアプリケーションに View Controller を導入しました。
Deft JS の View Controllers 次のことを提供します。
- あるビューとその View Controller の間にクラスアノテーションによる関連づけを提供します
- コントローラーの役割を明確にします。つまり、ビューを管理し、注入されたビジネスサービス（サービスクラス、ストアなど）に作業をデリゲートします
- あるビューの複数の独立したインスタンスをサポートし、各インスタンスには独自の View Controller インスタンスが提供されます
- 関連するビューとともに、自動的に View Controller の生成や廃棄を行い、使用メモリーを減少します
- ビューコンポーネントを参照するための詳細な設定をサポートし、View Controller メソッドでイベントリスナーを登録します
- View controller が削除と廃棄を中止できるように、ビュー廃棄のライフサイクルを統合します
- ビューやビューコンポーネントの参照やイベントリスナーを自動的に削除し、クリーンアップをもっとシンプルにします
Promises と Deferreds
Deft JS には JavaScript のユーザーコミュニティでは段々標準となってきている Promises の完全な実装が含まれています。
Deft JS の Promises な次のことを提供します。
- 非同期操作から発生する「将来の値(future value)」をエレガントに表現する方法を提供します
- 成功(success)、失敗(failure)、中止(cancellation)、進行中(progress) のコールバックを登録するための、一貫性があり読み易いAPIを提供します
- future value の変換や処理のチェーンを可能にします
- future value のセットの処理をシンプルにする all(), any(), map(), reduce() などのユーティリティ関数
- CommonJS Promises/A と Promises/A+ の仕様を、完全にサポートします
Deft JS 5 への道
Ext JS 5 の公開で、我々のチームはこの新しいバージョンは Deft JS に関して、どのような影響があるか検討しました。 我々は、開発者がDeft JSだけ使うようにするつもりは、今まで一切ありませんでした。 もし、以前に提供していた機能が Sencha のフレームワークの一部となって提供されて必要なくなっても、皆さんの利益になるので、問題ではありません。 我々が外部から提供するソリューションよりも、Sencha はより深く、内部で問題を解決する事ができます。
例えば、Sencha は独自の View Controller の実装をExt JS 5 に追加しました。 これが導入された理由は、以前のフレームワークのバージョンに役立った Deft JS の機能のお陰ともいえます。 Sencha の実装は、View Model で双方向データバインディングの対応を追加するために、標準の Ext JS コンポーネントに大きく変更された部分もあります。
Sencha のフレームワークが進化する中、Deft JSも進化します。また、新しい Sencha フレームワークの公開によって、不要になった機能は Deft JS から取り外します。そのため、皆で進化していく度に、さらに新しい機能やチャンスを目指していきます。
“ Ext JS 5 がこのフィードバックループがうまくいっていることを証明しました。Sencha は、このリリースで元々 Deft JS や GluJS などのサードパーティ ライブラリがサポートしていたニーズに応えるために、様々な基本的な改善を行いました。”
Deft JS をExt JS 5 で動作するようにアップグレードするのは割と簡単でした。 もちろん、我々の Sencha Cmd のバージョンを 5.0 ベータにアップグレードする必要はありました。 しかし、Deft JS は、実のところ MVC のエクステンションなので、Sencha のクラスは余り拡張していないため、Ext JS 5 の改善はほとんど Deft JS に直接影響しませんでした。 IoC コンテナと Promise API はわずかな変更で移行できました。
Ext JS 5 は、Ext JS と今後のSencha Touch のリリースで共有できる、共通クラスのコアパッケージを導入しました。 コアパッケージには、クラスシステム、DOM、イベント管理、データなどがあります。 以前のリリースでは、二つのフレームワーク間のクラスシステムは似てはいましたが、Deft JS に抽象化レイヤーが必要となるほど違いもありました。 共通のコアのお陰で、Sencha フレームワーク間でコードを再利用するのはより簡単になり、我々も Deft JS から抽象化レイヤーを取り除くこともできました。
Deft JS 5 は新しい Ext.Mixin ベースクラスを利用し、クラスライフサイクルをフックし IoC コンテナなどの機能を実装するようにしています。 以前は、クラスのプリプロセッサーのフックが利用されましたが、最近追加された Sencha Cmd フルクラスシステムオプティマイザー（build.optimize プロパティ経由で構成され、製品版ビルドではデフォルトで有効となりました）とは互換性がないので、非推奨となりました。 Ext.Mixin は、ミックスインクラスからクラスライフサイクルにフックするために強力でサポートされる方法を提供しています。
しかし、我々のビューコントローラーの実装については少し考えました。Sencha はExt JS 5 でビューコントローラーを採用したため、Deft JSの既存の実装はどうするか検討する必要がありました。
最終的に、Deft.mvc.ViewController を残すことにしましたが、今回のものは Sencha の Ext.app.ViewController を拡張します。このため、Sencha が追加したものを活用できますし、その上に Deft JS から追加の機能性を含むことができました。
- View Controller に Observe と Injectable ミックスインが自動的に適用されます。
- destroy() メソッドをオーバーライドし、View Controller がビューの廃棄を中止することが可能です。例えば、「まだ完了していない変更があります。本当にこのタブを閉じますか？」などのメッセージをだしたいときなどに、とても役に立ちます。
- さらに、拡張されたルーティングのサポート、”Companion” View Controller（横断的な動作をアタッチするため）、Promise を返すサービスメソッドを操作するためのユーティリティメソッドなどの機能を追加するかもしれません。この分野のアイデアについては検討中です。
アプリケーションをDeft JS 5へアップグレードする
現在のソースコード と αリリース は GitHub で公開しています。
既存のアプリケーションを Ext JS と Deft JS の新しいバージョンにアップグレードする時に、ほとんどのものは最小限の変更で移行できます。
- IoC コンテナを構成するときには、これまで通り Deft.Injector.configure() を利用し、依存性の提供者、値のマッピング、ファクトリーの機能を定義するために同じシンタクスを利用します。
- The inject and control annotations are still used. inject と control のアノテーションはそのまま使えます。
- observe アノテーションを使って、インジェクトされたオブジェクトから発火されたイベントを監視できます。
- Promise API は提供し続けます
主な変更は View Controller で発生します。Sencha は独自の View Controller を実装しましたので、現在の Deft JS View Controller とは違った方法で動作します。
最も大きな変更は View Controller がビューと対話する方法に関係しています。Sencha の control コンフィグは、以前 Deft が提供したものよりも限られています。
- セレクターは、ターゲットビューコンポーネントの id または itemId を使用して自動的に設定されません。
- ビューコンポーネントの参照のゲッターとセッターは control コンフィグから生成されません。別の refs コンフィグが使用されます。
- Sencha は、開発者が control の利用を止めて、 ビューコンポーネント自体でイベントハンドラー名を定義する ことを推奨しています。 ハンドラー関数は、新しい referenceHolder 機能を利用して見つけます。 これは通常は ViewController で定義された関数となります。この利点として、コンポーネントクエリセレクターを余り扱わずにすみます。
- Sencha はまた、ビューコンポーネントの参照を取得する際には、 refs の利用も止めて、 かわりにビューコントローラーで getReference() を利用すること を推奨しています。
ご覧の通り、我々の control 実装を進める意味は余りありません。我々の意見は、既存の Deft JS 開発者は、参照やリスナー名をビューで定義するなどの新しいアプローチに従ったほうがいいと思います。
もう一つの大きい変更は内部的なものです。ミックスインはクラスプリプロセッサーの代わりに使用されています。開発者にとって、inject アノテーションを利用している時には、クラスはDeft.Injectable ミックスインを適用する必要があります。今の時点では、Sencha Cmd は define-rewrite オプティマイザでカスタムプリプロセッサーを認識しないため、Sencha Cmd を利用して構築されたプロジェクトをより良くサポートするために必要です。
まとめ
Deft JS チームは、Ext JS 5 の可能性についてワクワクしています。このリリースでの、MVVM, View Controller, バインディングの導入で、Sencha は開発者コミュニティのフィードバックと感じていたアーキテクチャの心配に多く応えることができました。その上、Deft JS と GluJS などのオープンソースの開発者コミュニティととてもオープンな協力態勢をとっていて、感激しました。
Deft JS IoC と Promise のアップグレードは、 Joukou Ltd と Superstruct Ltd の協力で完成できました。 また、 Brian Kotek が View Controller の移植に関する課題に取り組みました。John Yanarella もいつも通りに全ての作業をサポートしました。Deft JS 5 の準備を手伝った企業、人物、Sencha社、ありがとうございました！
最初から思った通り、Deft JS ライブラリはSencha プラットフォームと一緒に進化しています。過去の課題はシフトしますし、消えますが、新しい課題も発生します。我々はこのまま続けますので、Sencha プラットフォームのアプリケーション開発がより速く、簡単に、テスト可能に、再利用できるように新しい方法を検討します。是非、私たちの旅に参加して下さい！
