Are You Ready for Ext JS 5?

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Are You Ready for Ext JS 5? を翻訳したものです。

Ext JS 5: アップグレードの準備

Senchaファミリーに Ext JS 5 が加わりました！他のメジャーリリースと同じように、Ext JS 5 ではいくつかの新しい機能を導入します：

タブレット対応
双方向データバインド
新しい MVVM アプリケーションアーキテクチャ
Widgets と Widget Column
Crisp テーマ
ルーティング
その他

新機能の完全なリストは「 What’s New in Ext JS 5 」ガイドをご覧ください。

Ext JS 5 についてより深く学んだり、アップグレードに関する質問がしたいですか？ 4月24日10:00 (PDT:日本時間では4月25日午前2:00) PDT から一時間のウェブセミナー “Are You Ready for Ext JS 5” がありますので、申し込んで下さい。

テスト

Ext JS 5 には様々な新機能がありますが、ほとんどの変更は内部的なものです。Ext JS 5 ベータの公開で、次の部分に注目しながら、一般公開までにあなたのアプリケーションの準備を整えてほしいと思っています。

Ext JS 5 のアップグレードチェックリストで、次の評価のシステムを利用して、それぞれの変更ごとのアップグレードの処理の難しさを示します。 Ext JS 5 Difficulty Scale

レガシーブラウザの削除

Ext JS 5 では IE6、IE7、そして他のブラウザの古いバージョンをサポート対象から除外しました。これにより、フレームワーク上でのロジックやスタイリングを大きく削減することができました。これは今回適用された最適化とともに、エンタプライズ Web アプリケーションの大きな進化となります！

Removing Legacy Browsers

Ext JS 5 は次のブラウザに対応しています：

IE8+ (標準モードのみ)
Firefox 12+ (PC & Mac)
Safari 6+
Chrome 18+
Opera 12+ (PC & Mac)

ほとんどの開発者はサポートすべきブラウザはご存知なでしょうから、このアップグレードの部分は簡単だと思います。

Doctype

Ext JS 5 でもう一つの重要な変更は HTML5 の doctype の利用を推奨していることです：

<!DOCTYPE html>

この doctype を記述しなかったり、他の doctype を利用すると、表示が狂ったり位置がおかしくなるなどの意図しない動作が起こる可能性があります。HTML5 doctype は IE8 でサポートされています。ですから、HTML4 の後方互換性を持つ新しい標準 doctype となり、これを Ext JS 5 で利用するのは理にかなっています。

このアップグレードの部分も割とわかりやすいと思います。もしあなたのアプリケーションに IE6~7 向けの CSS がたくさんある場合には、doctype の変更は少し面倒かもしれません。

Sencha Cmd

Ext JS 5 の公開で、アプリケーションアーキテクチャやプロダクションビルドを管理するには、Sencha Cmd の最新版を利用することを強く推奨します。

Ext JS 5 のフレームワークはカプセル化された Sencha Cmd の package になっています。フレームワークの “core” な部分は完全にモジュール化されており、Sencha Touch とでも共有できます。

Ext JS 5 SDK を開くと、次のようなフォルダ構造になっています。 SDK Folder Structure

パッケージ名から推測できると思いますが、”ext-” プレフィックスを持つパッケージは Ext JS フレームワーク固有のものです（例えば、”ext-theme-neptune”）。また、”sencha-” プレフィックスを持つパッケージは、全てのフレームワークで共有されます(例えば “sencha-core”)。

ほとんどのコードは変更されていませんが、新しいパッケージの位置を覚える参考にしてください。

すでに Sencha Cmd を使っている？

既存のアプリケーションが Ext JS 4.2.xで動作して、Sencha Cmd 4.x を使って構築されているのであれば、スムースに sencha app upgrade でアップデートできると思います。既に Sencha Cmd を利用して構築された Ext JS アプリケーションは Cmd 5.x へアップグレードする時には、それほどの影響はありません。詳しくはSencha Cmd 5 Upgrade Guideをご覧ください。

Sencha Cmd を使っていない？

