In this session you'll learn about the recommended application structure for Sencha Touch (or Ext JS) applications. The new application structure enables any Sencha developer to quickly understand any Sencha application using the new Sencha MVC package.

2. Structuring your Sencha
Touch application
by Tommy Maintz
@tommymaintz

3. Session Goals
Understand MVC
MVC in Sencha Touch
Common file structure
Generators & Build Tools

5. MVC
Models, Views & Controllers

6. Benefits
Reduce architectural complexity
Flexibility and maintainability.

7. Models
Manages the data of the application
Provide data in its current state
Allows you to change state

8. Views
Renders the model into a form suitable for interaction
Multiple views can exist for a single model

9. Controllers
Receives input
Instructs the model and views

10. Controller
View Model
DIRECT CONNECTION
INDIRECT CONNECTION

11. Sencha MVC

12. Platform
Same MVC codebase
Share Models, Stores, Controllers

13. Managers
Ext.regApplication()
Ext.regModel()
Ext.regStore()
Ext.regController()
Ext.reg()

14. Application

15. Model

16. Store
t ’s i t. . .
l l y, tha
R ea

17. View
mil iar?
Lo ok s fa e n ts
c om pon
s ar e UI
V ie w

18. Controller

19. Common file structure

20. Benefits
Learn it once
Easier support
Sharing between projects
Enables use of Sencha Command

27. Sencha Command
Generate projects, controllers, models and stores
Cross-OS

28. Let’s build an app!

29. Questions?