Sencha Touch is a JavaScript framework for developing mobile applications. It uses an MVC architecture with models for data, views for presentation, and controllers for handling events and application logic. The document discusses how to implement MVC patterns in Sencha Touch, including defining models, views, controllers, and handling events. It also covers challenges of splitting logic between client and server, testing applications, and scaling the architecture over time as an app grows in complexity.

1. Sencha TouchのMVCについて
∼スケールするアプリケーションをもとめて∼

2. Profile
๏ Ariel Networks Inc.
๏ @kiris
๏ Server Side Engineer
๏ Hate JavaScript :-(
๏ ECMAScript is OK

3. Sencha TouchのMVCを中心に
感想や意見を憶測を交えながら
まとまりなく話します

4. Sencha Touchって何？

5. JavaScirpt Framework for Mobile
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
'Ext.MessageBox',
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});

6. Native Application like Components

7. Ext JS based Class System
๏ Class-based OOP
๏ Mix-in
๏ Dependencies and
Dynamic Loading
๏ Autogen getter/
setter and more...
Ext.define('Human', {
extend: 'Animal',
mixins: ['Ext.mixin.Observable'],
requires: 'Ext.MessageBox',
config: {
name: null
},
constructor: function(config) {
this.initConfig(config);
},
speak: function() {
Ext.Msg.alert(this.getName(),
'Speaks...');
}
});

8. More topics
๏ Vendor Development
๏ Supported Devices
iOS/Android/Black Berry/Windows Phone
๏ Sass Supported
๏ MVC Architecture

9. Sencha Touch MVC

10. Model
๏ User-Defined Fields
String/Integer/Float/Boolean
๏ Data Bindings
AJAX/REST/Localstorage/JSON-P
๏ Associations
hasMany/BelongsTo
๏ Validations
Presence/Format/Length/Custom
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
],
proxy: {
type: 'rest',
url : 'data/users',
reader: {
type: 'json',
root: 'users'
}
},
hasMany: 'Post',
validations: [
{ type: 'presence',
field: 'name' }
]
}
});

11. View
๏ Plain Ext JS Class
NOT HTML Template
Ext.define('MyApp.view.Welcome', {
extend: 'Ext.Panel',
config: {
html: 'Welcome to my app',
fullscreen: true
}
});
Ext.create('MyApp.view.Welcome', {
styleHtmlContent: true
});

12. Controller
๏ Routing with
Hash Fragments
๏ References Views
๏ Event Handling
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
config: {
routes: {
'user/:id': 'showUserById'
},
refs: {
loginButton: 'button[action=login]'
},
control: {
loginButton: {
tap: 'doLogin'
}
},
},
showUserById: function(id) {
...
},
doLogin: function() {
this.redirectTo('/login');
}
});

13. Events
๏ mixin Ext.mixin.Observable
๏ call fireEvent method
Ext.define('Employee', {
mixins: ['Ext.mixin.Observable'],
config: {
fullName: ''
},
constructor: function(config) {
this.initConfig(config);
},
quitJob: function() {
this.fireEvent('quit');
}
});

14. 如何にスケールさせるか？

15. 典型的な例

16. ModelView
Controller
Data BindingsHTML Buildings
Other
Reference
Data Flow

17. ModelView
Controller
Data BindingsHTML Buildings
Other
After half a year...

18. MVCの理解を深めよう

19. Model
๏ Model Data Binder
๏ Has Domain Logic
๏ Fire Events
push-based MVC

20. View
๏ View HTML Template
๏ Has Presentation Logic
Fattest for Client Side MVC
๏ Can call Models
๏ Fire Presentation/Domain Level Events
๏ Handle Presentation Level Events

21. Controller
๏ Control Models
๏ Call Views
๏ Handle Domain Level Events

22. ModelView
Controller
Event
Operation & Reference

23. 同一レイヤー間の連携

24. Model to Model
๏ Can call associated Models
๏ Control other Models via Controller

25. View to View
๏ Can call child Views
๏ call other Views with Events

26. Controller to Controller
๏ Redirect Page
change hash fragment
๏ notify by Events

27. 固有の問題

28. Client Side Logic
VS
Server Side Logic

29. Not Easy
๏ Better push them to the Server Side
๏ Hide inside Models
Don t made barrel full of sewage!
๏ Better not to call Models getter/setter

30. Pull-based MVC
VS
Push-based MVC

31. Pull-based MVC is OK
๏ Mobile Display is small
๏ Push-based MVC seems to be more
useful on Tablet？
Model mixin Ext.mixins.Observable

32. ServerとClientの協調

33. Cross Check Validation
๏ Generate Model fields and
validations from Server code
๏ Fields and Validations are Protocol

34. テストはどうするのか？

35. Test is necessary
๏ Writing Unit Tests for Models
๏ Writing Scenario Tests for Views
๏ Keep Easy, Keep Small,
Keep Loose coupling

36. ドメインオブジェクトを
如何に構築するか？

37. My Questions
๏ Server Side Domain Client Side Domain
๏ Different viewpoints?
๏ Different techniques?

38. Finally
๏ MVC is NOT a Silver Bullet
๏ Building Service Layer?
๏ Try Other Patterns?
MVVM or MVP or ...
๏ Keep thinking

39. Thank you for listening :-)