Minimal MVC in JavaScript
88
MINIMAL MVC IN JAVASCRIPT MOSKY
-
Upload
mosky-liu -
Category
Technology
-
view
1.562 -
download
1
description
It introduces a way to implement a minimal MVC in JavaScript. This is the talk @ OSDC 2014. [1]: http://osdc.tw/2014/
Transcript of Minimal MVC in JavaScript
MINIMAL MVC IN JAVASCRIPTMOSKY
MOSKY
2
MOSKY
• Python Charmer at Pinkoi
• An author of some Python packages
• A speaker of some confs, PyCon TW/JP mostly
2
MOSKY
• Python Charmer at Pinkoi
• An author of some Python packages
• A speaker of some confs, PyCon TW/JP mostly
• A Python instructor
2
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
MOSKY
3
MOSKY
• “Uh … Python …?”
3
MOSKY
• “Uh … Python …?”
• Yes, but, today I am going to talk about JavaScript.
3
MOSKY
• “Uh … Python …?”
• Yes, but, today I am going to talk about JavaScript.
• kind of thinking FE from BE aspect.
3
OUTLINE
4
OUTLINE
• What is MVC?
4
OUTLINE
• What is MVC?
• Status Quo
4
OUTLINE
• What is MVC?
• Status Quo
• Make It Better in Minimal Cost
4
OUTLINE
• What is MVC?
• Status Quo
• Make It Better in Minimal Cost
• Conclusion
4
WHAT IS MVC?
6
6
Model
6
View
Model
6
View
Model
Controller
6
View
Model
Controller
User
6
View
Model
Controller
User Uses
6
View
Model
Controller
User
Manipulates
Uses
6
View
Model
Controller
User
Update Manipulates
Uses
6
View
Model
Controller
User
Update
Sees
Manipulates
Uses
6
View
Model
Controller
User
Update
Sees
Manipulates
Uses
Sync
7
7
7
Manipulates
7
Manipulates
Updates
8
View
Model
Controller
User
Update
Sees
Manipulates
Uses
Sync
STATUS QUO
10
10
DOM(View)
JS(Controller)
User
10
DOM(View)
JS(Controller)
User Uses
10
DOM(View)
JS(Controller)
User
Data
Uses
10
DOM(View)
JS(Controller)
User
Data
Uses
Sync
10
DOM(View)
JS(Controller)
User
Data
Uses
Sync
Update
10
DOM(View)
JS(Controller)
UserSees
Data
Uses
Sync
Update
UPDATE FROM SERVER DATA
UPDATE FROM SERVER DATA
{ k1: "…", k2: "…", k3: "…"}
Data from Server
UPDATE FROM SERVER DATA
{ k1: "…", k2: "…", k3: "…"}
Data from Server
K1
M
Show to User
UPDATE FROM SERVER DATA
{ k1: "…", k2: "…", k3: "…"}
Data from Server
K1
M
Show to User
1:1
UPDATE FROM SERVER DATA
{ k1: "…", k2: "…", k3: "…"}
Data from Server
K1
M
Show to User
1:1
N:1
UPDATE FROM SERVER DATA
{ k1: "…", k2: "…", k3: "…"}
Data from Server
K1
M
Show to User
1:1
N:1
Nothing
GET DATA FROM DOM
GET DATA FROM DOM
K1
M
After Modifying
GET DATA FROM DOM
{ k1: "…", k2: "…", k3: "…"}
Data to Server
K1
M
After Modifying
GET DATA FROM DOM
{ k1: "…", k2: "…", k3: "…"}
Data to Server
K1
M
After Modifying
1:1
GET DATA FROM DOM
{ k1: "…", k2: "…", k3: "…"}
Data to Server
K1
M
After Modifying
1:1
N:1
GET DATA FROM DOM
{ k1: "…", k2: "…", k3: "…"}
Data to Server
K1
M
After Modifying
1:1
N:1
Nothing
GET DATA FROM DOM
{ k1: "…", k2: "…", k3: "…"}
Data to Server
K1
M
After Modifying
1:1
N:1
Nothing
Code, code, code!
GET DATA FROM DOM
{ k1: "…", k2: "…", k3: "…"}
Data to Server
K1
M
After Modifying
1:1
N:1
Nothing
Code, code, code!
From nothing!
13
DOM(View)
JS(Controller)
UserSees
Data
Uses
Sync
Update
MAKE IT BETTER IN MINIMAL COST
15
View Controller
UserSees Uses
15
View Controller
UserSees Uses
ModelUpdate Manipulates
Sync
15
View Controller
UserSees Uses
ModelUpdate Manipulates
Sync
Make all 1:1!
THE RECIPE
16
THE RECIPE
• Use Class in JavaScript;
16
THE RECIPE
• Use Class in JavaScript;
• Write 3 methods as Model, View, and Controller
16
THE RECIPE
• Use Class in JavaScript;
• Write 3 methods as Model, View, and Controller
• Make function call as message passing
16
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
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
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
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
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
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
THE CONTROLLER
Clock.prototype.controller = function (event_name) {
switch (event_name) {
case 'i-changed':
this.model({o: _this.$i.val()});
break;
}
};
!
!
20
21
View
Model
Controller
User
Update
Sees
Manipulates
Uses
Sync
REAL CASES
22
REAL CASES
• The Memo App
22
REAL CASES
• The Memo App
• https://github.com/moskytw/memo-app/blob/master/memo/static/memo.js
22
REAL CASES
• The Memo App
• https://github.com/moskytw/memo-app/blob/master/memo/static/memo.js
• The Web for ZIPCodeTW
22
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
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
CONCLUSION
CONCLUSION
24
CONCLUSION
• MVC is a powerful pattern, and not hard.
24
CONCLUSION
• MVC is a powerful pattern, and not hard.
• Add model unit to simplify problem.
24
CONCLUSION
• MVC is a powerful pattern, and not hard.
• Add model unit to simplify problem.
• Don’t be limited by the frameworks!
24
THE LAST THING!
PYCON APAC 2014 (IN TAIWAN)REGISTRATIONS ARE OPEN!
CONCLUSION
27
CONCLUSION
• MVC is a powerful pattern, and not hard.
• Add model unit to simplify problem.
• Don’t be limited by the frameworks!
27
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
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
