Apr 11

Extension Events

By on April 11, 2014 9:41 am

When working in an event-driven environment such as the web, it is important to utilize tools that allow you to create succinct, easy-to-read code that’s extensible and flexible. One great mechanism that Dojo provides is the ability to use extension events.

What Are They?

Extension events are functions that are passed in lieu of an event type to dojo/on. The extension event function should accept a DOM node and an event listener. The function should encapsulate any logic related to the node and invoke the listener when appropriate. The most common case is adding a listener to a native DOM event (click, mouseover, etc.) with custom logic included that determines whether the handler is called or not.

Feb 25

Dojo FAQ: How can I conditionally load AMD modules?

By on February 25, 2014 7:31 pm


AMD: Beyond the Basics

If you’ve been using Dojo 1.7+, you know the basic method of loading modules with AMD:

], function (dom, query) {
	// dojo/dom and dojo/query modules are 
	// loaded and available for use

There are times when you may not know the specific modules you want to load during development. There are a few approaches that can be used to determine which modules to load dynamically at run-time.

Feb 13

Creating Dojo Widgets with Inline Templates

By on February 13, 2014 11:58 am

Many Dojo widgets make use of client-side templating for generating the UI. Template HTML files are brought in to the page with dojo/text, parsed and converted to DOM nodes, and placed on the page, allowing our code to make substitutions, instantiate widgets within the template, and hook up events and attach points. However, we may find ourselves dealing with markup generated on the server and delivered on the page that we want to enhance with Dojo. Luckily, it is quite simple to make a custom widget that uses its source node as the template, allowing us to use markup already on the page as the template for our widget.

Jan 6

Private Matters: Convention and Closures

By on January 6, 2014 11:10 am

Many object-oriented programming (OOP) languages provide a way to define private properties and methods. This allows objects to encapsulate functionality and state information. This encapsulation leads to a clear distinction between the internal implementation and a clean external interface.

However, JavaScript does not have a native mechanism for declaring private properties and methods, in the same sense that other object oriented languages do. But, there are a few techniques that we can use to achieve the same results.

Dec 31

The Definitive TypeScript Guide

By on December 31, 2013 3:19 pm

This article describes the features and functionality of TypeScript 1.0.

One of the newest and most interesting languages for large-scale RIA development is Microsoft’s TypeScript. TypeScript’s claim to fame is that it adds optional static typing and class-based OOP to JavaScript. In comparison to similar languages like CoffeeScript and Dart, TypeScript is unique because it is written as a superset of JavaScript—in other words, all JavaScript is already TypeScript. The language and compiler are open source and written in JavaScript, and the TypeScript team have taken great care to align the language’s extra features as closely as possible with what’s coming in EcmaScript 6, so it also provides developers with an easy path to start using some of these newer language features.

On the downside, TypeScript’s documentation currently consists of a few simple demos and a 148-page language specification—hardly an easy or friendly way to get started with such an exceptional language. This blog post aims to provide a complete guide for new and existing users of TypeScript, assuming you already have a reasonable knowledge of JavaScript and a basic understanding of how class-based inheritance works (as in Java, PHP, C#, etc.).

Dec 4

Persevere on Heroku

By on December 4, 2013 9:52 am

It is becoming increasingly popular to deploy Node.js-based applications to Node-friendly hosting services to take advantage of the pre-built, reliable, robust architecture and infrastructure these services provide. Persevere, a JavaScript server framework for developing RESTful applications on Node.js, is an excellent fit for these types of hosting services. In this post I will show you how easily a Persevere application can be built and deployed on one such service, Heroku, but the process can be easily replicated on other providers that offer similar functionality.

Dec 7

AMD Module and Local Variable Naming Conventions

By on December 7, 2012 1:33 am

Client-Side web application development is becoming more and more robust. There are many amazing tools and technologies available for creating an immersive and interactive user experience. With the demand from users rising, the importance of creating code efficiently is paramount. When working with Dojo and other AMD compatible tools, you can easily harness the power of writing very modular source code. Two common challenges you might face when working with AMD are choosing meaningful names for your modules and determining naming conventions for local variable references to your modules.

Dec 6

Learning Dojo 1.8

By on December 6, 2012 8:22 am

Since we last posted an article on Learning Dojo, things have changed dramatically. Dojo has become an early adopter of AMD, with a new build tool to match; there is a new grid; the documentation has been vastly improved, and there are tutorials galore!

In fact, there is so much information out there on learning Dojo, it might be overwhelming. In a way, Dojo 1.7′s migration to AMD amplifies the problem, in that many previously-published articles no longer reflect the most recent best practices. This post aims to start you off on the right foot by pointing to relevant up-to-date resources for getting started with — or catching up on — Dojo 1.8.

Why Dojo

10 Reasons your Projects Should use the Dojo Toolkit
Slides: Dojo 2.0: Modular, Mobile, and Reinventing Web App Development
Interview with Dojo Toolkit Co-creator Dylan Schiemann

Getting Started

Tutorial: Dojo Start – Answers many common questions asked by newcomers
Tutorial: Hello Dojo – Guides through the first steps in exploring Dojo

Transitioning from Dojo 1.6

Tutorial: Modern Dojo – Explains key differences between Dojo before and after 1.7
Slides: Moving to Dojo 1.7 and the path to 2.0 – Presents features new to Dojo 1.7 and up

AMD Resources

Tutorial: Defining Modules – Explains how to define and load modules, and configure the loader
AMD: The Definitive Source – Explains the reasoning and benefits of AMD
Slides: Modular JavaScript: AMD & CommonJS modules – Discusses the evolution of AMD
AMD API – Wiki containing AMD API specifications

Learning Dojo

Tutorial: Making Functions with hitch and partial – Explains execution context and how to control it
Tutorial: Classy JavaScript with dojo/_base/declare – Explains Dojo’s chief inheritance mechanism
Tutorial: Ajax with dojo/request – Introduces Dojo 1.8′s new Ajax API
Tutorial: Getting Started with Deferreds – Introduces Deferreds, crucial for asynchronous logic
Tutorial: Dojo Deferreds and Promises – Discusses Promises and their relation to Deferreds
Tutorial: Dojo Object Stores – Explains the dojo/store API, new since Dojo 1.6
Reference Guide: Dojo – Index of reference material for the Dojo package

Learning Dijit

Tutorial: Understanding _WidgetBase – Details the module forming the basis of all widgets
Tutorial: Layout with Dijit – Discusses Dijit’s layout widgets
Tutorial: Creating Template-based Widgets – Describes Dijit’s templating capabilities
Recipe: Creating a Custom Widget – Walks through implementing a widget
Reference Guide: Dijit – Index of reference material for the Dojo package

Developing Applications

Tutorial: Using dojo/hash and dojo/router – Discusses Dojo’s utilities for managing the browser hash
Recipe: Application Controller – enumerates an approach to writing a small app
Dojo Boilerplate – Provides a starting point for creating a Web application with Dojo
Tutorial: Getting Started with dojox/mobile – The first in a series of tutorials to build a mobile app

Build Tool Resources

Tutorial: Creating Builds – Thoroughly explains the various facets of a custom build
Working with Dojo and AMD in Production – Enumerates approaches to loading production builds
Reference Guide: The Dojo Build System – Definitive documentation on the new build system
Dojo Web Builder – An online tool for creating Dojo builds

Dojo Packages

Dojo Foundation Packages – Explains the role packages play in Dojo’s future
dgrid – Web site for dgrid, a Dojo Foundation package


As always, the Dojo community is the best around.  If you get stumped or have an advanced question, you can get more answers by leveraging the following resources:

If you find that a self-guided tour or community support is inadequate, SitePen also offers workshops taught by Dojo experts, as well as highly responsive support services.

Nov 16

Dive Into Dijit with AMD

By on November 16, 2012 2:00 am

One huge feature that sets the Dojo Toolkit apart from other JavaScript libraries is its UI component system: Dijit. A flexible, comprehensive collection of Dojo modules (complemented by corresponding resources like images, CSS files, etc.), Dijit allows you to create flexible, extensible, stylish widgets. To learn how to install, configure, and use basic Dijits within your web application, keep reading!