• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sencha TouchのMVCについて 〜スケールするアプリケーションを求めて〜

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






Total Views
Views on SlideShare
Embed Views



6 Embeds 788

http://kiris.hatenablog.com 751
https://twitter.com 21
https://t.co 7
https://www.facebook.com 7
https://abs.twimg.com 1
https://m.facebook.com&_=1367369771351 HTTP 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • Sencha TouchのMVCについて∼スケールするアプリケーションをもとめて∼
    • Profile๏ Ariel Networks Inc.๏ @kiris๏ Server Side Engineer๏ Hate JavaScript :-(๏ ECMAScript is OK
    • Sencha TouchのMVCを中心に感想や意見を憶測を交えながらまとまりなく話します
    • Sencha Touchって何?
    • JavaScirpt Framework for MobileExt.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 andDynamic 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/CustomExt.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 TemplateExt.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 HandlingExt.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 methodExt.define(Employee, {mixins: [Ext.mixin.Observable],config: {fullName: },constructor: function(config) {this.initConfig(config);},quitJob: function() {this.fireEvent(quit);}});
    • 如何にスケールさせるか?
    • 典型的な例
    • ModelViewControllerData BindingsHTML BuildingsOtherReferenceData Flow
    • ModelViewControllerData BindingsHTML BuildingsOtherAfter half a year...
    • MVCの理解を深めよう
    • Model๏ Model Data Binder๏ Has Domain Logic๏ Fire Eventspush-based MVC
    • View๏ View HTML Template๏ Has Presentation LogicFattest 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
    • ModelViewControllerEventOperation & 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 LogicVSServer 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 MVCVSPush-based MVC
    • Pull-based MVC is OK๏ Mobile Display is small๏ Push-based MVC seems to be moreuseful 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 :-)