Sencha Touch - Architecture

La couche inférieure de toute application mobile est le système d'exploitation, en plus de cela, tout est construit. Ensuite, nous avons les navigateurs sur lesquels nous allons exécuter les applications. Cela pourrait être Chrome, Safari, IE n'importe quoi. La couche supérieure est une norme W3, qui est commune à tous. Sencha Touch repose ou est construit au-dessus des normes W3, qui n'est autre que HTML5, ce qui rend une seule application compatible avec différents navigateurs de différents appareils.

Sencha Touch est une combinaison de trois cadres - ExtJs, JqTouch et Raphael (dessin vectoriel). Il suit l'architecture MVC. MVC sépare le code en morceaux plus faciles à gérer.

Bien que l'architecture ne soit pas obligatoire pour le programme, il est recommandé de suivre cette structure pour rendre votre code hautement maintenable et organisé.

Structure du projet avec l'application Sencha Touch

----------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

Le dossier de l'application Sencha Touch résidera dans le dossier JavaScript de votre projet.

L'application contiendra des fichiers de contrôleur, de vue, de modèle, de magasin et d'utilitaire avec app.js.

app.js- Le fichier principal à partir duquel le flux du programme démarrera. Il doit être inclus dans le fichier HTML principal en utilisant la balise <script>. L'application appelle le contrôleur de l'application pour le reste de la fonctionnalité.

Controller.js- C'est le fichier contrôleur de l'architecture Sencha Touch MVC. Il contient tout le contrôle de l'application, les écouteurs d'événements et la plupart des fonctionnalités du code. Il effectue les tâches suivantes: routage, intermédiaire entre la vue et le modèle, et exécute les événements.

View.js- Il contient la partie interface de l'application, qui apparaît à l'utilisateur. Sencha Touch utilise diverses vues riches de l'interface utilisateur, qui peuvent être étendues et personnalisées en fonction des besoins.

Store.js- Il contient les données mises en cache localement, qui doivent être rendues à la vue à l'aide d'objets de modèle. Store récupère les données à l'aide de proxys, dont le chemin est défini pour que les services récupèrent les données du backend.

Model.js- Il contient les objets qui lient les données du magasin à afficher. C'est la représentation de l'objet du monde réel, qui traite essentiellement de la base de données.

Utils.js- Il n'est pas inclus dans l'architecture MVC, mais il est recommandé de l'utiliser afin de rendre le code propre, moins complexe et plus lisible. Nous pouvons écrire des méthodes dans ce fichier et les appeler dans le contrôleur ou le moteur de rendu de vue si nécessaire. Il est également utile à des fins de réutilisation du code.