Sencha Touch - Architettura

Lo strato inferiore per qualsiasi applicazione mobile è il sistema operativo, per di più viene costruito qualsiasi cosa o tutto. Quindi abbiamo i browser su cui eseguiremo le applicazioni. Potrebbe essere Chrome, Safari, IE qualsiasi cosa. Lo strato superiore è uno standard W3, comune a tutti. Sencha Touch sta o è costruito sulla base degli standard W3, che non è altro che HTML5, che rende una singola applicazione compatibile con diversi browser di diversi dispositivi.

Sencha Touch è una combinazione di tre framework: ExtJs, JqTouch e Raphael (disegno vettoriale). Segue l'architettura MVC. MVC separa il codice in blocchi più gestibili.

Sebbene l'architettura non sia obbligatoria per il programma, tuttavia, è consigliabile seguire questa struttura per rendere il codice altamente manutenibile e organizzato.

Struttura del progetto con l'app 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

La cartella dell'app Sencha Touch risiederà nella cartella JavaScript del tuo progetto.

L'app conterrà file di controller, visualizzazione, modello, archivio e utilità con app.js.

app.js- Il file principale da cui inizierà il flusso del programma. Dovrebbe essere incluso nel file HTML principale utilizzando il tag <script>. L'app chiama il controller dell'applicazione per il resto della funzionalità.

Controller.js- È il file del controller dell'architettura Sencha Touch MVC. Contiene tutto il controllo dell'applicazione, i listener di eventi e la maggior parte delle funzionalità del codice. Esegue le seguenti attività: instradamento, intermedio tra vista e modello ed esegue eventi.

View.js- Contiene la parte dell'interfaccia dell'applicazione, che si presenta all'utente. Sencha Touch utilizza varie visualizzazioni ricche di interfaccia utente, che possono essere estese e personalizzate in base alle esigenze.

Store.js- Contiene i dati memorizzati nella cache locale, che devono essere visualizzati a vista con l'aiuto di oggetti del modello. Store recupera i dati utilizzando proxy, che ha il percorso definito per i servizi per recuperare i dati di backend.

Model.js- Contiene gli oggetti che vincolano i dati del negozio da visualizzare. È la rappresentazione dell'oggetto del mondo reale, che fondamentalmente si occupa del database.

Utils.js- Non è incluso nell'architettura MVC ma è buona norma utilizzarlo in modo da rendere il codice pulito, meno complesso e più leggibile. Possiamo scrivere metodi in questo file e chiamarli nel controller o visualizzare il renderer dove richiesto. È utile anche ai fini della riutilizzabilità del codice.