Advanced JavaScript Design

Introduction

Programming JavaScript is simple and hard. It is simple as the language itself is simple and you only need a few hours to learn to program with it. It is hard as it takes ages to program strong libraries (like JQuery, Knockout, PhoneJS …) with that simple language.

In my point of view, the capability of JavaScript programming can be divided into 3 levels: Selector, MVVM and MVC. We will go through each level in the following content.

Selector Level

The simplest sample of selector level looks like the following:

<script type="text/javascript">
    $('#btn').click(function () {
        …
});
</script>
…
<input type="image" src="http://www.codeproject.com/images/button.png" id="btn" /> 

This piece of JavaScript code is used to connect with HTML elements via selector. The target of selector level is to use the selector properly and wisely. However, I don’t mean this level is not that important. In fact, the selector level is the entry point to high level. The more you understand selector, the higher level you can go.

MVVM Level

Here we are using knockoutJS as an example.

<script type="text/javascript">
    var viewModel = {
        name: ko.observable("max")
    };
</script>
…
</p>Name: <span data-bind="text:name"></span></p>

In MVVM level, we have the ability to decouple the data (model) with its view. To be specific, it is a typical observer design pattern. The ko object is an observer collection. When it gets the change of the data, it will notify the change to all the observers. The best part of MVVM is that it will be extremely powerful when you are using AJAX to combine it with a remote data source.

MVC Level

So far, we have mentioned the View and Model. However, both of them are not that perfect, or well defined. Although we can use selector to update the view when some events happen and we can synchronize the data using MVVM, they have some weaknesses. Specifically, the weakness of selectors is that they are not very constructive, which means two selectors can lie in different parts of the code file. And, the shortage of the MVVM is it is less control on the view.

Here, we introduce the MVC to improve our design.

No doubt that the most important part of MVC framework is to define the Controller. As a typical controller, it is the bridge of model and view. Normally, in other languages, like ASP.NET or iOS, the controller knows its views beforehand. However, controller in JavaScript doesn’t know. To achieve this, it needs the help of selector to fill in the list of views. Then, the controller will be ready.

We will see a piece of code which is using PhoneJS.

<script type="text/javascript">
window.AppNamespace = {};                                            
$(function () {       
AppNamespace.app = new DevExpress.framework.html.HtmlApplication({                                                                                
namespace: AppNamespace, navigationType: "simple"
});
AppNamespace.app.router.register(":view/:name", { view: "home", name: '' });                         
AppNamespace.app.navigate();    
});
AppNamespace.home = function () {                                                                                                                                                       
var viewModel = {
message: ko.observable('Welcome!'),
name: ko.observable(''),
sayHello: function () {
this.message("Hello " + this.name() + '!');
            }
….
<div data-options="dxView : { name: 'home', title: 'Home' } " >     
<div data-options="dxContent : { targetPlaceholder: 'content' } " >     
<h1 data-bind="text: message"></h1>             
Enter your name: <div data-bind="dxTextBox: { value: name }" style="width: 200px"></div>
<div data-bind="dxButton: { text: 'Say Hello', clickAction: sayHello }"></div>
</div>

AppNamespace.app is the controller and AppNamespace.home is the model. They are using data-options and data-bind as keywords for the selector. The controller will build the list of all ‘data-options’ elements and bind them to the view. Meanwhile, the controller will setup the list of all ‘data-bind’ elements (with knoutoutJS) and bind them to the view as well as the model.

One interesting thing is the ‘View’. We can find that it is unlike the typical one, ‘<input class="dx-editbox-input" type="text" placeholder="">’. So, let’s dive into it.

<div data-bind="dxTextBox: { value: name }" style="width: 200px"></div>

VS

<input class="dx-editbox-input" type="text" placeholder="">

It is the magic of a word named ‘render’, which translates the dxTextBox to input type=”text” after selecting the elements, creating them and then rendering them to the final stage which can be recognized by the standard HTML browsers.

Summary

Up until now, we have a picture on how things go forward. Each level is of the same importance. The difference is the learning curve. Selector level is 500 lines; MVVM level is 5000 lines; and the MVC level is 20000 lines.