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

Sharepoint 2013 – How to share contents between Apps

Usually, in the previous versions of SharePoint, if you had to deploy 2 or more web parts to one or more servers you had to deploy the shared content to a shared container like the _layouts directory for each server. The same goes for 2 or more SharePoint Applications.
Let me draw an example:

Due to the new SharePoint 2013 model, if you have the same problem as before, you cannot deploy the contents in the _layouts directory if you want to release a 100% compliant Office 365 app.
So, for example, if I developed 4 apps in my DEV environment and I used a mixed solution like deploying a Farm WSP with all my shared contents in the _layouts directory these coming to be unusable on SharePoint online.
The best options to share your contents are to adopt one of the following two:

• SharePoint Web Application
• Azure
  • ASP.NET Web Application
  • Blob storage
    • CDN

So if you start to use one of those options you'll start to implement an architecture like this:



SharePoint Web Application
The idea behind is something that comes from the old versions of SharePoint. You could deploy a web application and have it in an assets library, anonymously accessible if you need, where the web parts or the apps can access to download them.

This solution is restricted because the boundary is the SharePoint farm where the SharePoint Web Application lives.
If you have an app installed outside your farm (and it should be the usually), you have to configure your farm to give the access from outside. That makes it hard to maintain, and also unsafe for your LAN.

Azure

ASP.NET Web Application
I picked up this idea from Chris O'Brien. He uses this solution as his choice.
The easy idea is to use a public web project on azure. So you should have a web site published on Azure:

and through VS 2012 you can deploy your assets:



Blob storage and CDN
Windows Azure Blob is a service for storing large amounts of unstructured data that can be accessed from anywhere in the world via HTTP or HTTPS.For more information about the blob storage you can read the following link: http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage-v17/
The CDN is an option of the blob storage and that is a global solution for delivering high-bandwidth content by caching blobs and static content: http://www.windowsazure.com/en-us/develop/net/common-tasks/cdn/
To upload the files on your blob storage you can develop your own client or you can use something that exists already, like this: http://azurestorageexplorer.codeplex.com/
You just have to create a blob container on your Azure, for this example I created the images container:
this is my blob service with the CDN option enabled:



and this is my images container:

cool eh!? :)
Ok now that your Share Content Environment is ready you can refer to it with code.

Some considerations
Sharing contents between apps shouldn't be usual but could be if you have to develop more than one app for a client project (same logos, same css, shared javascript!).
IMHO these are the best solutions you could implement.
If you have some other ideas, please let me know ;)