Over the past few years, Javascript has matured from an "amateur’s programming language" into a full-fledged platform. Projects like Google Chrome and JQuery have helped elevate the language into a serious platform for delivering applications.
On the server side, projects like Google’s V8 show off Javascript’s prowess and power beyond the browser. Building on top of V8, Node.js leverages sever-side Javascript to allow for incredibly powerful, scalable software. Unfortunately, what isn’t included in the box with Node.js is the ability to leverage the powerful DOM capabilities built into nearly every browser that exists today. Enter our latest Arc90 Lab tool, JSDOM.
Jsdom is a CommonJS implementation of the W3C Document Object Model (DOM) designed to work with Node.js. It is intended to be platform independent and as minimal/light as possible while adhering to the W3C DOM specifications.
Why build this?
One of the first things that a front-end developer coming to a server-side Javascript platform notices is the lack of a window and/or document object. Without a browser environment it is impossible to run the frameworks and libraries that we have all come to know and love. JSDOM provides such a browser environment making it easy load external scripts and execute them in the context of a browser Window on the server.
By allowing both the server and the browser to interpret and manipulate the DOM, a host of new possibilities arise. For example, graceful degradation from rich AJAX-style experiences to simpler page-driven experiences is now much easier with JSDOM. In addition, powerful server-side DOM manipulation (e.g. to extract or replace certain elements depending on certain conditions) is now possible.
How does it work?
Getting started with JSDOM is quite simple. You will need node.js and the JSDOM library, and of course, a basic understanding of Javascript.
The following example shows how to create a DOM Window, load the jQuery framework, and run some code – right on the server:
var html = '
<html>\
<head>\
</head>\
<body>\
<h1>Hello World</h1>\
<p>This is a <em>stupid simple</em> example</p>\
</body>\
</html>\
';
// create a new window, with the above markup
var window = require('jsdom').jsdom(html).createWindow(),
// create a new script tag to load up jQuery
script = window.document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.4.2.js';
// when jQuery finishes loading
script.onload = function() {
// Since this is not a browser we need to specify the window that jQuery has
// been added to
// Output: 'H1 Contents: Hello World'
console.log("H1 Contents:", window.jQuery('h1').text());
// do a simple replace on the `em` text above
window.jQuery('p em').text('silly');
// Output: 'P Contents: This is a silly example'
console.log("P Contents:", window.jQuery('p').text());
};
// Append the element to the head element of the document
window.document.head.appendChild(script);
Installation
JSDOM’s source code is hosted on github along with examples, use cases, and other useful information. You may also use NPM to install JSDOM by typing the following in your terminal `npm install jsdom`
License
This library is licensed under the MIT Open Source license.
Acknowledgement
This ambitious project is the brainchild of Arc90 lead engineer Elijah Insua.
Discuss
If you have questions about JSDOM or would just like to share your thoughts, you can do so at the Arc90 blog.
