html5: toolkits and gaps

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

Upload: dylanks

Post on 01-Nov-2014

2.441 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Toolkits and Gaps

Dylan Schiemann (@dylans)SitePen, Inc.HTML5 Code Camp, October, 2010

Sunday, October 17, 2010

Page 2: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

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

Sunday, October 17, 2010

Page 3: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

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

Sunday, October 17, 2010

Page 4: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Dojo

Retrofitting itself for HTML5 support

Removing obsolete features as appropriate

Keeping compatibility and API consistency

Sunday, October 17, 2010

Page 5: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Dojo Toolkit: Project Goals

Fill the Browser Gaps

Fast & EfficientModular, Small Base, Extensible

Professional & Sophisticated

Powerful

Developer productivity and tools

Push the limits (vector graphics, offline, html5, etc.)

Open, free, & liberally licensed

Sunday, October 17, 2010

Page 6: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

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

Sunday, October 17, 2010

Page 7: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Innovation

Standards

Dirty Hacks

Inspired by Andy Hume

Sunday, October 17, 2010

Page 8: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

CSS

<font>

<div>

Sunday, October 17, 2010

Page 9: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

dojo.query

getElementsByTagName

querySelectorAll

Sunday, October 17, 2010

Page 10: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Dojo 0.4

Dojo 0.1

netWindows

Sunday, October 17, 2010

Page 11: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Dojo 1.4

Dojo 1.0

Dojo 0.4

Sunday, October 17, 2010

Page 12: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Dojo 2.0

Dojo 1.5 & 1.6HTML5

Dojo 1.4

Sunday, October 17, 2010

Page 13: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

How?

Feature Detection

data attributes

sockets

GFX

Storage

Dijit

Mobile

...

Sunday, October 17, 2010

Page 14: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

3 Dojo Foundation Mobile Projects

Sunday, October 17, 2010

Page 15: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Most Experimental & Lean

http://winktoolkit.org/

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

Sunday, October 17, 2010

Page 16: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Most Complete

http://github.com/uxebu/embedjs/

EmbedJSDojo APIs, stripped down for mobile and embedded

Started by Uxebu

Target each platform with its native look & feel

TouchScroll, geolocation, etc.

Sunday, October 17, 2010

Page 17: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Most Stable for Dojo users

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

Sunday, October 17, 2010

Page 18: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

Sunday, October 17, 2010

Page 19: HTML5: Toolkits and Gaps

© SitePen, Inc. All Rights Reserved

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/

Sunday, October 17, 2010