HTML5 and friends

The web as the platform

Christian Heilmann (@codepo8) and Joe Stagner (@misfitgeek)

Mozilla - Mobile World Congress 2012, Barcelona, Spain.

Disclaimer

You will hear about a lot of cool stuff in the next hour
We will make short and opinionated statements but promise no marketing talk
You will be expected to re-think some of the ideas you have about the web and technologies
Things mentioned here are based on questions and feedback we got at the conference
There is a chance of kittens and puppies (maybe)

Mobile Developer

IDEs, SDKs, known environments
Abstraction on abstraction on library
Known environment
Mature, well-formed OO languages and concepts

Web Developer

Unknown browser, unknown OS, unknown user
Build process? What build process?
We know more about browser bugs than the browser makers
HTML, JavaScript, CSS

HTML5

HTML5 2.0

HTML5 is not about the shiny

Pointless statements about HTML5

HTML5 brings you more users as it allows for rich interfaces
HTML5 is not ready yet
HTML5 is not as smooth as a native experience
There are no professional HTML5 IDEs and SDKs
HTML5 is the Flash killer

The naked truth about HTML5

HTML5 is an evolution of HTML - we left the document-driven web of linked documents and went into the world of applications. Applications that need more than one technology to run smoothly. A web app uses HTML5, CSS, JavaScript and other agreed standards to give the best experience to the end user.

The power of the web

A good web app (and also web site) will not look the same across all devices and platforms. That would limit its potential and usefulness for the end user. If there is more screen space, let's use it. If the device it runs on can do things for the user, use them.

Recycling makes sense

So let's go through the stack…

Mozilla Developer Network

W3C

HTML5

WHATWG

developer.mozilla.org/en-US/learn/html5

Learning HTML5 on the Mozilla Developer network

Learn HTML5

Semantics and markup

Headers, articles, sections, oh my…
Forms with richer widgets and in-built validation

Media - native video and audio

Canvas

Low-level drawing API in the browser
Dynamic coordinate system
Live access to video and image data on byte level

Visuals and interactions

CSS transitions
CSS transformations
CSS animation
CSS rounded corners, gradients, generated images, drop shadows
CSS 3D transforms

App stuff

Local data storage: Local storage (here be dragons), IndexDB, WebSQL
Offline functionality (App Cache)
History and bookmarking management
Progress indicators
Drag and Drop

Breaking out of the web frame

Browser/OS levels

Desktop notifications
File API access
Menus and notifications

Menus

WebGL

OpenGL for the web
For game developers: shift your offline experience to the web
For web developers: using indexed arrays - run your JavaScript calculations on the GPU!
For everybody: predictable, measurable performance that we can improve on.