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

  • 1.
    Dojo: Beautiful WebApps, Fast Gabe Hamilton Updated for dojo 1.7.2
  • 2.
    Gabe Hamilton WebDeveloper: Grails, Java, C#, others For the past 10 years that has meant a lot of javascript. Send your dojo questions to gabehamilton@gmail.com
  • 3.
    What is Dojo? Ajavascript toolkit For doing things like this...
  • 4.
    Demos http://demos.dojotoolkit.org/demos/ Map data (inmobile) http://demos.dojotoolkit.org/demos/mobileGeoCharting/demo.html Images http://demos.dojotoolkit.org/demos/cropper/demo.html Widgets http://demos.dojotoolkit.org/demos/mail
  • 5.
    Demo sites Stockerhttp://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
  • 6.
    Or if yourname 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
  • 7.
    60 mins ofDojo 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
  • 8.
    Not covered inthis 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
  • 9.
    Where is theDojo? http://dojotoolkit.org Or for your html page <script src=" http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js "></script>
  • 10.
    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/
  • 11.
    Documentation Tutorials http://dojotoolkit.org/documentation/ API docs http://dojotoolkit.org/api/ Reference Guide http://dojotoolkit.org/reference-guide/1.7/index.html
  • 12.
  • 13.
    2 Paths Markup djConfig=”parseOnLoad: true” <divdojoType=”dijit.layout.TabContainer”/> Javascript var tc = new dijit.layout.TabContainer(); tc.startup();
  • 14.
    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>
  • 15.
    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(); });
  • 16.
    About Dojo Startedin 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
  • 17.
    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.
  • 18.
    When / Howto 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
  • 19.
    With JQuery They collaborateon 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
  • 20.
    With Node.js Both usethe 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
  • 21.
    In toolkits dojotoolkit.org /features/integrations Other projects version GWT (Tatami) 1.3.2 Grails plugin 1.7.2
  • 22.
    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
  • 23.
    Modules: Require andDefine 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”);
  • 24.
    Modules: file structure Filestructure matches require statements dojo/ dijit/ layout/ TabContainer.js dojox/
  • 25.
    Dojo core BasicBrowser self Defense dojo.byId array indexOf DRY Lots of handy javascript functions isArray trim addClass
  • 26.
    Dojo core Worldspanning power. Itty bitty living space effects events xhr (XmlHttpRequest) json dojo.query Browser detection
  • 27.
    Dijit Widget library Accessible, Internationalizable High Contrast mode Gracefully degrade in older browsers Right to Left text dijit.form dijit.layout
  • 28.
    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.
  • 29.
    Dojox “I knowsecret-kung-fu” Video / Graphics Charting RSS Advanced Datastores and Offline storage dojox.grid.DataGrid dojox.charting.DataChart
  • 30.
    Datastores: dojo.data Client sideobject 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
  • 31.
    Datastores: JSON JavaScriptObject Notation var myObject = { firstName: 'Gabe', lastName: 'Hamilton', favorite-color: 'blue... no, red' }; var myArray = [ myObject, {firstName: 'Bob'}];
  • 32.
    Datastores: dojo.data.api dojo.data.apidefines basic operations Read Write Identity Notification ItemFileReadStore implements Read and Identity ServiceStore implements all 4
  • 33.
    Datastores: dojox.data CSVStore XMLStore ServiceStore QueryReadStore JsonRestStore AtomReadStore ServiceStores based on public API Flickr, S3, Wikipedia, Google, Persevere, etc...
  • 34.
    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 } ]
  • 35.
  • 36.
    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
  • 37.
    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.
  • 38.
    Acknowlegements Thanks to thephotographers 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
  • 39.