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

4,298 views
4,503 views

Published on

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

No Downloads
Views
Total views
4,298
On SlideShare
0
From Embeds
0
Number of Embeds
1,466
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×