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. MOSKY • Python Charmer at Pinkoi • An author of

    some Python packages • A speaker of some confs, PyCon TW/JP mostly 2
  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
  3. 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
  4. MOSKY • “Uh … Python …?” • Yes, but, today

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

    I am going to talk about JavaScript. • kind of thinking FE from BE aspect. 3
  6. OUTLINE • What is MVC? • Status Quo • Make

    It Better in Minimal Cost • Conclusion 4
  7. 6

  8. 7

  9. 7

  10. 10

  11. UPDATE FROM SERVER DATA { k1: "…", k2: "…", k3:

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

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

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

    "…" } Data from Server K1 M Show to User 1:1 N:1 Nothing
  15. GET DATA FROM DOM { k1: "…", k2: "…", k3:

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

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

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

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

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

    "…" } Data to Server K1 M After Modifying 1:1 N:1 Nothing Code, code, code! From nothing!
  21. THE RECIPE • Use Class in JavaScript; • Write 3

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

    methods as Model, View, and Controller • Make function call as message passing 16
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. THE CONTROLLER Clock.prototype.controller = function (event_name) { switch (event_name) {

    case 'i-changed': this.model({o: _this.$i.val()}); break; } }; ! ! 20
  30. 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
  31. 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
  32. CONCLUSION • MVC is a powerful pattern, and not hard.

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

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

    • Add model unit to simplify problem. • Don’t be limited by the frameworks! 27
  35. 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
  36. 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