COMPLETE TUTORIAL SERIES

Dojo 1.17.3 Tutorial

A complete, production-focused guide for senior developers — AMD module system, OOP with declare, Dijit widgets, dgrid, async Deferred, pub/sub, i18n, the build system, and three capstone applications.

10

Phases

3

Capstone Apps

300+

Pages

100+

Code Examples

20

Exercises

Prerequisites

JavaScript ES5

Closures, prototypes, this, callbacks, array methods. Phase 0 covers these in Dojo context.

HTML & CSS

Box model, positioning, specificity. Dijit's theme system builds on these fundamentals.

Browser DevTools

Console, network tab, element inspector. Phase 0 covers Dojo-specific DevTools patterns.

Basic OOP concepts

Inheritance, encapsulation, interfaces. Phase 2 maps these directly to dojo/_base/declare.

Suggested Learning Paths

Choose the path that matches your immediate goal:

Full course → Phase 0 → 1 → 2 → … → 9 → Capstone 1 → 2 → 3 → Appendix

Widgets fast-track → Phase 0 → Phase 2 (declare) → Phase 4 (Dijit) → Capstone 1

Data grids → Phase 3 (stores) → Phase 7 (dgrid) → Capstone 1 employee grid

Async / XHR → Phase 5 (Deferred) → Phase 6 (pub/sub) → Capstone 2 polling engine

Legacy app rescue → Appendix A.1 (top 20 gotchas) → Appendix A.2 (lifecycle card) → relevant phase

Core Phases

JS & HTML Foundations

Closures, prototypes, IIFE, ES5 array methods, Dijit theme structure, DevTools for Dojo debugging

ClosuresPrototypeDevTools

✓ Complete — 10 sections, debug exercise

AMD Module System

require(), define(), dojoConfig, loader plugins (text!, i18n!, domReady!), package config, lazy loading

AMDrequiredojoConfig

✓ Complete — 10 sections, 3-package demo

OOP with declare

Single/multiple inheritance, C3 MRO, this.inherited(), widget lifecycle (8 hooks), _TemplatedMixin, reactive setters

declareMixinsLifecycle

✓ Complete — 11 sections, jQuery→Dijit case study

DOM, Events & Data Binding

dojo/dom, dom-class, dom-style, dom-construct, dojo/on, handle groups, NodeList, dojo/store, dojo/Stateful

dojo/onstoreStateful

✓ Complete — 13 sections, live-filter demo

Dijit Widget Library

20+ form widgets, BorderContainer, TabContainer, StackContainer, AccordionContainer, Dialog, Menu, Tooltip, theme system

DijitBorderContainerDialog

✓ Complete — 16 sections, full CRUD dashboard

Async with Deferred

Deferred resolve/reject/progress, .then() chaining, .otherwise(), dojo/when, promise/all, dojo/request XHR, request/notify

DeferredXHRpromise/all

✓ Complete — 10 sections, retry exercise

Pub/Sub with dojo/topic

publish/subscribe, own() cleanup, naming conventions, request/response pattern, state bus, 5-module refactor case study

topicEvent BusDecoupling

✓ Complete — 8 sections, bus diagrams

dgrid Advanced Grid

OnDemandGrid, Selection, custom renderers, inline editor, tree, sort, pagination, dstore Trackable, filtering, bulk actions

dgriddstoreTrackable

✓ Complete — 12 sections, EmployeeGrid widget

i18n & Accessibility

NLS bundles, root + FR/JA overrides, runtime locale switch, date/number formatting, ARIA, keyboard nav, WCAG 2.1 AA checklist

✓ Complete — 11 sections, a11y audit script

Build System & Optimization

Build profiles, 3-layer strategy, shrinksafe vs closure, CSS optimization, customBase, staticHasFeatures, internStrings, CDN vs local

BuildLayerscustomBase

✓ Complete — 11 sections, full 3-layer profile

Capstone Applications

Enterprise HR Dashboard

BorderContainer shell, dgrid employee list with Observable store, Add/Edit Dialog CRUD, cross-panel pub/sub updates, i18n EN/FR, production build profile. Integrates Phases 2–9.

✓ Complete — 8 sections · 9 modules

Real-Time Data Monitor

Deferred polling engine, dojox/charting live line chart, threshold alert system via pub/sub, start/stop/reset controls, dojo/Stateful monitor state. Integrates Phases 5 & 6.

✓ Complete — 7 sections

Multi-Step Form Wizard

StackContainer navigation, per-step validation guards, dojo/store draft persistence, custom ProgressIndicator widget (_setXxxAttr), Deferred submit with error recovery and success Dialog.

✓ Complete — 7 sections · 10 modules

Reference

Reference & Cheat Sheets

Top 20 production gotchas · Widget lifecycle quick-reference card · 50+ AMD module cheat sheet · dojox module index · Dojo 1.x → modern migration table · Recommended tools

Gotchas Lifecycle Card AMD Cheat Sheet dojox Index Migration Guide

✓ Complete — 6 sections · 20 gotchas · 50+ modules listed