In my second post about single page web applications I want to talk about how to organize code. The first single page web applications we used Dojo. I was very attracted to the way they used modules. Each component in Dojo would be created in it’s own file called a module. The top of the module would have zero or more dojo.require statements which would indicate the current module’s dependencies. When loading the module dojo would execute these statements and load these dependencies and all of the transitive dependencies. You can visualize a dependency graph. The benefit of breaking up JavaScript into modules such as this is that it may, if done correctly, lead to much more organized cohesive code.
I thought this was great when I first learned about it. When most people think of JavaScript they recoil in horror at the thought of huge files containing poorly organized unrelated functions. If you view the source of many applications today you may still see that.
When I started working last year on my current project, I started researching modules. I came upon RequireJS. There are two main functions in RequireJS:
- require: Takes 2 arguments. The first argument is an array of dependencies where each dependency is a string name of a JavaScript file. The second argument is a call back function. The call back functions args should match the list of dependencies. RequireJS will pass the dependencies listed in the first parameter to the callback function in the second parameter. A file containing a require statement would be the main file loaded by your page and would typically bootstrap your application.
- define: Again takes two arguments just like require. An array of dependencies and a callback function. This has the same semantics as the require statement. Usually a require statement would reference one or modules created using define. Each JavaScript file should have one define statement. Define statements can contain dependencies on other modules containing their define statements with their own dependencies. Hence you end up with a web of dependencies.
To demonstrate, I’ve created a simple hello world application using RequireJS and Knockout here. The code is available on GitHub. This is just a very simple app. I am planning to write a more complicated app demonstrating knockout later.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" media="screen"/>
<script type="text/javascript" data-main="js/app/main/main" src="js/lib/require-jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="offset3 span5">
<form class="form-horizontal">
<div class="control-group">
<label for="name" class="control-label">Name</label>
<div class="controls">
<input type="text" id="inputName" placeholder="Enter your name to say hello" data-bind="value: name, valueUpdate: 'keyup'">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="offset5 span5">
<h1>Hello <span data-bind="text: name"></span></h1>
</div>
</div>
</div>
</body>
</html>
Line 7 above is where you include RequireJS. Notice the data-main property in the tag. This is where you reference your main application file that RequireJS will load. In this example, that file is main.js located in the js/app/main directory. That file is here:
requirejs.config({
baseUrl: "js"
});
require(["app/model/HelloWorldModel", "lib/knockout"],function(HelloWorldModel, ko){
var helloWorldModel = new HelloWorldModel();
ko.applyBindings(helloWorldModel);
});
The first statement on line 1 above is where the configuration of RequireJS is specified. It is just an object literal. In this simple example I am telling RequireJS to use the js directory as the base url. Without this statement RequireJS will try to resolve all urls relative to the directory of this script. On line 5 is the require statement. The first argument is the array of dependencies. Here it is a file called HelloWorldModel.js located in the js/app/model directory, and knockout.js located in the js/lib directory. The baseUrl property allows you to omit the js/ directory for each file, and you do not need to specify the .js file extension. The 2nd argument is a function callback that will be provided with the HelloWorldModel and knockout as the first and second arguments respectively. RequireJS will download these files and their dependencies and then provide these as arguments to the callback. The last statement binds the HelloWorldModel to the HTML page above.
The last file is HelloWorldModel:
define(["lib/knockout"],function(ko){
return function(){
var self = this;
self.name = ko.observable();
};
});
On line 1 is the define statement. Here the dependency list has only one entry which is knockout. Again RequireJS will locate this dependency and provide it to the 2nd argument which like the require statement is a function callback. Here we are defining a module that can be used as a dependency in other define or require statements. In this example I am defining a simple object that has one property called name. You notice that it is set to a value that is the result of a call to a function provided by Knockout called observable. This is the most basic functionality provided by Knockout. It is what allows for two way binding between your JavaScript model and your view.
The ko.applyBindings function in main.js bound the HelloWorldModel to the view shown in the first example. If you look at the view you notice there is a text box on line 17 as follows:
<input type="text" id="inputName" placeholder="Enter your name to say hello" data-bind="value: name, valueUpdate: 'keyup'">
The attribute data-bind=”value: name” bind this text box to the value in HelloWorldModel. Typing in the text box changes the value contained in the model automatically. To illustrate, the value of name is also bound to a span element. Typing in the text box automatically displays the value of the text box in the span just to the right of the word Hello:
<h1>Hello <span data-bind="text: name"></span></h1>
You can try the example here. I think it is a pretty simple example of how easy it is to bind values from your domain model to your view with very little code. I will dive more into Knockout in my next example
My first post can be found here.