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...
Native Application like Components
Ext JS based Class System๏ Class-based OOP๏ Mix-in๏ Dependencies andDynamic Loading๏ Autogen getter/setter and more...Ext....
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/Bel...
View๏ Plain Ext JS ClassNOT HTML TemplateExt.define(MyApp.view.Welcome, {extend: Ext.Panel,config: {html: Welcome to my ap...
Controller๏ Routing withHash Fragments๏ References Views๏ Event HandlingExt.define(MyApp.controller.Users, {extend: Ext.ap...
Events๏ mixin Ext.mixin.Observable๏ call fireEvent methodExt.define(Employee, {mixins: [Ext.mixin.Observable],config: {full...
如何にスケールさせるか?
典型的な例
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 Lev...
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 Mod...
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.Obse...
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 coupl...
ドメインオブジェクトを如何に構築するか?
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 :-)
Upcoming SlideShare
Loading in...5
×

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

3,497

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,497
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. Sencha TouchのMVCについて∼スケールするアプリケーションをもとめて∼
  2. 2. Profile๏ Ariel Networks Inc.๏ @kiris๏ Server Side Engineer๏ Hate JavaScript :-(๏ ECMAScript is OK
  3. 3. Sencha TouchのMVCを中心に感想や意見を憶測を交えながらまとまりなく話します
  4. 4. Sencha Touchって何?
  5. 5. 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}]});
  6. 6. Native Application like Components
  7. 7. 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...);}});
  8. 8. More topics๏ Vendor Development๏ Supported DevicesiOS/Android/Black Berry/Windows Phone๏ Sass Supported๏ MVC Architecture
  9. 9. Sencha Touch MVC
  10. 10. 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 }]}});
  11. 11. 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});
  12. 12. 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);}});
  13. 13. 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);}});
  14. 14. 如何にスケールさせるか?
  15. 15. 典型的な例
  16. 16. ModelViewControllerData BindingsHTML BuildingsOtherReferenceData Flow
  17. 17. ModelViewControllerData BindingsHTML BuildingsOtherAfter half a year...
  18. 18. MVCの理解を深めよう
  19. 19. Model๏ Model Data Binder๏ Has Domain Logic๏ Fire Eventspush-based MVC
  20. 20. View๏ View HTML Template๏ Has Presentation LogicFattest for Client Side MVC๏ Can call Models๏ Fire Presentation/Domain Level Events๏ Handle Presentation Level Events
  21. 21. Controller๏ Control Models๏ Call Views๏ Handle Domain Level Events
  22. 22. ModelViewControllerEventOperation & Reference
  23. 23. 同一レイヤー間の連携
  24. 24. Model to Model๏ Can call associated Models๏ Control other Models via Controller
  25. 25. View to View๏ Can call child Views๏ call other Views with Events
  26. 26. Controller to Controller๏ Redirect Pagechange hash fragment๏ notify by Events
  27. 27. 固有の問題
  28. 28. Client Side LogicVSServer Side Logic
  29. 29. 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
  30. 30. Pull-based MVCVSPush-based MVC
  31. 31. Pull-based MVC is OK๏ Mobile Display is small๏ Push-based MVC seems to be moreuseful on Tablet?Model mixin Ext.mixins.Observable
  32. 32. ServerとClientの協調
  33. 33. Cross Check Validation๏ Generate Model fields andvalidations from Server code๏ Fields and Validations are Protocol
  34. 34. テストはどうするのか?
  35. 35. Test is necessary๏ Writing Unit Tests for Models๏ Writing Scenario Tests for Views๏ Keep Easy, Keep Small,Keep Loose coupling
  36. 36. ドメインオブジェクトを如何に構築するか?
  37. 37. My Questions๏ Server Side Domain Client Side Domain๏ Different viewpoints?๏ Different techniques?
  38. 38. Finally๏ MVC is NOT a Silver Bullet๏ Building Service Layer?๏ Try Other Patterns?MVVM or MVP or ...๏ Keep thinking
  39. 39. Thank you for listening :-)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×