Sencha TouchのMVCについて〜スケールするアプリケーションを求めて〜

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

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

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

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'
}
]
});

Native Application like Components

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...');
}
});

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

Model
๏ User-Deﬁned 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' }
]
}
});

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
});

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');
}
});

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

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

ModelView
Controller
Data BindingsHTML Buildings
Other
Reference
Data Flow

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

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

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

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

ModelView
Controller
Event
Operation & Reference

同一レイヤー間の連携

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

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

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

Client Side Logic
VS
Server Side Logic

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

Pull-based MVC
VS
Push-based MVC

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

Cross Check Validation
๏ Generate Model ﬁelds and
validations from Server code
๏ Fields and Validations are Protocol

テストはどうするのか？

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

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

My Questions
๏ Server Side Domain Client Side Domain
๏ Diﬀerent viewpoints?
๏ Diﬀerent techniques?

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

Sencha TouchのMVCについて〜スケールするアプリケーションを求めて〜

Recommended

More Related Content

What's hot (20)

Similar to Sencha TouchのMVCについて〜スケールするアプリケーションを求めて〜 (20)