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

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

Embed Size (px)

DESCRIPTION

 

Citation preview

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

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

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

Profile๏ Ariel Networks Inc.

๏ @kiris

๏ Server Side Engineer

๏ Hate JavaScript :-(

๏ ECMAScript is OK

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

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

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

Sencha Touchって何?

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

Native Application like Components

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

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

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

More topics๏Vendor Development

๏ Supported DevicesiOS/Android/Black Berry/Windows Phone

๏ Sass Supported

๏MVC Architecture

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

Sencha Touch MVC

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

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

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

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

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

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

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

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

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

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

典型的な例

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

ModelView

Controller

Data BindingsHTML Buildings

Other

Reference

Data Flow

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

ModelView

Controller

Data BindingsHTML Buildings

Other

After half a year...

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

MVCの理解を深めよう

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

Model๏Model ≠ Data Binder

๏Has “Domain Logic”

๏ Fire Eventspush-based MVC

Page 20: Sencha Touchの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

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

Controller๏Control Models

๏Call Views

๏Handle Domain Level Events

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

ModelView

Controller

Event

Operation & Reference

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

同一レイヤー間の連携

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

Model to Model๏Can call associated Models

๏Control other Models via Controller

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

View to View๏Can call child Views

๏ call other Views with Events

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

Controller to Controller๏Redirect Pagechange hash fragment

๏ notify by Events

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

固有の問題

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

Client Side LogicVS

Server Side Logic

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

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

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

Pull-based MVCVS

Push-based MVC

Page 31: Sencha Touchの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

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

ServerとClientの協調

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

Cross Check Validation๏Generate Model fields andvalidations from Server code

๏ Fields and Validations are Protocol

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

テストはどうするのか?

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

Test is necessary๏Writing Unit Tests for Models

๏Writing Scenario Tests for Views

๏Keep Easy, Keep Small, Keep Loose coupling

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

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

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

My Questions๏ Server Side Domain ≠ Client Side Domain

๏Different viewpoints?

๏Different techniques?

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

Finally๏MVC is NOT a Silver Bullet

๏Building Service Layer?

๏Try Other Patterns?MVVM or MVP or ...

๏Keep thinking

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

Thank you for listening :-)