Dojo: Beautiful Web Apps, Fast


Published on

An overview of the dojo javascript toolkit showcasing several of the powerful widgets added in dojo 1.7.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dojo: Beautiful Web Apps, Fast

  1. 1. Dojo: Beautiful Web Apps, Fast Gabe Hamilton Updated for dojo 1.7.2
  2. 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
  3. 3. What is Dojo?A javascript toolkitFor doing things like this...
  4. 4. Demos data (in mobile)
  5. 5. Demo sites Stocker DataChart, data stores, events Widgets: “The sort of thing we tend to use dojo for” With a different look, Accordion widget, FishEye widget, some content panes Timers, svg, Drag & Drop, Title panes
  6. 6. 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://localhost/lucid
  7. 7. 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
  8. 8. Not covered in this talk Only summarizing what is in dojo core dijit dojox Wont go into detail Dojo tools: builds, DOH (unit testing) Dojo class structure and inheritance Touch of Death
  9. 9. Where is the Dojo? Or for your html page <script src=" "></script>
  10. 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
  11. 11. Documentation Tutorials API docs Reference Guide
  12. 12. Live Coding Demo
  13. 13. 2 PathsMarkupdjConfig=”parseOnLoad: true”<div dojoType=”dijit.layout.TabContainer”/>Javascriptvar tc = new dijit.layout.TabContainer();tc.startup();
  14. 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. 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. 16. 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
  17. 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. 18. 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
  19. 19. With JQueryThey collaborate on CSS selector libraries that can be swapped in and out.Many jQuery projects are hosted by the Dojo FoundationJQuery compatiblity layer: run jQuery UI on dojo
  20. 20. With Node.jsBoth 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
  21. 21. In /features/integrationsOther projects version GWT (Tatami) 1.3.2 Grails plugin 1.7.2
  22. 22. For MinimalistsAsync mode Fully asynchronous, run code when your require statement is done loading.3.8kb Just require and defineGreat for mobile or non dojo applications
  23. 23. 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”);
  24. 24. Modules: file structureFile structure matches require statementsdojo/dijit/ layout/ TabContainer.jsdojox/
  25. 25. Dojo core Basic Browser self Defense dojo.byId array indexOf DRY Lots of handy javascript functions isArray trim addClass
  26. 26. Dojo core World spanning power. Itty bitty living space effects events xhr (XmlHttpRequest) json dojo.query Browser detection
  27. 27. Dijit Widget library Accessible, Internationalizable High Contrast mode Gracefully degrade in older browsers Right to Left text dijit.form dijit.layout
  28. 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. 29. Dojox “I know secret-kung-fu” Video / Graphics Charting RSS Advanced Datastores and Offline storage dojox.grid.DataGrid dojox.charting.DataChart
  30. 30. Datastores: dojo.dataClient 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
  31. 31. Datastores: JSON JavaScript Object Notation var myObject = { firstName: Gabe, lastName: Hamilton, favorite-color: blue... no, red }; var myArray = [ myObject, {firstName: Bob}];
  32. 32. Datastores: defines basic operations Read Write Identity Notification ItemFileReadStore implements Read and Identity ServiceStore implements all 4
  33. 33. Datastores: CSVStore XMLStore ServiceStore QueryReadStore JsonRestStore AtomReadStore ServiceStores based on public API Flickr, S3, Wikipedia, Google, Persevere, etc...
  34. 34. var store = new{ target: "/users/", idAttribute: "id" }); Put, Post, Delete, Get [ user: { name: Gabe, id: 1 }, user: { name: Bob, id: 2 } ]
  35. 35. dojox.grid.DataGrid Demo
  36. 36. Other Resources dojo-can-improve-your-mapping-app perworks/bookmarks/html? sort=date&tag=dojo&lang=en
  37. 37. Resources Great Examples Amazon search has 94 book results for dojo javascript of which the top 8 were books just on dojo.
  38. 38. AcknowlegementsThanks to the photographers of the following Creative Commons pictures,_Kaifeng,_
  39. 39. Questions