このブログシリーズのパート1とパート2では、Ext JS 6 モダンツールキットの変更点や、ベーシックモバイルアップグレードおよびアドバンスドモバイルアップグレードについて解説いたしました。この記事ではアドバンストユニバーサルアップグレードについて説明します。

アドバンストユニバーサールアップグレード

このアップグレードは一番時間がかかりますが、その分無限の可能性が広がります。新しい機能やクラスをすべて備えた最新のフレームワークを手に入れることができ、新しいMVVMアーキテクチャによりアプリケーションのパフォーマンスとコードベースを改善することができます。また、ユニバーサルクロスプラットホームアプリを作成(または将来の作成に備えて計画) することができます。スマートフォンやタブレット用のアプリを開発するだけでなく、デスクトップ向けに用意されたコンポーネントセットを使用してデスクトップやハイブリッドコンピュータに対応させることもできます。

このアプローチには同じネームスペースで、ただし今回はユニバーサルアプリとしてSencha Cmd を使ってフォルダ構造を再生成することをおすすめします。

1. extフレームワークフォルダに移動し、下記のコマンドでプロジェクトを生成します:
   sencha generate app
   例えば
   ext>sencha generate app Dinmu ../dinmu3
   共有appフォルダでフォルダ構造が作られます。クラシックツールキットに向けてはクラシックフォルダ、モダンツールキットに向けてはモダンフォルダが用意されます。



2. このファイル構造を生成した後、それぞれの操作体験に対してどのコードを共有し、どのコードを独自のものとするかを考える必要があります。

当たり前ながら、デスクトップに特化した新しいビューを作らなければなりません。(お天気アプリに関していえば、すでにお持ちのタッチアプリケーションはモダンツールキットビューであると思いますが、デスクトップ向けに新しいビューを作るということです)。デスクトップコンポーネントは独自のイベントリスナを必要とするため、ビューコントローラを追加することになるはずです。ビューコントローラはappフォルダを継承することで共有することができます。

しかし、独自のデータ/モデルをデスクトップビュー用に作成することもできます。画面はより大きいため、さらに追加してデータを表示できるスペースがあります。またはスマートフォンにはデスクトップアプリケーションにはない独自の機能(カメラ、GPSなど)があるため、端末に合わせた機能をそれぞれ作成したくなるかもしれません。これらは全て実現可能です。それはappフォルダからクラシックフォルダかモダンフォルダにクラスを移動させることで、できてしまいます。ユニバーサルアプリの作成に関しては過去のブログ記事をご参照ください。

ファイルサイズはどうでしょうか

app.jsとapp.cssのファイルサイズが気になりますか？以下をご覧ください:

	Sencha Touch	Ext JS 6 Modern – Basic	Ext JS 6 Modern – MVVM
app.js – minified	558kb	836kb	887kb
app.css – compiled	241kb	91kb	91kb

Ext JS 6 はより機能拡張されたクラスを必要とするため、トータルビルドは少し大きくなってしまいます。ビューコントローラに切り替えたり、データバインドを使用したり、モデルフィールドをきれいにすることでコードベースを小さくすることができ、結果としてビルドしたものはより小さくなります。

また、新しいマイクロローダのおかげでアプリケーションをより小さくキャッシュでき、オフラインでの使用も可能となります。

Triton Theme

Triton Theme

まとめ

このチュートリアルでは、どのようにしてSencha Touch アプリケーションをExt JS 6 モダンツールキットにマイグレートするかを解説しました。私の場合、ベーシックアップグレードには数時間かかり、MVVMへのアップグレードは午前中いっぱい要しました。ただし、このアプリケーションはビューの少ない基本的なものです。

Sencha Touch 1 からSencha Touch 2へのアップグレード時よりも作業は簡単になっていますが、時間は多少かかってしまいます。この時間は、パターンもアップグレードしたいか、すでにお持ちのSencha Touch アプリにたくさんのカスタムコンポーネントを載せているか等に依ります。

我々は複雑なアプリケーションを常日頃からマイグレートさせているプロのサービスエンジニアを沢山抱えています。もし手助けが必要であればご連絡ください。

Windows Theme

時間をかけてでもMVVMパターンを利用してアプリをアップグレードされることをお薦めします。その理由は以下の通りです:

• 最新のフレームワークであるため、最新のブラウザやOSに対応しています
• コードベースを大幅にきれいにすることができます
• MVVMパターンはパフォーマンスを向上させます
• 1つのコードベースでデスクトップアプリケーションとモバイルアプリケーションを作成できます
• 最新のクラスおよびコンポーネント、テーマを全て取り扱うことができます
• 新しいテーマパッケージ構造を利用し、より早くテーマをコンパイルすることができます

新しいExt JS コアにより、新しいExt JS アプリ(ver5以上)は全て後方互換できます。つまり、アップグレードがより簡単にできるということです(Ext JS 5 アプリケーションをExt JS 6 にアップグレードするように、Sencha Cmd でアップグレードを実行するだけです)。