Sencha Touch - Arquitetura

A camada inferior de qualquer aplicativo móvel é o sistema operacional, além de tudo ou qualquer coisa construída. Depois, temos os navegadores nos quais executaremos os aplicativos. Pode ser Chrome, Safari, IE qualquer coisa. A camada superior é um padrão W3, que é comum para todos. O Sencha Touch representa ou é construído com base nos padrões W3, que nada mais é do que HTML5, o que torna um único aplicativo compatível com diferentes navegadores de diferentes dispositivos.

Sencha Touch é uma combinação de três estruturas - ExtJs, JqTouch e Raphael (desenho vetorial). Ele segue a arquitetura MVC. MVC separa o código em pedaços mais gerenciáveis.

Embora a arquitetura não seja obrigatória para o programa, é uma prática recomendada seguir essa estrutura para tornar seu código altamente sustentável e organizado.

Estrutura do projeto com o aplicativo 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

A pasta do aplicativo Sencha Touch residirá na pasta JavaScript do seu projeto.

O aplicativo conterá arquivos de controlador, visualização, modelo, armazenamento e utilitário com app.js.

app.js- O arquivo principal de onde o fluxo do programa começará. Deve ser incluído no arquivo HTML principal usando a tag <script>. O aplicativo chama o controlador do aplicativo para o restante da funcionalidade.

Controller.js- É o arquivo controlador da arquitetura Sencha Touch MVC. Ele contém todo o controle do aplicativo, os ouvintes de eventos e a maior parte da funcionalidade do código. Ele executa as seguintes tarefas: roteamento, intermediário entre a visualização e o modelo e executa eventos.

View.js- Contém a parte da interface do aplicativo, que aparece para o usuário. O Sencha Touch usa várias visualizações ricas de IU, que podem ser estendidas e personalizadas de acordo com o requisito.

Store.js- Contém os dados armazenados em cache localmente, que devem ser renderizados na visualização com a ajuda de objetos de modelo. O armazenamento busca os dados usando proxies, que tem o caminho definido para os serviços buscarem os dados de back-end.

Model.js- Contém os objetos que vinculam os dados da loja à visualização. É a representação do objeto do mundo real, que basicamente lida com o banco de dados.

Utils.js- Não está incluído na arquitetura MVC, mas é uma prática recomendada usá-lo para tornar o código mais limpo, menos complexo e mais legível. Podemos escrever métodos neste arquivo e chamá-los no controlador ou no renderizador de exibição sempre que necessário. É útil também para fins de reutilização de código.