Minimal MVC in Javascript

Slide 1

Slide 1 text

MINIMAL MVC IN JAVASCRIPT MOSKY

Slide 2

Slide 2 text

MOSKY 2

Slide 3

Slide 3 text

MOSKY • Python Charmer at Pinkoi 2

Slide 4

Slide 4 text

MOSKY • Python Charmer at Pinkoi • An author of some Python packages 2

Slide 5

Slide 5 text

MOSKY • Python Charmer at Pinkoi • An author of some Python packages • A speaker of some confs, PyCon TW/JP mostly 2

Slide 6

Slide 6 text

MOSKY • Python Charmer at Pinkoi • An author of some Python packages • A speaker of some confs, PyCon TW/JP mostly • A Python instructor 2

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

MOSKY 3

Slide 9

Slide 9 text

MOSKY • “Uh … Python …?” 3

Slide 10

Slide 10 text

MOSKY • “Uh … Python …?” • Yes, but, today I am going to talk about JavaScript. 3

Slide 11

Slide 11 text

MOSKY • “Uh … Python …?” • Yes, but, today I am going to talk about JavaScript. • kind of thinking FE from BE aspect. 3

Slide 12

Slide 12 text

OUTLINE 4

Slide 13

Slide 13 text

OUTLINE • What is MVC? 4

Slide 14

Slide 14 text

OUTLINE • What is MVC? • Status Quo 4

Slide 15

Slide 15 text

OUTLINE • What is MVC? • Status Quo • Make It Better in Minimal Cost 4

Slide 16

Slide 16 text

OUTLINE • What is MVC? • Status Quo • Make It Better in Minimal Cost • Conclusion 4

Slide 17

Slide 17 text

WHAT IS MVC?

Slide 18

Slide 18 text

Slide 19

Slide 19 text

6 Model

Slide 20

Slide 20 text

6 View Model

Slide 21

Slide 21 text

6 View Model Controller

Slide 22

Slide 22 text

6 View Model Controller User

Slide 23

Slide 23 text

6 View Model Controller User Uses

Slide 24

Slide 24 text

6 View Model Controller User Manipulates Uses

Slide 25

Slide 25 text

6 View Model Controller User Update Manipulates Uses

Slide 26

Slide 26 text

6 View Model Controller User Update Sees Manipulates Uses

Slide 27

Slide 27 text

6 View Model Controller User Update Sees Manipulates Uses Sync

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

7 Manipulates

Slide 31

Slide 31 text

7 Manipulates Updates

Slide 32

Slide 32 text

8 View Model Controller User Update Sees Manipulates Uses Sync

Slide 33

Slide 33 text

STATUS QUO

Slide 34

Slide 34 text

Slide 35

Slide 35 text

10 DOM  (View) JS  (Controller) User

Slide 36

Slide 36 text

10 DOM  (View) JS  (Controller) User Uses

Slide 37

Slide 37 text

10 DOM  (View) JS  (Controller) User Data Uses

Slide 38

Slide 38 text

10 DOM  (View) JS  (Controller) User Data Uses Sync

Slide 39

Slide 39 text

10 DOM  (View) JS  (Controller) User Data Uses Sync Update

Slide 40

Slide 40 text

10 DOM  (View) JS  (Controller) User Sees Data Uses Sync Update

Slide 41

Slide 41 text

UPDATE FROM SERVER DATA

Slide 42

Slide 42 text

UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server

Slide 43

Slide 43 text

UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User

Slide 44

Slide 44 text

UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1

Slide 45

Slide 45 text

UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1 N:1

Slide 46

Slide 46 text

UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3: "…" } Data from Server K1 M Show to User 1:1 N:1 Nothing

Slide 47

Slide 47 text

GET DATA FROM DOM

Slide 48

Slide 48 text

GET DATA FROM DOM K1 M After Modifying

Slide 49

Slide 49 text

GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying

Slide 50

Slide 50 text

GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1

Slide 51

Slide 51 text

GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1

Slide 52

Slide 52 text

GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing

Slide 53

Slide 53 text

GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing Code, code, code!

Slide 54

Slide 54 text

GET DATA FROM DOM { k1: "…", k2: "…", k3: "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing Code, code, code! From nothing!

Slide 55

Slide 55 text

13 DOM  (View) JS  (Controller) User Sees Data Uses Sync Update

Slide 56

Slide 56 text

MAKE IT BETTER  IN MINIMAL COST

Slide 57

Slide 57 text

15 View Controller User Sees Uses

Slide 58

Slide 58 text

15 View Controller User Sees Uses Model Update Manipulates Sync

Slide 59

Slide 59 text

15 View Controller User Sees Uses Model Update Manipulates Sync Make all 1:1!

Slide 60

Slide 60 text

THE RECIPE 16

Slide 61

Slide 61 text

THE RECIPE • Use Class in JavaScript; 16

Slide 62

Slide 62 text

THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller 16

Slide 63

Slide 63 text

THE RECIPE • Use Class in JavaScript; • Write 3 methods as Model, View, and Controller • Make function call as message passing 16

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

THE CONTROLLER Clock.prototype.controller = function (event_name) { switch (event_name) { case 'i-changed': this.model({o: _this.$i.val()}); break; } }; ! ! 20

Slide 71

Slide 71 text

21 View Model Controller User Update Sees Manipulates Uses Sync

Slide 72

Slide 72 text

REAL CASES 22

Slide 73

Slide 73 text

REAL CASES • The Memo App 22

Slide 74

Slide 74 text

REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js 22

Slide 75

Slide 75 text

REAL CASES • The Memo App • https://github.com/moskytw/memo-app/blob/ master/memo/static/memo.js • The Web for ZIPCodeTW 22

Slide 76

Slide 76 text

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/ﬁnder.js 22

Slide 77

Slide 77 text

Slide 78

Slide 78 text

CONCLUSION

Slide 79

Slide 79 text

CONCLUSION 24

Slide 80

Slide 80 text

CONCLUSION • MVC is a powerful pattern, and not hard. 24

Slide 81

Slide 81 text

CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. 24

Slide 82

Slide 82 text

CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. • Don’t be limited by the frameworks! 24

Slide 83

Slide 83 text

THE LAST THING!

Slide 84

Slide 84 text

PYCON APAC 2014 (IN TAIWAN) REGISTRATIONS ARE OPEN!

Slide 85

Slide 85 text

CONCLUSION 27

Slide 86

Slide 86 text

CONCLUSION • MVC is a powerful pattern, and not hard. • Add model unit to simplify problem. • Don’t be limited by the frameworks! 27

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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