Minimal MVC in Javascript

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

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

Transcript

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?
19. 6 Model
20. 6 View Model
21. 6 View Model Controller
22. 6 View Model Controller User
23. 6 View Model Controller User Uses
24. 6 View Model Controller User Manipulates Uses
25. 6 View Model Controller User Update Manipulates Uses
26. 6 View Model Controller User Update Sees Manipulates Uses
27. 6 View Model Controller User Update Sees Manipulates Uses Sync
30. 7 Manipulates
31. 7 Manipulates Updates
32. 8 View Model Controller User Update Sees Manipulates Uses Sync
33. STATUS QUO
35. 10 DOM
 (View) JS
 (Controller) User
36. 10 DOM
 (View) JS
 (Controller) User Uses
37. 10 DOM
 (View) JS
 (Controller) User Data Uses
38. 10 DOM
 (View) JS
 (Controller) User Data Uses Sync
39. 10 DOM
 (View) JS
 (Controller) User Data Uses Sync Update
40. 10 DOM
 (View) JS
 (Controller) User Sees Data Uses Sync Update
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!
55. 13 DOM
 (View) JS
 (Controller) User Sees Data Uses Sync Update
56. MAKE IT BETTER
 IN MINIMAL COST
57. 15 View Controller User Sees Uses
58. 15 View Controller User Sees Uses Model Update Manipulates Sync
59. 15 View Controller User Sees Uses Model Update 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
71. 21 View Model Controller User Update Sees Manipulates Uses Sync
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