SenchaTouch-アーキテクチャ

モバイルアプリケーションの最下層はOSであり、その上にあらゆるものが構築されます。次に、アプリケーションを実行するブラウザーがあります。Chrome、Safari、IEなど何でもかまいません。上層はW3規格であり、すべての人に共通です。Sencha Touchは、単一のアプリケーションをさまざまなデバイスのさまざまなブラウザと互換性のあるHTML5に他ならないW3標準に基づいて構築されています。

Sencha Touchは、ExtJs、JqTouch、およびRaphael（ベクトル描画）の3つのフレームワークを組み合わせたものです。これはMVCアーキテクチャに従います。MVCは、コードをより管理しやすいチャンクに分割します。

アーキテクチャはプログラムに必須ではありませんが、コードを高度に保守可能で整理するために、この構造に従うことがベストプラクティスです。

SenchaTouchアプリを使用したプロジェクト構造

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Sencha Touchアプリフォルダーは、プロジェクトのJavaScriptフォルダーにあります。

アプリには、app.jsを使用したコントローラー、ビュー、モデル、ストア、およびユーティリティファイルが含まれます。

app.js−プログラムのフローが開始されるメインファイル。<script>タグを使用してメインHTMLファイルに含める必要があります。アプリは、残りの機能のためにアプリケーションのコントローラーを呼び出します。

Controller.js− Sencha TouchMVCアーキテクチャのコントローラーファイルです。これには、アプリケーションのすべての制御、イベントリスナー、およびコードのほとんどの機能が含まれます。次のタスクを実行します：ルーティング、ビューとモデルの中間、およびイベントの実行。

View.js−ユーザーに表示されるアプリケーションのインターフェイス部分が含まれています。Sencha TouchはさまざまなUIリッチビューを使用しており、要件に応じて拡張およびカスタマイズできます。

Store.js−モデルオブジェクトを使用してビューにレンダリングされる、ローカルにキャッシュされたデータが含まれています。ストアは、バックエンドデータをフェッチするサービス用に定義されたパスを持つプロキシを使用してデータをフェッチします。

Model.js−ストアデータをビューにバインドするオブジェクトが含まれています。これは、基本的にデータベースを扱う実世界のオブジェクトの表現です。

Utils.js− MVCアーキテクチャには含まれていませんが、コードをクリーンで複雑さを軽減し、読みやすくするために、これを使用することをお勧めします。このファイルにメソッドを記述し、必要に応じてコントローラーまたはビューレンダラーで呼び出すことができます。これは、コードの再利用の目的にも役立ちます。