Dojo Basics Js UserGroup Chicago

Post on 09-May-2015

2.213 views 1 download

description

A quick introduction to dojo.

Transcript of Dojo Basics Js UserGroup Chicago

dojo.intro

@wolframkriesing @uxebu

Freitag, 20. November 2009

JavaScript AJAX

CSSdojo

Browser

OpenSourceWeb2.0FrontEnd

Usability

UserExperience

django

mobilewidgets

Freitag, 20. November 2009

established in 2004

dojo.history

Freitag, 20. November 2009

Freitag, 20. November 2009

•netWindows successor

•483 CLAs, 99 CCLAshttp://www.dojotoolkit.org/dojo-contributors

•10+ people fulltime (IBM, SitePen, ...)

•current: 1.4 beta

Freitag, 20. November 2009

http://demos.dojotoolkit.org/demos/skew/

Freitag, 20. November 2009

http://demos.dojotoolkit.org/demos/faces/

Freitag, 20. November 2009

http://demos.dojotoolkit.org/demos/mojo/

Freitag, 20. November 2009

• high quality (not a weekend hack)

• small+big (dojo.js gzipped 28k, there is more)

• package, build system (clean, custom size)

• continuously optimized core (dojo.*)

• very active community (#dojo, MLs, forums)

• core+widgets+extras (well structured)

why dojo?

Freitag, 20. November 2009

dojo.basics

• namespaced (dojo.lang, dojo.fx, dijit.form)

• dojo, dijit, dojox, yournamespace

• dojo.* - core library

• dijit.* - common, stable widgets

• dojox.* - extended/experimental

Freitag, 20. November 2009

out of the box

Freitag, 20. November 2009

out of the box• dojo.*

• lang, string, array, dom, coords, data, back, behaviour, date, dnd, i18n, io, rpc, ...

• dijit.* - stable widgets

• form.*, Editor, Tree, Dialog, ProgressBar, ...

• dojox.* - dojo extended (experimental)

• charting, cometd, crypto, data, dtl, fx, gfx, grid, lang, math, widget, ...

Freitag, 20. November 2009

•dojo.require(), dojo.declare(), dojo.provide()

•dojo.hitch(), dojo.mixin(), dojo.extend()

•dojo.[dis]connect(), dojo.publish/subscribe()

•dojo.xhr(), dojo.xhrPost(), dojo.xhrGet()

•dojo.forEach(), dojo.map(), dojo.filter()

•dojo.toJson(), dojo.isString(), dojo.isIE, ...

•dojo.data

Freitag, 20. November 2009

dojo.by.example

•dojo.byId(„myButtonId“)

•dojo.query( „#id, .class, .class:hover“ )

•dojo.toJson( {one:[1,2,3], two:“zwei“} )

•dojo.xhr( {url:“/home“, content:{foo:“bar“}} )

•dojo.hitch( this, „onClick“ )

•dojo.fx.wipeOut( {node:el, duration:1000} )

Freitag, 20. November 2009

Freitag, 20. November 2009

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

Freitag, 20. November 2009

you write

you get

written vs. rendered

Freitag, 20. November 2009

build

Freitag, 20. November 2009

Freitag, 20. November 2009

@wolframkriesing @uxebu

thx, Q&A

Freitag, 20. November 2009