How Toolkits fill the gaps between marketing and reality of HTML5.

1. Toolkits and Gaps
Dylan Schiemann (@dylans)
SitePen, Inc.
HTML5 Code Camp, October, 2010
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

2. Toolkit Goals
Fill gap, add features and enhancements
Experiment
Create clean APIs
Beyond HTML5
Better widgets, charts, higher level APIs
Allowed disagreement, on top of standards
Opportunities, constraints, and conflict:
Best toolkits make parts of themselves irrelevant over time
vapor.js
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

3. Browsers and Recommendations
Are flawed
Have inconsistencies
Make invention possible, but trail behind
Which is why we have and need good toolkits
Iterate faster
Different styles and taste
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

4. Dojo
Retrofitting itself for HTML5 support
Removing obsolete features as appropriate
Keeping compatibility and API consistency
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

5. Dojo Toolkit: Project Goals
Fill the Browser Gaps
Fast & Efficient
Modular, Small Base, Extensible
Professional & Sophisticated
Powerful
Developer productivity and tools
Push the limits (vector graphics, offline, html5, etc.)
Open, free, & liberally licensed
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

6. Toolkit Features
Packages, Builds, Timing
DOM Manipulation/Querying/Behavior
Events (DOM, function to function, pubsub)
Ajax (XHR, iframe, x-domain, form submits, polling, long-polling, and more) and
Effects
DnD & a11y/i18n
Dijit (widget system, Layout, Form, WYSIWYG editor, Tree, Grid, many more)
Vector Graphics (gfx, charting, drawing, SVG/Canvas/VML/Flash/Silverlight/SVGWeb)
Data/JSON/REST/RPC
Offline, Local Storage (Gears, HTML5, Flash, Cookies, etc.)
Comet, XMPP, WebSocket
Developer Utilities (build, test, documentation)
Mobile
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

7. Standards
Dirty Hacks Innovation
Inspired by Andy Hume
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

8. <font>
<div> CSS
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

9. getElementsByTagName
querySelectorAll dojo.query
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

10. Dojo 0.1
netWindows Dojo 0.4
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

11. Dojo 1.0
Dojo 0.4 Dojo 1.4
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

12. Dojo 1.5 & 1.6
HTML5
Dojo 1.4 Dojo 2.0
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

13. How?
Feature Detection
data attributes
sockets
GFX
Storage
Dijit
Mobile
...
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

14. 3 Dojo Foundation
Mobile Projects
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

15. WINK Toolkit
Completely separate code
base
Innovative UI elements (3D
useful for tight screen
space
Started by Orange Labs
iPhone and Android apps,
consistent look and feel,
other platforms coming
Most Experimental & Lean
http://winktoolkit.org/
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

16. EmbedJS
Dojo APIs, stripped down
for mobile and embedded
Started by Uxebu
Target each platform with
its native look & feel
TouchScroll, geolocation,
etc.
Most Complete
http://github.com/uxebu/embedjs/
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

17. DojoX Mobile
Started in Dojo 1.5
Fix things in Dojo that
break for mobile, API stable
Merge features from
EmbedJS, WINK Toolkit
Feature Detection
Support for many HTML5
features and beyond
Most Stable for Dojo users
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

18. © SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010

19. Q&A / Thanks
SitePen sitepen.com
Dojo Toolkit dojotoolkit.org
Dojo Foundation dojofoundation.org
Dijit dojotoolkit.org
Dojo Campus dojocampus.org
Twitter: @dylans @dojo @sitepen @cometdaily #dojo
Slide Share: http://www.slideshare.net/dylanks/
LinkedIn: http://www.linkedin.com/in/dylans/
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010