Dojo: Beautiful Web Apps, Fast

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

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>

title="dijit"> great widgets</div>

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 } ]

Other Resources

http://www.slideshare.net/sitepen/top-ways-
dojo-can-improve-your-mapping-app

https://www.ibm.com/developerworks/mydevelo
perworks/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,_

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

Dojo: Beautiful Web Apps, Fast

Dojo: Beautiful Web Apps, Fast

More Related Content

What's hot (20)

Similar to Dojo: Beautiful Web Apps, Fast (20)

More from Gabriel Hamilton (14)

Recently uploaded (20)

Dojo: Beautiful Web Apps, Fast