Upcoming SlideShare
×

# Knockout mvvm-m4-slides

692 views

Published on

Published in: Education, Technology
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
692
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
6
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Knockout mvvm-m4-slides

1. 1. JavaScript Patterns: Spaghetti to Ravioli John Papa @john_papa http://johnpapa.net
2. 2. 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
3. 3. Function Spaghetti Code - Wikipedia: http://jpapa.me/spaghetticode
4. 4. 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”
5. 5. 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
6. 6. Advantages of Ravioli Code  Objects encapsulate and decouple code  Easy to extend and maintain  Separation of Concerns   Variables/functions are scoped Functionality in closures
7. 7. Namespaces  Encapsulate your code under a namespace  Avoid collisions  First and easy step towards Ravioli’s var my = my || {}; my.viewmodel = function(){ }
8. 8. DEMO Namespaces and Separation
9. 9. Outline     Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
10. 10. Object Literals  Benefits  Quick and easy  All members are available  Challenges  “this” problems  Best suited for simple view models and data my.viewmodel = { name: ko.observable(), price: function(x, y){ return x + y; } };
11. 11. DEMO ViewModel as an Object Literal
12. 12. Outline     Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
13. 13. Module Pattern  Anonymous Closures  Functions for encapsulation  Immediate function invocation  Private and public members
14. 14. Anonymous Closure  Function expression instead of function definition  Wrapped in parens  Scoped  All vars and functions are enclosed (function () { }());
15. 15. Immediate Function Invocation  Create a module  Immediately available my.viewmodel = (function(){ var tempValue = 1; return { someVal: "john", add: function(x, y){ this.tempValue = x; return x + y; }; }; })(); Immediate instantiation
16. 16. Private/Public Members Private member var my.viewmodel = (function(){ var privateVal = 3; return { publicVal: 7, add: function(x, y){ var x = this.publicVal + privateVal; return x + y; }; }; })(); Public members Accessing private members with ‘this’
17. 17. 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
18. 18. DEMO ViewModel as a Module
19. 19. Outline     Spaghetti and Ravioli Object Literals Module Pattern Revealing Module Pattern
20. 20. 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
21. 21. Revealing my.viewmodel = (function(){ var privateVal = 3, add: function(x, y){ return x + y; }; return { someVal: privateVal, add: add }; }; })(); Private members Public members
22. 22. DEMO ViewModel as a Revealing Module
23. 23. 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
24. 24. For more in-depth online developer training visit on-demand content from authors you trust