このシリーズのパート1ではユニバーサルアプリとはどういうものであるか、そしてExt JS 6 でどのように作られるかを解説しました。今回はどのように私がアプリケーションを作ったかをお見せします。

フォルダ構造

ハイパフォーマンスなExt JS 6 ユニバーサルアプリを作るために私はSencha Cmd を使用しました。私は無料、有料を問わず様々なバージョンのアプリを同一フォルダに同居させており、それらが同じコードパッケージやフレームワークを共有しているため、まずはワークスペースを生成しました。

ワークスペースを生成するため、ダウンロードしたExt JS 6 SDK をブラウズし、そこで下記のコマンドを入力しました:

sencha generate workspace ../spotifinderworkspace6

これにより次のような構造が生成されました:

続いてアプリケーションを生成し、_engine と命名しました。なぜなら異なったふるまいやブランディングのカスタムバージョンのアプリを作ることができるからです。例えばPandora内で楽曲を再生する音楽アプリ。これを実現するにはExt.Application を拡張し、いくつかのエレメントをオーバーライドするだけ済みます。

下記のようにアプリケーションを生成しました:

cd spotifinderworkspace6/ext
sencha generate app Engine ../_engine

ツールキット

classicフォルダはクラシックツールキット向けのフォルダ構造です。デスクトップ(またはタブレットも) に適した豊富なコンポーネントを含んでいます。また、レガシーブラウザにも対応しています。

クラシックツールキットで私のアプリは以下のような見た目となります:

Spotifyのような見た目ですね。従来より使用されているデスクトップコンポーネントとカスタムスタイルシートを使いました。アプリケーションが大きな画面で表示されるため、アルバムアートワークや追加情報、そして横に固定される設定画面等を表示するスペースが用意されています。

私は自身のアプリ向けのビューを作りました。これらのビューは独自のロジックを必要とし、そのためクラシックツールキット内のフォルダ構造は以下のようになっています:

modernフォルダは軽量のタッチコンポーネントを含んでいます。それらはスマートフォン、場合によってはタブレットをも含むタッチ端末に適したものです。これらのコンポーネントはマウスやキーボードではなくタッチ操作に最適化されています。これらのコンポーネントは軽量であるため、処理能力の低いモバイル端末であっても十分なパフォーマンスを発揮します。

画面が小さいため、絶対に必要である最小限のコンポーネントのみが表示されるようにします。設定ビューを開くにはギアボタンを押します。するとアニメーションと共に設定画面がスライドインします。

コンポーネントをそこまで大量に含まないため、私のフォルダ構造は小さいものです。上でお見せしたビューに必要とされているビューとふるまいを記述したコードは独自のものです。その他のすべてはツールキット内で共有されています。

共有されているコードはappフォルダにあります:

補足: ビューコントローラ(VC)を拡張することもできます。

例えば、ほとんどのふるまいを制御するViewport VCは共有することができます。クラシックツールキットフォルダおよびモダンツールキットフォルダのViewport VCはそれらのコンポーネントで必要とするコードのみを含んでいます。

以下は実例です。これはViewport VCのスニペットで、app/main/ フォルダに存在します。ご覧のとおりExt.app.ViewController を拡張したものです。このクラス自体は Engine.view.main.MainController と呼ばれています。

そしてこれがクラシックフォルダ内のViewport VCのコードです。classic/src/main/ フォルダに存在し、こちらはEngine.view.main.MainController を拡張したもので、これが共有されているVCです。このクラスにaliasを置くことを忘れないでください。そうやってこのクラシックビューコントローラをクラシックメインビューにリンクさせます。

マイクロローダー

マイクロローダーはどの環境で実行されているかを検知し、正しい操作体験を提供します。これはつまり、デスクトップにアプリケーションをロードした場合はSpotifyのテーマをもったデスクトップバージョンを見ることができ、iPhoneでアプリを開いた場合はiOSのテーマをもったphoneインターフェースで操作できるということです。

この原理の全てはExt.platformTagsにあります。すでに完成したExt JS 6アプリで、ブラウザコンソールからこのコマンドを実行することも可能です。アプリを動かしているブラウザのバージョン情報やOS、デバイスタイプなど様々な情報をオブジェクトに与えます。

アプリを環境設定することで適切な操作体験を提供できるようにすることができます。ここで重要となるのがapp.jsonファイルです。ビルドプロフィールを作成する必要があります。ツールキット(コンポーネントセット)やテーマなどのビルドプロフィールに、紐づけたいapp.json 設定をそれぞれバインドすることができます:

    "builds": {
        "classic": { //name of the build profile
            "toolkit": "classic", //component set
            "theme": "theme-spotifext", //name of the theme
        },
        "modern": {
            "toolkit": "modern",
            "theme": "theme-cupertino",
        }
}

操作体験の切り替えはindex.htmlファイルで処理されます。Sencha Cmd でアプリケーションを生成した場合は、この処理はもみ消されます

MVVM パターン

Ext JS 6 ではMVVM パターンを利用できます。

View – 画面上の全てのコンポーネントです
ViewController – ビューのためのロジックです
ViewModel –ビューにデータをバインドするためのものです

data model – エンティティの構造です
data record – 実際のデータです
data store – クライアントサイドのキャッシュです

Ext JSの全てのビューはネストすることができ、ビューモデルやビューコントローラも同様です。

このパターンの利点は、コードが読みやすく維持が容易であるということです。
コードやクラスに対してファイル構造が一貫しており、コードの再利用を楽にします。

Ext JS とオープンソースの比較

Ext JS 6 は全てが1つにまとまったソリューションです。さまざまな依存性を維持管理する必要もなく、併せて動かすためにいろいろな技術の専門知識を得ておく必要もありません。

私の作成したアプリケーションでは下記のExt JS 6 ソリューションを使用しました。

オープンソースソリューションを利用することもできましたが、その場合は様々な技術を組み合わせる必要がありました。例えばECMAScript 6 はまだIEに対応していません。Bootstrapやレスポンシブウェブデザインでは、見る必要のない多くのコードをアプリのユーザはダウンロードせねばならず、また、以前のブログでご説明したとおり端末の種類に応じて最適化されているわけでもありません。グリッドコンポーネントには jQueryプラグインがありますが、この能力はExt JS の半分にも満たず、大きなデータセットでは良いパフォーマンスを出しません。また、ブラウザの最新アップデートによりAngularJSプラグインが突然動かなくなってしまった場合は、助けを求めることころがありません。

私のアプリケーションは単純なアプリですが、それでも最低10ほどの依存性をもっています。この50倍ものコードベースをもつエンタープライズアプリだったらどうなることでしょうか。利用する全てのツールの知識を持ち、これらの技術を合わせても問題なく動作し、かつブラウザがアップグレードする中で5年、10年も動き続けることを祈るしかないのです。

まとめ

正にこれが私がExt JS 6 を選んだ理由です。全てが同様に設定してあり、全ての部品が共に動作し、見た目も一緒なオールインワンソリューション。Sencha は商業であるためサポート回線を常に用意しており、この先も私のアプリが動作することを保証してくれます。

情報源として

ウェビナーをご覧ください: Secrets to Building a Great Looking Universal App. 私が音楽アプリを作成した際のコツをさらにご説明しています。

この他のリンク:
Getting Started with Ext JS 6 (英語)
How to Create a Dark Ext JS Theme (英語)