アプリケーションが Sencha Cmd で作成されていない場合に、Sencha Cmd のメリットを使うには、sencha generate app を使って簡単に新しいアプリケーションを生成して、その新しいアーキテクチャに /app/ フォルダを手動でコピーするという方法があります。また、アプリケーションが推奨のフォルダ構造を使っていれば、”sencha generate app –starter=false” を使って、アプリケーション上に Sencha Cmd のスケルトンを生成できます。

Sencha Cmd を初めて触るお客様は、慣れるのに少し時間がかかるでしょう。詳しくは、Ext JS 5: Getting Started Guide をご覧下さい。

Sencha Cmd を使わずに開発したい方は、Ext JS 5 Upgrade Guideのbuild filesに関する情報をご覧ください（例えば ext-all.js または ext-all-debug.js)。

互換性レイヤー

Sencha Cmd を使うもう一つのメリットとして、互換性のレイヤーを管理する能力があります。これは 4.x から 5.x のアップグレードを (または今後のアップグレードも) とてもスムーズにします。

Ext JS 5 では、API の一部分を “非推奨” としてマークする新しいメカニズムを導入しています。アプリケーションが以前のバージョンからアップグレードできるようにするために、app.json で対応しているフレームワークのバージョンをセットすると、非推奨の API を使うと警告がブラウザのコンソールに出力されます。

例えば、Ext.form.field.Trigger クラスは 5.x で廃止されており、それを使うとエラーが発生します。しかし、compatibility layer を 4.2 にセットすると、以前のように動作して、ブラウザのコンソールに警告が出力されます。この方法では、 API がエラーを起こすのを体験するより、スムーズにそれぞれの警告を更新するだけですみます。

Ext JS 4.2 との互換性をもったアプリケーションを構成するには、アプリケーションのapp.jsonで次のプロパティをセットするだけです。

compatibility: {
 ext: '4.2'
}

互換性レベルは開発機能のオプションのため、アップグレード処理には悪影響がでなません。実は、互換性レベルを利用すると、全体的にアップグレードの処理はより簡単になります。詳しくは Ext JS 5 Upgrade Guide をご覧ください。

コンフィグシステム

Sencha Touch 開発者はクラスを定義する config シンタックスは知っていますね。Ext JS 5 では少し違った形でこの考え方を使っています。詳しくは What’s New in Ext JS 5 をご覧ください。

この変更は、initConfig() を呼び出すカスタムコンポーネントに影響すると思います。なので、あなたの UX クラスを確認して下さい。

新しいコンフィグプロパティを宣言するにはまだ “config: {}” を利用する必要がありますが、派生クラスではこれを直接クラスボディにセットできます。このため、ベースクラスがコンフィグシステムを利用するために、コンフィグを切り替えても、派生クラスはベースと互換性を持ちます。

コンフィグシステムが使われていない Ext JS 4 のクラスは、コンフィグシステムが利用されていても Ext JS 5 と互換性があります。このコンセプトをご存知ではない開発者には、コンフィグシステムがアップグレード処理中にいくつかの作業を生成します。基本的に、プロパティをコンフィグオブジェクトに移動させるべき場合にはフレームワークが警告を出しますが、この移行には少し時間がかかります。

チャート

Sencha Touch 2.1 でハイパフォーマンスで、タッチ操作に最適化されたチャートのパッケージを導入しました。Ext JS 5 では、このチャートパッケージが Ext JS と Sencha Touch 両方で動作するように改善しました。これはたくさんの新しい機能とタブレット端末での素晴らしいパフォーマンスを実現しました。

Ext JS 4 のチャートは変換作業を軽くするために、別のパッケージに変換しましたので、Ext JS 5 にアップグレードしても利用できます。新しいチャートのパッケージにアップデートするには、ext-charts パッケージを新しい sencha-charts パッケージに切り替えるだけです。ほとんどの API は同じで、同じではないものはExt JS Charts Upgrade Guideに説明があります。

旧来の Ext JS チャートは Ext JS 5.1 まではフレームワークに残ります。しかし Sencha Charts に含まれている新機能が適用されることはありません。

