How OOP JavaScript can be used to drive client side logic

This post is related to client side programing driven by Object Oriented JavaScript/jQuery and Backbonejs (JS Framework).
If you are not aware of what the JS Framework is, I highly recommend visiting this site http://todomvc.com/.

It is not a secret that JavaScript with jQuery, JSON, JS Frameworks and the REST services have such an influence in the web developement world nowdays that none can ignore them anymore.

Recently I had to create internal SharePoint-Hosted app where the application communicates with the SharePoint 2013 only trought the Client Side Object Model (or the REST/OData api). The huge amount of JavaScript code that I created within this app rised the question how to organize in a nice manner application logic, driven by JavaScript. Then I started research just to have the idea how the popular JavaScript Libraries (like jQuery) are writen and it turned that there are some ways that the JavaScript can be organized in Object Oriented manner. I was of course aware of the JS Frameworks such Backbonejs or Knockout.js are and how they may help me to bring some structured feel and look of the code. In fact we initially built the app with the help of Knockoutjs. Knockout is briliant when comes to bindings, but its purpose is not to organize your thousands lines of code in a nice manner (encapsulated for reusability). Yes it definitely has strengths there as well (you can reuse views and viewModels for example), but I was searching for object oriented approach do to this.

The idea to understand how the popular JavaScript Libraries (like jQuery) are writen led me on: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript. Very nice turotial.. good job mozila devs.
The internal Sharepoint-Hosted app is now organized in objects just like from the tutorial and this let me to reuse a Chart() object (created by me) 1000 of times around the app code and also I have used namespaces like approach (http://stackoverflow.com/questions/881515/javascript-namespace-declaration) to organize my code event better.

Even better way to organize the code may be achieved when using hybrid of the Object Oriented like JavaScript/jQuery objects with combination of MVC/MVP like JS Framework as the Backbonejs is (and even combined with Knockoutjs). Ofcourse additional amount of knowledge is needed to power such an app.

Last month I did two presentations related to the above topic.

The aim of the first was to show how Object Oriented JavaScript/jQuery can be used to drive the client side logic for ASP.NET WebAPI.
The aim of the second was to show how Backbonejs and jQuery can be used with the very same purpose.

Two samples were created and shared on https://github.com/Velkata/ASP.NET-WebAPI-OOPJavaScript-Sample, https://github.com/Velkata/ASP.NET-WebAPI-Backbonejs-Sample and the PowerPoint documents from the presentation are included as well.

Cheers,
Velin

Comments