Minimal MVC in JavaScript
2 likes2,701 views
It introduces a way to implement a minimal MVC in JavaScript. This is the talk @ OSDC 2014. [1]: http://osdc.tw/2014/
Ad
More Related Content
What's hot (20)
Viewers also liked (7)
Ad
Similar to Minimal MVC in JavaScript (20)
Ad
More from Mosky Liu (6)
Recently uploaded (20)
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