HOME > 開発者向けBLOG > Sencha Blog >  Are You Ready for Ext JS 5?

Technology Note 開発者向けBLOG

Sencha Blog

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 Difficulty Scale Easyレガシーブラウザの削除

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)

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

Ext JS 5 Difficulty Scale EasyDoctype

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

<!DOCTYPE html>

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

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

Ext JS 5 Difficulty Scale EasySencha 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”)。

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

Ext JS 5 Difficulty Scale Easyすでに 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をご覧ください。

Ext JS 5 Difficulty Scale MediumSencha 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)。

Ext JS 5 Difficulty Scale Easy互換性レイヤー

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 をご覧ください。

Ext JS 5 Difficulty Scale Mediumコンフィグシステム

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

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

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

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

Ext JS 5 Difficulty Scale Mediumチャート

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 の一般公開までにその対応を行うつもりです。

Ext JS 5 Difficulty Scale EasyMVC と 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 への移行は出来るだけスムーズにする努力をしました。といいつつ、この新しい景色を完全に認識するために、いくつかの変更を取り上げることにしましょう。

Ext JS 5 Difficulty Scale EasyMicroloader と 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 JS 5 Difficulty Scale EasyExt.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 に切り替える作業をすると、少々時間がかかるでしょう。

Ext JS 5 Difficulty Scale HardStores & Models

ストアは Ext JS 5 でいくつかの変更が必要でしたので、アップデートされたアプリケーションには問題が発生する可能性があります。特に、remove イベントは add イベントをミラリングしますので、各レコードではなく、レコードの範囲で一回だけ発火します。長く続いた adddatachanged のイベントの問題も解決できました。しかし、その動作に頼っている場合には、問題が発生する可能性があります。最後に、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 をご覧ください。

おすすめの手順

アプリケーションのアップグレードを完全にやり遂げるために、より詳細な Upgrade Guide がありますが、あなたのアプリケーションを Ext JS 5 にするためのおすすめの手順があります。

最新のバージョンにアップグレードする

我々はお客様全員が Ext JS と Sencha Cmd の最新版を動作させる余裕があるわけではないことを知っています。あなたの組織、またはお客様が利用している Ext JS のバージョンは時間の制限、締め切り、サポートライセンスに影響されます。

時間をかけて、Ext JS 4.x と Cmd 4.x の最新版にアップグレードすると、たくさんのバッグフィックスを利用できますし、いくつかのメジャーバージョンを渡った API の変更も避けることができて、Ext JS 5.x の移行がよりスムーズになります。

オーバーライドとUXを確認する

アップグレードのバグはフレームワークのオーバーライドとカスタムコンポーネントでよく発生します。

重要なところは、これらのオーバーライドや UX クラスを全てドキュメント化して、完全に理解することです。

アプリケーションのロジックを分解する

アップグレード処理でこの時点まで進むと、あなたのアプリケーションはブラウザに無事に読み込まれたと思います。

メジャーアップグレードの最も難しい部分は、実行中にアプリケーションを実際にテストすることです。アップグレードの作業時間として、コントローラーやとイベントハンドラーの中のアプリケーションロジックを分解する作業に時間を取られることを覚悟して下さい

推奨するドキュメント

より詳しい Ext JS 5 に関する情報が必要なら、我々のガイドをご覧ください:

4月24日10:00(PDT:日本時間25日午前2:00) からの一時間のウェブセミナー — “Are You Ready for Ext JS 5” に 登録 できます —

PAGETOP