It introduces a way to implement a minimal MVC in JavaScript. This is the talk @ OSDC 2014. [1]: http://osdc.tw/2014/

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

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

28. 7

29. 7

30. 7
Manipulates

31. 7
Manipulates
Updates

32. 8
View
Model
Controller
User
Update
Sees
Manipulates
Uses
Sync

33. STATUS QUO

34. 10

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)
UserSees
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)
UserSees
Data
Uses
Sync
Update

56. MAKE IT BETTER
IN MINIMAL COST

57. 15
View Controller
UserSees Uses

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

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