Is it just fancy?

On the 18th of May I held a session about JavaScript Patterns during the first SharePoint Saturday in Milan. I felt that the session was great but you know what the speakers think is always wrong.
When I got feedback I realized that the topic of the session was ok but the attendees didn’t understand why they should write good JavaScript code.

That don’t really surprise me because I had some discussions about the same topic but with C# instead of JavaScript.
Indeed when you talk with a lazy C# dev he/she can understand why they should use polymorphism instead of having 10 unrelated classes with maybe
3 copies of the same function!?

Why!???!?!

And if in C# the mess is remedied by the language itself, because it needs namespaces and classes, in JavaScript you are totally without control.

If you are a SharePoint dev and you don’t like JavaScript I’m sorry for you because the future of SP is JavaScript and JavaScript is the presence of the web since 1994.
So maybe it’s time for you to change your job because you unable to write code for the Web and for the SP2013 Apps.

Microsoft is pushing JavaScript and Azure technology so we have to learn about it if you are not yet!!!!

What about JS is very useful for the future of devs?

IMHO you have to learn 3 JS patterns from scratch:

- Closure
- Class
- Module

Why?

Let me provide some examples:

1 - You need a business function. Usually you write code inside a page/app/web part:

        function MyBusinessFunc() {
            a = 5;

            a += 5;
            
            // do job
        }

and then you need the same function in another page/app/web part.
What do you do? Copy&Paste in the second page, off course!
But what is the problem in doing it in this way?

1 – if your business logic changes you have to change it in 2 or more scripts
2 – the function has a GLOBAL scope attached on the global ‘window’ object
3 – the variable ‘a’ has a GLOBAL scope

What solution can I apply?

One of the most important patterns that you have in JavaScript the Module Pattern.
The implementation of this pattern is easy. For example if we want our business function wrapped with this pattern we could write:

var SDF = SDF || {};

SDF.Utils = {
    MyBusinessFunc: function () {
        var a;

        a = 5;

        a += 5;

        // do job
    }
};

the first line says “if the global variable SDF doesn’t exist then create it otherwise use it”.
Then we extend our object with the property Utils where inside we have the method MyBusinessFunc.

Differences?
This is what our ‘window’ object looks like without a Module Patten:

and this is with the Module Pattern

 

and what if we need to keep some logics separated?

If we keep in mind to define our variable with the keyword var and we use the Module Pattern our JavaScript code can became: tidy, reusable, and maintainable.

If you don’t want start from scratch you can use these files: http://sdrv.ms/ZcWODQ

enjoy