Minimal MVC in JavaScript
2 likes2,702 views
The document outlines a presentation on implementing the Model-View-Controller (MVC) design pattern using JavaScript. It discusses the roles of the model, view, and controller, along with practical coding examples and a recipe for building an MVC framework. The conclusion emphasizes that MVC is a powerful pattern that simplifies problems and encourages flexibility beyond existing frameworks.
Minimal MVC in JavaScript
- 1. MINIMAL MVC IN JAVASCRIPT MOSKY
- 2. MOSKY 2
- 3. MOSKY • Python Charmer at Pinkoi 2
- 4. MOSKY • Python Charmer at Pinkoi • An author of some Python packages 2
- 5. MOSKY • Python Charmer at Pinkoi • An author of some Python packages • A speaker of some confs, PyCon TW/JP mostly 2
- 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. 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. MOSKY 3
- 9. MOSKY • “Uh … Python …?” 3
- 10. MOSKY • “Uh … Python …?” • Yes, but, today I am going to talk about JavaScript. 3
- 11. MOSKY • “Uh … Python …?” • Yes, but, today I am going to talk about JavaScript. • kind of thinking FE from BE aspect. 3
- 12. OUTLINE 4
- 13. OUTLINE • What is MVC? 4
- 14. OUTLINE • What is MVC? • Status Quo 4
- 15. OUTLINE • What is MVC? • Status Quo • Make It Better in Minimal Cost 4
- 16. OUTLINE • What is MVC? • Status Quo • Make It Better in Minimal Cost • Conclusion 4
- 17. WHAT IS MVC?
- 18. 6
- 19. 6 Model
- 20. 6 View Model
- 28. 7
- 29. 7
- 30. 7 Manipulates
- 33. STATUS QUO
- 34. 10
- 41. UPDATE FROM SERVER DATA
- 42. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server
- 43. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User
- 44. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1
- 45. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1 N:1
- 46. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1 N:1 Nothing
- 47. GET DATA FROM DOM
- 48. GET DATA FROM DOM K1 M After Modifying
- 49. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying
- 50. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1
- 51. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1
- 52. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing
- 53. GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing Code, code, code!
- 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!
- 56. MAKE IT BETTER IN MINIMAL COST
- 58. 15 View Controller UserSees Uses ModelUpdate Manipulates Sync
- 59. 15 View Controller UserSees Uses ModelUpdate Manipulates Sync Make all 1:1!
- 60. THE RECIPE 16
- 61. THE RECIPE • Use Class in JavaScript; 16
- 62. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller 16
- 63. THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller • Make function call as message passing 16
- 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. 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. 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. 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. 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. 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. THE CONTROLLER Clock.prototype.controller = function (event_name) { switch (event_name) { case 'i-changed': this.model({o: _this.$i.val()}); break; } }; ! ! 20
- 72. REAL CASES 22
- 73. REAL CASES • The Memo App 22
- 74. REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js 22
- 75. REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js • The Web for ZIPCodeTW 22
- 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. 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. CONCLUSION
- 79. CONCLUSION 24
- 80. CONCLUSION • MVC is a powerful pattern, and not hard. 24
- 81. CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. 24
- 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. THE LAST THING!
- 84. PYCON APAC 2014 (IN TAIWAN) REGISTRATIONS ARE OPEN!
- 85. CONCLUSION 27
- 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. 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. 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