2. Who am I
Maurice de Beijer
The Problem Solver
Microsoft Integration MVP
DevelopMentor instructor
Twitter: @mauricedb
Blog: http://msmvps.com/blogs/theproblemsolver/
Web: http://www.HTML5Support.nl
E-mail: mauricedb@computer.org
3. What we aren’t going to cover
But I would really like to!
Asynchronous Module Definition/RequireJS
TypeScript
CSS3
LESS/SASS
Tooling
But I will in my Modern Web Development session at
the TechDays
4. What are we going to cover
Polyfills
Semantic elements
Databinding & templates
WebSockets
Drag/Drop
Graphics
Storing data in the browser
5. The demo application
Multiple concurent users
Business rules that need to be enforced
Use charts for reporting
Support multiple devices
Desktop
Tablet with touch
Support old versions of Internet Explorer
10 to 20% of users use Internet Explorer 8
http://bit.ly/DotNed
6. Polyfills
Not every browser supports every HTML5 feature
Especially true with old browsers
Many missing features can be added using a polyfill
Offers the standard API
Often done in JavaScript
JavaScript is slow in older browsers
A few good lists to check
Modernizr HTML5 Cross Browser Polyfills
HTML5 please
7. HTML5 Semantic elements
New HTML5 elements
<nav>
<section>
<header>
<footer>
<article>
<aside>
9. HTML5 Semantic elements
Why use them?
Searchability
Accessibility
Neither really makes sense
Search engines don’t really care
Use WAI-ARIA for accessibility support
Make sure to add support in older versions of IE
Modernizr
Html5Shiv
11. Databinding & templates
Construct HTML snippets using JavaScript or jQuery
Is tedious as best
Use a richer application library
Backbone
Knockout
Ember
...
Choosing one is a matter of taste
Checkout TodoMVC for a comparison with a to do app
My choice is Knockout
13. WebSockets
A bi-directional socket connection
Between a web browser and the web server
The server can push updates to the browser
Refreshing the browser to see updates is so 2012
Not just for games and chat applications
Any application where you want fast updates
Decrease the chance of concurrency issues
15. WebSockets
Suffers from lack of infrastructure support
Routers and firewalls can cause issues
The API is low level
Messages are just simple objects
You might need to retransmit missed messages
Use ASP.NET SignalR
Uses WebSockets if possible
Otherwise it uses fallbacks like Comet
Supports scale out scenarios
Uses a very simple API
17. Drag and Drop
Drag and drop can be a very intuitive user interaction
Often seen as more fun by users
Very common interaction on tablets
But works equally well with a mouse
HTML5 supports drag and drop
Including dragging from the file system
19. Drag and Drop
Use jQuery UI instead of the HTML5 capabilities
Use jQuery UI Touch Punch for touch support
Add -ms-touch-action: none in CSS for Windows 8
21. Graphics
Rich graphics are common in modern applications
Interactive graphics
Charts
Often generated on the client
Not just images downloaded from the server
Two basic options
Scalable Vector Graphics
Canvas
22. Comparison of Canvas and SVG
Canvas SVG
Pixel-based (canvas is essentially an image Object Model-based (SVG elements are
element with a drawing API) similar to HTML elements)
Single HTML element similar to <img> in Multiple graphical elements which become
behavior part of the Document Object Model (DOM)
Visual presentation created with markup and
Visual presentation created and modified
modified by CSS or programmatically through
programmatically through script
script
Event model/user interaction is coarse—at
Event model/user interaction is object-based
the canvas element only; interactions must be
at the level of primitive graphic elements—
manually programmed from mouse
lines, rectangles, paths
coordinates
API does not support accessibility; markup-
SVG markup and object model directly
based techniques must be used in addition to
supports accessibility
canvas
25. Graphics
Use a library to make the API easier
Don’t worry about Canvas versus SVG
jqPlot is great for charts
It uses canvas
Includes exCanvas for IE 7/8 support
Raphaël is a great choice for general graphics
It uses SVG
Uses VML for IE 7/8 support
27. Storing data in the browser
Lots of data changes only infrequently
Don’t waste time by loading it every time
HTTP caching can help
But is less flexible
HTML5 has two mechanisms for local storage
LocalStorage is a simple dictionary
IndexedDB is a document database
Web SQL is also an option but has been deprecated
31. Storing data in the browser
LocalStorage is well supported
Except in very old versions of IE
IndexedDB is much more powerful
But the API is hard to use
Lawnchair is easy to use
Abstracts the underlying data storage
Can use LocalStorage, IndexedDB or other storage
db.js makes IndexedDB easy to use
But requires a polyfill in old browsers
33. Conclusion
There is lots of goodness in HTML5
But not everything is as useful
Some of the API’s are hard to use
But there are good libraries to make things easier
Think about support with older browsers
Use polyfills where needed
Download the demo code