Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Minimal MVC in Javascript

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/

Mosky Liu

April 12, 2014
Tweet

More Decks by Mosky Liu

Other Decks in Programming

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?

  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) 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