多くのお客様はアプリケーション用にチャートのパッケージをカスタマイズしていますから、Ext JS 5 にアップグレードすると少々問題が発生する可能性があります。新しいチャートのパッケージは以前のものと似てはいますが、API の違いがあります。詳しくはExt JS Charts Upgrade Guide をご覧下さい。

注：Ext JS 5 ベータの Sencha Charts パッケージは VML のレンダリングが実装されていないため、IE8 でのチャートレンダリングには対応していません。Ext JS 5 の一般公開までにその対応を行うつもりです。

MVC と MVVM

Ext JS 4 は MVC アーキテクチャのパターンのサポートを導入しました。Ext JS 5 では、MVC の替わって人気がでてきた MVVM（Model-View-ViewModel）をサポートします。MVVM の大きな魅力はデータバインドです。これはモデルレイヤーをビューに接続します。ビューが変更されたらモデルをアップデートしますし、その逆も行います。

Ext JS 4 では、コントローラーは、アプリケーション全体のロジックに対して、グローバルなソリューションを提供しています。Ext JS 5 は view インスタンスと直接関連できるビュー専用のコントローラーを提供しています。インスタンス化から破壊まで、ViewController は参照しているコンポーネントに結びつけられています。

Ext JS 4 の MVC アーキテクチャで生成されたグローバルコントローラーはこれまで通りに操作しますが、場合によっては ViewController を生成するのが最適かもしれません。とりあえず、今のアップグレード処理はスムーズだと思います。Ext JS 5 の新しい MVVM パターンに関する詳しい情報は View Models and Data Binding Guide を参照して下さい。

Ext JS 5のAPI変更

Ext 4 から 5 への移行は出来るだけスムーズにする努力をしました。といいつつ、この新しい景色を完全に認識するために、いくつかの変更を取り上げることにしましょう。

Microloader と app.json

Sencha Cmd で作成された Ext JS 5 アプリケーションは Microloader と app.json ファイルを使うようになりました。そのため Ext JS 5 のアプリケーションは Sencha Touch のアプリケーションとよく似ています。他のものを追加する時は app.json ファイルを使って行うべきです。これは元々 index.html に含まれていた JS と CSS のリソースも含みます。

Sencha Cmd や Touch をご存知ではないユーザーは慣れるまで少し時間がかかると思いますが、質問は全て Sencha Cmd 5 Upgrade Guide で答えられていると思います。

Ext.dom.Query

サポートしている全てのブラウザには querySelector() があるため、Ext JS 5 は Ext.dom.Query をデフォルトの必要条件から除外しました。このため、Ext.dom.Query をまだ利用する必要があったら、今後は手動で挿入する必要があります。また、Ext.dom.Query を直接使わず、Ext.Element のメソッド（例えば select(), selectNode() and query()) だけ利用することをおすすめします。

ほとんどのお客様のアップグレードプロセスではアプリケーションの起動時に Ext.dom.Query を require するのが簡単でしょう。Ext.dom.Query の全ての利用を querySelector に切り替える作業をすると、少々時間がかかるでしょう。

Stores & Models

ストアは Ext JS 5 でいくつかの変更が必要でしたので、アップデートされたアプリケーションには問題が発生する可能性があります。特に、remove イベントは add イベントをミラリングしますので、各レコードではなく、レコードの範囲で一回だけ発火します。長く続いた add と datachanged のイベントの問題も解決できました。しかし、その動作に頼っている場合には、問題が発生する可能性があります。最後に、buffered store は独自のストアクラスになったので、”type” コンフィグを利用して生成します ( “buffered: true” も多くの場合は動作します)。

モデルも Ext JS 5 で改善されました。レコードオブジェクトのいくつかのプロパティも変更しました、特に全てのデータ（宣言されてないデータも含めて）は record.data にあり、record.raw はもう存在しません。アソシエーションは沢山の修正があり、record.destroy() は record.erase() に変更されました。

ほとんどの Ext JS アプリケーションはデータアクセスに大きく依存しますので、この点で多くのお客様が困ることがあると思います。Store と Model クラスの変更について、詳しくは Ext JS 5 Upgrade Guide をご覧ください。

Sencha Blog