Sencha Touch - Arquitectura
La capa inferior para cualquier aplicación móvil es el sistema operativo, además de que todo o cualquier cosa está construido. Luego tenemos los navegadores en los que ejecutaremos las aplicaciones. Podría ser Chrome, Safari, IE cualquier cosa. La capa superior es un estándar W3, que es común para todos. Sencha Touch se basa o se basa en los estándares W3, que no es más que HTML5, lo que hace que una sola aplicación sea compatible con diferentes navegadores de diferentes dispositivos.
Sencha Touch es una combinación de tres marcos: ExtJs, JqTouch y Raphael (dibujo vectorial). Sigue la arquitectura MVC. MVC separa el código en fragmentos más manejables.
Aunque la arquitectura no es obligatoria para el programa, sin embargo, es una buena práctica seguir esta estructura para que su código sea altamente mantenible y organizado.
Estructura del proyecto con la aplicación 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 filesLa carpeta de la aplicación Sencha Touch residirá en la carpeta JavaScript de su proyecto.
La aplicación contendrá archivos de controlador, vista, modelo, tienda y utilidades con app.js.
app.js- El archivo principal desde donde comenzará el flujo del programa. Debe incluirse en el archivo HTML principal usando la etiqueta <script>. La aplicación llama al controlador de la aplicación para el resto de la funcionalidad.
Controller.js- Es el archivo controlador de la arquitectura Sencha Touch MVC. Contiene todo el control de la aplicación, los oyentes de eventos y la mayor parte de la funcionalidad del código. Realiza las siguientes tareas: enrutamiento, intermedio entre vista y modelo, y ejecuta eventos.
View.js- Contiene la parte de la interfaz de la aplicación, que se muestra al usuario. Sencha Touch utiliza varias vistas enriquecidas de IU, que se pueden ampliar y personalizar según los requisitos.
Store.js- Contiene los datos almacenados en caché local, que se mostrarán a la vista con la ayuda de objetos modelo. Store obtiene los datos mediante proxies, que tiene la ruta definida para que los servicios obtengan los datos del backend.
Model.js- Contiene los objetos que vinculan los datos de la tienda a ver. Es la representación del objeto del mundo real, que básicamente se ocupa de la base de datos.
Utils.js- No está incluido en la arquitectura MVC, pero es una buena práctica usarlo para hacer que el código sea más limpio, menos complejo y más legible. Podemos escribir métodos en este archivo y llamarlos en el controlador o en el renderizador de vista donde sea necesario. También es útil para fines de reutilización de código.