This post continues from the last post in learning JavaScript for building web applications. I assume you now have a working knowledge of the JavaScript language. We apply our knowledge of JavaScript to build web applications, applications that run in a web browser. These web applications also appear in Mac OS X with Widgets, some smartphone applications that use PhoneGap or HTML5, and probably other places too.
Web Application
As described previously, a web application is comprised of a model in HTML, view in CSS, and controller code in JavaScript. When JavaScript is run in a web browser, it provides an Application Programming Interface (APIs) for JavaScript. This API allows features of the model and web browser to be modified. The API provides access to HTML through a Document Object Model (DOM). For those who have programmed Windows Presentation Foundation or Android applications will notice a similar MVC separation: an XML model is modified using C#, VB, or JavaScript code. When creating a web application, the application needs to (1) modify the DOM and (2) respond to events, whether they are from the user or elsewhere.
Modifying the DOM
To modify the DOM and respond to events, a person can place JavaScript code interspersed with HTML. This works for few objects on a page, but it becomes messy as the HTML grows. Several libraries exist to tidy the code to modify the DOM.
Before we modify the DOM, I should note that JavaScript as a language still misses key features found in other language. Several code patterns often need to be reused, such as iterating an array. Additionally, support for JavaScript language features varies between browsers, so code that works in one browser won’t work in another. To address this problem, we can make use of libraries such as underscore.js.
Objects in the DOM are uniquely identified by element (body, form, input), style, or id. I will use jQuery, which is a popular library for accessing the DOM. As you will read soon, it is used by backbone.js.
Examples:
<body></body>
<span class=”important”></span>
<input id=”firstname”></input>
And corresponding query, using jQuery:
$(“body”)
$(“.important”)
$(“#firstname”)
Backbone.js: Front-End Model-View-Controller (MVC)
Now we are able to modify the DOM and respond to events using a MVC library. Two popular libraries are knockout.js and backbone.js. I will talk about backbone.js in this post because I have been using it for my projects. Backbone.js provides full separation between the DOM and JavaScript logic whereas knockout.js requires special markup within HTML. Backbone.js stems from a previous Ruby on Rails project, though it should work with any middle tier and back end. You should read about which library is more suitable for your use case.
Backbone.js provides several features to make web application easier to write. It provides “plumbing” so that each part of a web application is simple, and the combination result allows complex web applications to be built. Backbone.Events are triggered in other code and handled by anonymous functions that you write. A Backbone.Model creates an in-memory data structure that is used throughout the web application. One or more Backbone.Views access Backbone.Model to update the DOM representation. Backbone.Collection provides features to modify several related Backbone.Models at once. Arguably, some features such Backbone.Events should be part of JavaScript itself, but most of us can’t change the JavaScript specification.
I provided a high-level overview of the libraries required to build a web application. Now it is your turn to read the websites and try out some examples. Happy coding!