Minimal MVC in JavaScript

2,110 views

Published on

It introduces a way to implement a minimal MVC in JavaScript. This is the talk @ OSDC 2014.

[1]: http://osdc.tw/2014/

Published in: Software
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,110
On SlideShare
0
From Embeds
0
Number of Embeds
427
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Minimal MVC in JavaScript

  1. 1. MINIMAL MVC IN JAVASCRIPT MOSKY
  2. 2. MOSKY 2
  3. 3. MOSKY • Python Charmer at Pinkoi 2
  4. 4. MOSKY • Python Charmer at Pinkoi • An author of some Python packages 2
  5. 5. MOSKY • Python Charmer at Pinkoi • An author of some Python packages • A speaker of some confs, PyCon TW/JP mostly 2
  6. 6. MOSKY • Python Charmer at Pinkoi • An author of some Python packages • A speaker of some confs, PyCon TW/JP mostly • A Python instructor 2
  7. 7. MOSKY • Python Charmer at Pinkoi • An author of some Python packages • A speaker of some confs, PyCon TW/JP mostly • A Python instructor • mosky.tw 2
  8. 8. MOSKY 3
  9. 9. MOSKY • “Uh … Python …?” 3
  10. 10. MOSKY • “Uh … Python …?” • Yes, but, today I am going to talk about JavaScript. 3
  11. 11. MOSKY • “Uh … Python …?” • Yes, but, today I am going to talk about JavaScript. • kind of thinking FE from BE aspect. 3
  12. 12. OUTLINE 4
  13. 13. OUTLINE • What is MVC? 4
  14. 14. OUTLINE • What is MVC? • Status Quo 4
  15. 15. OUTLINE • What is MVC? • Status Quo • Make It Better in Minimal Cost 4
  16. 16. OUTLINE • What is MVC? • Status Quo • Make It Better in Minimal Cost • Conclusion 4
  17. 17. WHAT IS MVC?
  18. 18. 6
  19. 19. 6 Model
  20. 20. 6 View Model
  21. 21. 6 View Model Controller
  22. 22. 6 View Model Controller User
  23. 23. 6 View Model Controller User Uses
  24. 24. 6 View Model Controller User Manipulates Uses
  25. 25. 6 View Model Controller User Update Manipulates Uses
  26. 26. 6 View Model Controller User Update Sees Manipulates Uses
  27. 27. 6 View Model Controller User Update Sees Manipulates Uses Sync
  28. 28. 7
  29. 29. 7
  30. 30. 7 Manipulates
  31. 31. 7 Manipulates Updates
  32. 32. 8 View Model Controller User Update Sees Manipulates Uses Sync
  33. 33. STATUS QUO
  34. 34. 10
  35. 35. 10 DOM
 (View) JS
 (Controller) User
  36. 36. 10 DOM
 (View) JS
 (Controller) User Uses
  37. 37. 10 DOM
 (View) JS
 (Controller) User Data Uses
  38. 38. 10 DOM
 (View) JS
 (Controller) User Data Uses Sync
  39. 39. 10 DOM
 (View) JS
 (Controller) User Data Uses Sync Update
  40. 40. 10 DOM
 (View) JS
 (Controller) UserSees Data Uses Sync Update
  41. 41. UPDATE FROM SERVER DATA
  42. 42. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server
  43. 43. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User
  44. 44. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1
  45. 45. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1 N:1
  46. 46. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1 N:1 Nothing
  47. 47. GET DATA FROM DOM
  48. 48. GET DATA FROM DOM K1 M After Modifying
  49. 49. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying
  50. 50. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1
  51. 51. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1
  52. 52. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing
  53. 53. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing Code, code, code!
  54. 54. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing Code, code, code! From nothing!
  55. 55. 13 DOM
 (View) JS
 (Controller) UserSees Data Uses Sync Update
  56. 56. MAKE IT BETTER
 IN MINIMAL COST
  57. 57. 15 View Controller UserSees Uses
  58. 58. 15 View Controller UserSees Uses ModelUpdate Manipulates Sync
  59. 59. 15 View Controller UserSees Uses ModelUpdate Manipulates Sync Make all 1:1!
  60. 60. THE RECIPE 16
  61. 61. THE RECIPE • Use Class in JavaScript; 16
  62. 62. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller 16
  63. 63. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller • Make function call as message passing 16
  64. 64. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller • Make function call as message passing • Message is what changed. 16
  65. 65. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller • Make function call as message passing • Message is what changed. • And the util-level libs you love. 16
  66. 66. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller • Make function call as message passing • Message is what changed. • And the util-level libs you love. • (My favor is just JQuery and Underscore.js) 16
  67. 67. THE CONSTRUCTOR var Clock = function (obj) { ! /* Model */ this._model = {}; ! /* View */ this.$view = $(Clock.template); this.$i = $this.view.find('.i'); this.$o = $this.view.find('.o'); // ... ! ! /* Controller */ var _this = this; this.$view.on('change', '.i', function () { _this.controller('i-changed'); }); // ... ! // Apply defaults this.model(obj); }; 17
  68. 68. THE MODEL Clock.prototype.model = function (model_changes) { ! // First, optionally filter the fake changes out. ! // Second, asyncly send the changes to server; // and update model/view by the response. ! // Finally, update the changes into this._model. ! this.view(view_changes); }; 18
  69. 69. THE VIEW Clock.prototype.view = function (view_changes) { ! // Pattern I if (view_changes.o !== undefined) { this.$o.val(view_changes.o); } ! // Pattern II this.$n.val(this._model.o); }; 19
  70. 70. THE CONTROLLER Clock.prototype.controller = function (event_name) { switch (event_name) { case 'i-changed': this.model({o: _this.$i.val()}); break; } }; ! ! 20
  71. 71. 21 View Model Controller User Update Sees Manipulates Uses Sync
  72. 72. REAL CASES 22
  73. 73. REAL CASES • The Memo App 22
  74. 74. REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js 22
  75. 75. REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js • The Web for ZIPCodeTW 22
  76. 76. REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js • The Web for ZIPCodeTW • https://github.com/moskytw/zipcodetw/blob/ dev/web/static/finder.js 22
  77. 77. REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js • The Web for ZIPCodeTW • https://github.com/moskytw/zipcodetw/blob/ dev/web/static/finder.js • http://zipcode.mosky.tw/ 22
  78. 78. CONCLUSION
  79. 79. CONCLUSION 24
  80. 80. CONCLUSION • MVC is a powerful pattern, and not hard. 24
  81. 81. CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. 24
  82. 82. CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. • Don’t be limited by the frameworks! 24
  83. 83. THE LAST THING!
  84. 84. PYCON APAC 2014 (IN TAIWAN) REGISTRATIONS ARE OPEN!
  85. 85. CONCLUSION 27
  86. 86. CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. • Don’t be limited by the frameworks! 27
  87. 87. CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. • Don’t be limited by the frameworks! • mosky.tw 27
  88. 88. CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. • Don’t be limited by the frameworks! • mosky.tw • Any questions? 27

×