Dojo: Beautiful Web Apps, Fast

Gabe Hamilton

Updated for dojo 1.7.2

Gabe Hamilton

Web Developer: Grails, Java, C#, others

For the past 10 years that has meant a lot of
javascript.
Send your dojo questions to
gabehamilton@gmail.com

What is Dojo?

A javascript toolkit

For doing things like this...

Demos
http://demos.dojotoolkit.org/demos/
Map data (in mobile)

http://demos.dojotoolkit.org/demos/mobileGeoCharting/demo.html

Images

http://demos.dojotoolkit.org/demos/cropper/demo.html

Widgets

http://demos.dojotoolkit.org/demos/mail

Demo sites
Stocker http://persevere.sitepen.com/stocker.html
DataChart, data stores, events
http://demos.dojotoolkit.org/demos/mail/
Widgets: The sort of thing we tend to use dojo for
http://demos.dojotoolkit.org/demos/castle/
With a different look, Accordion widget, FishEye widget, some content panes
http://demos.dojotoolkit.org/demos/flashCards/
Timers, svg,
http://sitepen.github.com/sp-dnd-demo/4-dnd.html
Drag & Drop, Title panes

Or if your name is Bruce Lee

What would be a real challenge?

How could we prove that Rich Web Apps have
arrived?

Well, you could build a desktop environment...

http://www.lucid-desktop.org/demo/
http://localhost/lucid

60 mins of Dojo
Live coding start using dojo today
How can you use dojo?
How dojo is organized.
Dojo core - dojo
Widgets

- dijit

Cool stuff - dojox

Datastores & Dojo Grid

Resources

Not covered in this talk

Only summarizing what is in

dojo core

dijit

dojox

Won't go into detail

Dojo tools: builds, DOH (unit testing)

Dojo class structure and inheritance

Touch of Death

Where is the Dojo?

http://dojotoolkit.org

Or for your html page

<script src="
http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
"></script>

dojo.js

dojo.js 47kb
or use async mode aka dojo nano 3.8kb

Uncompressed for development

dojo.js.uncompressed.js
or download the source
http://dojotoolkit.org/download/

Documentation

Tutorials
http://dojotoolkit.org/documentation/

API docs
http://dojotoolkit.org/api/

Reference Guide
http://dojotoolkit.org/reference-guide/1.7/index.html

Live Coding Demo

2 Paths

Markup
djConfig=parseOnLoad: true
<div dojoType=dijit.layout.TabContainer/>

Javascript
var tc = new dijit.layout.TabContainer();
tc.startup();

Markup demo
<div dojoType="dijit.layout.TabContainer"
style="width:80%; height: 500px">
<div dojoType="dijit.layout.ContentPane"
title="dojo core">core here</div>
<div dojoType="dijit.layout.ContentPane"
title="dijit"> great widgets</div>
<div dojoType="dijit.layout.ContentPane"
title="dojox">#winning</div>
</div>

Javascript demo
require(["dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/domReady!"],
function(TabContainer, ContentPane) {
var tc = new TabContainer({
style: "height: 500px; width: 80%;"
}, "iWishIWereTabbed");
var c = new ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(c);
var c2 = new ContentPane({
title: "Drinks",
content: "We have drinks."
});
tc.addChild(c2);
tc.startup();
});

About Dojo

Started in 2004 as a project at Informatica

Now is a 501(c)6, the Dojo Foundation

Open Source: Choice of BSD or AFL

Version 1.7.2

Who is Dojo
Individuals: Anyone who signs a CLA can be a
contributor.
Including some who work for:
Mozilla, IBM, Google, Oracle, PIXAR, Redhat...
Companies can sign a company CLA for their employees who
contribute to dojo.
Dojo contains several contributed code bases: nWidgets,
Burstlib, f(m), TurboGrid, Sizzle (from jQuery).

Commercial support available from SitePen.

When / How to use Dojo

Rich Internet Applications

Desktop style and One Page apps

Mixed Martial Arts

use it alongside jQuery, YUI, etc

Organize your javascript tangle with the dojo

package system aka AMD aka require.js

With JQuery

They collaborate on CSS selector libraries that

