Is it just fancy 2? (JavaScript Patterns)

In my last articles I forgot to share a nice post of Sahil Malik where he shows us the problems that you can have when you use global variable in JavaScript:

http://blah.winsmarts.com/2013-5-SharePoint_2013_-_JavaScript_-and-amp;_jQuery_big_booboo_to_watch_out_for.aspx

The example is very nice because you can see how many problem you can have just with the $ global variable when you use JQuery in SharePoint.

Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern, Pattern

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

SharePoint Saturday Slides and Examples

Hi guys,

Following you can find my slides and links to the JS Examples:

Slides: http://www.slideshare.net/Salvodif/sharepoint-saturday-18-may-2013

1. Comparision: http://jsfiddle.net/Salvodif/d46LM/
2. Prototype: http://jsfiddle.net/Salvodif/ZqFUq/
3. Clouse Pattern: http://jsfiddle.net/Salvodif/xKL93/
4. Class Pattern: http://jsfiddle.net/Salvodif/me8pp/
5. Module Pattern: http://jsfiddle.net/Salvodif/qGBHS/
6. Chain Pattern: http://jsfiddle.net/Salvodif/V5KsY/
7. Decorator Pattern: http://jsfiddle.net/Salvodif/uFLNC/

Enjoy :)

SharePoint Saturday has landed in Italy

Hi all,

Finally in Italy we’ve got SharePoint Saturday thanks to Marco Rizzi.

SharePoint Saturday is a free event on SharePoint of course and for the first edition I’m going to present a session on JavaScript Patterns.

So this is the agenda: http://spsevents.org/worldwide/Milan/Pages/Agenda.aspx

These are the speakers: http://spsevents.org/worldwide/Milan/Pages/Speakers.aspx

This is the Facebook page: https://www.facebook.com/SharepointSaturdayItaly

And if you want to book a ticket you can do so from this link: http://spsitaly-efbevent.eventbrite.it/

I’ll see you there!!!

How to debug a content for knockout

One of the most boring thing a developer have to do is debugging and it’s very painful when there are thousand of JavaScript library on your page. And if you are an user of Knockoutjs you could have problem to binding the data on your View.

A good way to see your object on your page, to understand if the data is correct and what could be the error, is print the object is a piece of HTML.

So in deeply it is not hard to understand, following is a piece of my view:

<div>
    Debug: <input type="checkbox" data-bind="checked: debug" /> <label data-bind="text: debugMsg"></label>
</div>

<table>
   <thead>
       <tr>
           <th>Name</th>
           <th>Color</th>
           <th>Product models</th>
           <th>List Price</th>
           <th>Qty</th>
           <th></th>
           <th></th>
           <!-- ko if: $root.debug -->
           <th></th>
           <!-- /ko -->
       </tr>
   </thead>

<!-- ..... -->



<!-- ko if: $root.debug -->
<td>
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</td>
<!-- /ko -->

 

The label is not useful but I keep it just for DEMO purpose. To bind this two variables you need something like this:

 

self.debug = ko.observable(false);
self.debugMsg = ko.computed(function () {
    return self.debug() === true ? "We are in == DEBUG MODE ==" : "";
});

that’s it