Take Your JavaScript to the Next Level
You’ve probably seen or suffered a JavaScript horror story or two. The web application you were working on needed some code on the client side, so a few functions with some JavaScript will do it. Then you are asked to add more functionality, and before you know it, hundreds of lines of code are smashed together in a web page. You could try to move this code back to the server, but it would make the page slower and add more load on the server.
But JavaScript isn't going away any time soon. It’s the world's most ubiquitous computing runtime, so it's time we learned to accept and embrace JavaScript rather than fighting it. JavaScript's C-like syntax makes it appear to be an ordinary procedural language, which is misleading because JavaScript has more in common with functional languages like Lisp than with C or Java. It has arrays instead of lists and objects instead of property lists. Functions are first class. JavaScript is the lingua franca of the web, ignore it at your peril.
Why Single Page Applications?
A way to embrace JavaScript and make it workable for medium to large client application is to use the Single Page Application (SPA) paradigm. In a SPA, all necessary client code (HTML, JavaScript, and CSS) is retrieved with a single page load, or when needed. The page does not reload at any point in the process (think of Gmail). Interaction with the single page application often involves dynamic communication with the web server behind the scenes. This architecture makes the client code more responsive and your web application as close as possible to a client application (i.e. WPF).
Another advantage of having all you client code and resources loaded up front and less dependency on the server is it would make your application easier to convert to a hybrid mobile app if the need arises in the future.
This doesn’t have to mean that your whole application sits in one big page. As long as you can separate functionality into multiple areas, then you could have one SPA per area or module. For example, a system that includes Recruiting, Operation, and Logistics, could have three separate SPAs.
Now, having all this JavaScript code and associated resources together could make things more difficult unless we use a good SPA framework. Among the most popular ones are Angular, Backbone and Durandal. Let’s talk about Durandal.js and when it is the best option for implementing SPA.
Why Durandal.js?
If you have been doing ASP.NET MVC development lately, you may have used or noticed a new open source library included in the project called Knockout.js. Many developers are using it to simplify their JavaScript code when it comes to data binding. It’s based on Model - View - ViewModel (MVVM) architecture, which is the way you developed in WPF or Silverlight.
Using Knockout.js is a good first step to make your client code cleaner and to follow good practices. But if you want to really embrace SPA and your application’s functionality is growing, you could hit Knockout limitations quickly (lack of routing and navigation on the client side and the need to load and reference JavaScript modules in your application). If you want to build on top of your Knockout skills, you can use Durandal.js which is designed to fill these gaps. Otherwise the best move would be to start from scratch and rewrite your client code in a SPA framework like Angular.
Durandal.js is an open source framework for writing SPA in JavaScript. What makes it different than, let’s say, Angular, is that it has not been written from scratch. Instead it is based in several existing libraries such as Knockout for data binding, jQuery for DOM manipulation, and Require.js for modularization. You’re probably very familiar with jQuery, so let’s discuss the other main components of Durandal.
Knockout
A common scenario of web applications is the need to show data on the page that could be edited by the user and keep it in sync with the data on the client. This is where Knockout shines; it gives you responsive display and editor user interfaces with a clean underlying data model. Anytime you have sections of the UI that updates dynamically (e.g., changing depending on the user’s actions or when an external data source changes), Knockout can help keep these two pieces in sync easily.
Knockout also helps you structure your JavaScript code using MVVM in a similar way that ASP.NET MVC allows structuring your server side application following the MVC pattern (Model – View – Controller). Among the benefits of architecting your client code using MVVM are Separation of Concerns, testability, and maintainability, which are all important considerations for any medium to large size applications.
In the MVVM architecture used by Knockout and Durandal you have:
Model: Definition of your data objects, such as Sales Orders, Customers, etc.
View: This is the HTML markup of your page. Using the HTML data-bind tag, Knockout binds the data in the associated model with the HTML code keeping both in sync automatically.
ViewModel: This is the JavaScript code that acts as the glue between your data (Model) and your View and also houses the code for UI related commands, such as handlers of button clicks (i.e. Save, Cancel, etc.)
Even if you don’t see the need to go full-blown SPA, give Knockout a try. It will make your client code and your life better.
Require
Another common scenario in dealing with growing JavaScript code bases is that the number of code modules and dependencies between them start to grow exponentially. For example, your main.js module needs third party libraries, such as Knockout and jQuery, plus custom modules, such as utilities, backend data integration, and models. Require.js is a JavaScript library that can help.
First, it defines a module as a way to encapsulate a piece of code into a useful unit and how to expose its public functionality and/or values. Think of it as the definition of an object where its methods (functions) and properties (variables) are private (encapsulated) unless they are returned, which is the equivalent of defining them as public. Then, if a module has references to other modules (being third party libraries and/or custom modules), Require would handle it for you, like a Dependency Injection library for JavaScript. And if the referenced modules are not loaded in the browser yet, it will get those modules asynchronously for you.
To close, if you need to simplify and improve your JavaScript code, and you have WPF/Silverlight experience, test out Knockout. If you want to take it to the next level adding modularization and MVVM to your client code, give Durandal a try.
In my next blog post, we will apply the concepts that we’ve been discussing, plus take a deeper dive into Durandal, highlighting features such as routing, navigation, and composition.