Upload
yoshiaki-iwanaga
View
3.791
Download
2
Embed Size (px)
DESCRIPTION
Citation preview
Sencha TouchのMVCについて~スケールするアプリケーションをもとめて~
Profile๏ Ariel Networks Inc.
๏ @kiris
๏ Server Side Engineer
๏ Hate JavaScript :-(
๏ ECMAScript is OK
Sencha TouchのMVCを中心に感想や意見を憶測を交えながらまとまりなく話します
Sencha Touchって何?
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 DevicesiOS/Android/Black Berry/Windows Phone
๏ Sass Supported
๏MVC Architecture
Sencha Touch MVC
Model๏User-Defined FieldsString/Integer/Float/Boolean
๏Data BindingsAJAX/REST/Localstorage/JSON-P
๏AssociationshasMany/BelongsTo
๏ValidationsPresence/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 ClassNOT 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 withHash 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 ‘fireEvent’ 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...
MVCの理解を深めよう
Model๏Model ≠ Data Binder
๏Has “Domain Logic”
๏ Fire Eventspush-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 Pagechange hash fragment
๏ notify by Events
固有の問題
Client Side LogicVS
Server Side Logic
Not Easy๏Better push them to the Server Side
๏Hide inside ModelsDon’t made barrel full of sewage!
๏Better not to call Models getter/setter
Pull-based MVCVS
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
ServerとClientの協調
Cross Check Validation๏Generate Model fields andvalidations 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
๏Different viewpoints?
๏Different techniques?
Finally๏MVC is NOT a Silver Bullet
๏Building Service Layer?
๏Try Other Patterns?MVVM or MVP or ...
๏Keep thinking
Thank you for listening :-)