knockout mvvm-m4-slides
DESCRIPTION
Playlists : https://www.youtube.com/watch?v=46SzBBZMD3I&list=PLLQgkMVoGtcultfA127vh0wKnls62Qv5d&index=2TRANSCRIPT
![Page 1: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/1.jpg)
JavaScript Patterns: Spaghetti to Ravioli
John Papa @john_papa
http://johnpapa.net
![Page 2: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/2.jpg)
Outline
Spaghetti and Ravioli Separation Patterns Avoiding Globals
Object Literals Module Pattern
Anonymous Closures Private/Public Members Immediate Invocation
Revealing Module Pattern Refinements to Module Pattern
![Page 4: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/4.jpg)
Problems with Spaghetti Code
Mixing of Concerns No clear separation of functionality or purpose Variables/functions added into global scope Potential for duplicate function names Not modular Not easy to maintain No sense of a “container”
![Page 5: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/5.jpg)
Some Examples of Spaghetti Code with JavaScript
Script all over the page Objects are extended in many places in no discernible pattern Everything is a global function Functions are called in odd places Everything is a global Heavy JavaScript logic inside HTML attributes
Obtrusive JavaScript http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
![Page 6: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/6.jpg)
Advantages of Ravioli Code
Objects encapsulate and decouple code Easy to extend and maintain Separation of Concerns
Variables/functions are scoped Functionality in closures
![Page 7: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/7.jpg)
Namespaces
var my = my || {};
Encapsulate your code under a namespace Avoid collisions First and easy step towards Ravioli’s
my.viewmodel = function(){ }
![Page 8: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/8.jpg)
DEMO
Namespaces and Separation
![Page 9: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/9.jpg)
Outline
Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
![Page 10: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/10.jpg)
Object Literals
my.viewmodel = { name: ko.observable(), price: function(x, y){ return x + y; } };
Benefits Quick and easy All members are available
Challenges “this” problems Best suited for simple view models and data
![Page 11: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/11.jpg)
DEMO
ViewModel as an Object Literal
![Page 12: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/12.jpg)
Outline
Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
![Page 13: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/13.jpg)
Module Pattern
Anonymous Closures Functions for encapsulation
Immediate function invocation
Private and public members
![Page 14: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/14.jpg)
Anonymous Closure
(function () { }());
Function expression instead of function definition Wrapped in parens
Scoped All vars and functions are enclosed
![Page 15: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/15.jpg)
my.viewmodel = (function(){ var tempValue = 1; return { someVal: "john", add: function(x, y){ this.tempValue = x; return x + y; }; }; })();
Immediate Function Invocation
Create a module Immediately available
Immediate instantiation
![Page 16: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/16.jpg)
Private/Public Members
var my.viewmodel = (function(){ var privateVal = 3; return { publicVal: 7, add: function(x, y){ var x = this.publicVal + privateVal; return x + y; }; }; })();
Accessing private members with ‘this’
Private member
Public members
![Page 17: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/17.jpg)
The Module Pattern
Benefits: Modularize code into re-useable objects Variables/functions taken out of global namespace Expose only public members Hide plumbing code
Challenges: Access public and private members differently
![Page 18: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/18.jpg)
DEMO
ViewModel as a Module
![Page 19: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/19.jpg)
Outline
Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
![Page 20: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/20.jpg)
The Revealing Module Pattern
All the Benefits of the Module Patterns +
Makes it clear what is public vs private
Helps clarify "this"
Reveal private functions with different names
![Page 21: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/21.jpg)
Revealing
my.viewmodel = (function(){ var privateVal = 3, add: function(x, y){ return x + y; }; return { someVal: privateVal, add: add }; }; })();
Private members
Public members
![Page 22: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/22.jpg)
DEMO
ViewModel as a Revealing Module
![Page 23: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/23.jpg)
Summary
Spaghetti and Ravioli Avoid globals Avoid function spaghetti code Separation of presentation, structure, and behavior
3 ViewModel Patterns Object Literals Module Pattern Revealing Module Pattern
Spaghetti to Ravioli
![Page 24: Knockout mvvm-m4-slides](https://reader034.vdocuments.us/reader034/viewer/2022042602/559b7fc21a28abf9758b46e6/html5/thumbnails/24.jpg)
For more in-depth online developer training visit
on-demand content from authors you trust