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

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 :-)