ݺߣ

ݺߣShare a Scribd company logo

HTML5: Toolkits and Gaps

•
•
D
dylanks

The document discusses JavaScript toolkits and how they fill gaps in browser support. It focuses on the Dojo toolkit, its goals of providing modular, efficient code to enhance browser functionality, and how it has evolved from early versions to support new standards like HTML5. The document outlines features of Dojo like DOM manipulation, Ajax, graphics, and mobile support. It also introduces three mobile projects from the Dojo Foundation for different platforms.

1 of 19
Downloaded 29 times
Toolkits and Gaps Dylan Schiemann (@dylans) SitePen, Inc. HTML5 Code Camp, October, 2010 © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
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
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
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
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
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
Standards Dirty Hacks Innovation Inspired by Andy Hume © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
<font> <div> CSS © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
getElementsByTagName querySelectorAll dojo.query © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
Dojo 0.1 netWindows Dojo 0.4 © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
Dojo 1.0 Dojo 0.4 Dojo 1.4 © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
Dojo 1.5 & 1.6 HTML5 Dojo 1.4 Dojo 2.0 © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
How? Feature Detection data attributes sockets GFX Storage Dijit Mobile ... © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
3 Dojo Foundation Mobile Projects © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
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
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
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
© SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
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 ݺߣ Share: http://www.slideshare.net/dylanks/ LinkedIn: http://www.linkedin.com/in/dylans/ © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010

More Related Content

HTML5: Toolkits and Gaps

  • 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 ݺߣ Share: http://www.slideshare.net/dylanks/ LinkedIn: http://www.linkedin.com/in/dylans/ © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010