can be swapped in and out.
Many jQuery projects are hosted by the Dojo
Foundation
JQuery compatiblity layer: run jQuery UI on
dojo

With Node.js

Both use the same CommonsJS package

management and Asynchronous Module
Definitions (AMD) for loading.
Dojo can be run directly in node.js rather than
in a browser to provide GUI components.
Dojo build system now uses node.js

In toolkits
dojotoolkit.org
/features/integrations
Other projects

version

GWT (Tatami)

1.3.2

Grails plugin

1.7.2

For Minimalists

Async mode
Fully asynchronous, run code when your require
statement is done loading.

3.8kb
Just require and define

Great for mobile or non dojo applications

Modules: Require and Define

Namespace system
require issues a request for the file. Files get
cached like any http request.
define(dosug.examples.jackalope);
dojo.declare(dosug.examples.jackalope, null,
{
// body of new object

});

dojo.registerModulePath(dosug, ../dosug);

Modules: file structure

File structure matches require statements

dojo/
dijit/
layout/
TabContainer.js
dojox/

Dojo core

Basic Browser self Defense

dojo.byId

array indexOf

DRY Lots of handy javascript functions

isArray

trim

addClass

Dojo core
World spanning power. Itty bitty living space

effects

events

xhr (XmlHttpRequest)

json

dojo.query

Browser detection

Dijit

Widget library

Accessible, Internationalizable
High Contrast mode
Gracefully degrade in older browsers
Right to Left text

dijit.form

dijit.layout

Dijit: Themes

Themes:

Claro

blue

Tundra

white

Nihilo

most basic

Soria

light yellow and orange?

All are subtle, designed to work with existing look.

Want something flashier? Easy to override, custom
themes available on internet.
No themeroller. jQuery wins this round.

Dojox

I know secret-kung-fu

Video / Graphics

Charting

RSS

Advanced Datastores and Offline storage

dojox.grid.DataGrid

dojox.charting.DataChart

Datastores: dojo.data

Client side object to hold data

Basically an array of items, with lots of functionality
wrapped around it.

Support for many types of data

Easiest way to start is with JSON

Datastores: JSON

JavaScript Object Notation

var myObject = {
firstName: 'Gabe',
lastName: 'Hamilton',
favorite-color: 'blue... no, red' };

var myArray =
[ myObject, {firstName: 'Bob'}];

Datastores: dojo.data.api

dojo.data.api defines basic operations

Read
Write
Identity
Notification

ItemFileReadStore implements Read and

Identity
ServiceStore implements all 4

Datastores: dojox.data

CSVStore

XMLStore

ServiceStore

QueryReadStore

JsonRestStore

AtomReadStore

ServiceStores based on public API

Flickr, S3, Wikipedia, Google, Persevere, etc...

dojox.data.JsonRestStore
var store = new dojox.data.JsonRestStore({
target: "/users/",
idAttribute: "id"

});

Put, Post, Delete, Get

[ user: { name: Gabe, id: 1 },
user: { name: Bob, id: 2 } ]

dojox.grid.DataGrid Demo

Other Resources

http://www.slideshare.net/sitepen/top-waysdojo-can-improve-your-mapping-app
https://www.ibm.com/developerworks/mydevel
operworks/bookmarks/html?
sort=date&tag=dojo&lang=en

Resources

http://dojotoolkit.org

http://dojotoolkit.org/documentation

Great Examples

http://livedocs.dojotoolkit.org/

http://sitepen.com/blog/category/dojo

Amazon search has 94 book results for dojo

javascript of which the top 8 were books just
on dojo.

Acknowlegements
Thanks to the photographers of the following Creative
Commons pictures
http://commons.wikimedia.org/wiki/File:Zen_Dojo_Sarbacana1.jpg
http://commons.wikimedia.org/wiki/File:Demonstrating_Kung_Fu_at_Daxiangguo_Monestary
,_Kaifeng,_Henan.JPG
http://commons.wikimedia.org/wiki/File:Shadow_Karate_Kick.jpg
http://commons.wikimedia.org/wiki/File:Reloading_tools.jpg
http://commons.wikimedia.org/wiki/File:Grue_migration_Lake_Agmon_Hula_Valley.JPG

Questions

gabehamilton@gmail.com