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

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

on

  • 3,462 views

 

Statistics

Views

Total Views
3,462
Views on SlideShare
2,674
Embed Views
788

Actions

Likes
4
Downloads
5
Comments
0

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 :-)