HTML5 and JavaScript Web Apps

HTML5 and JavaScript Web Apps

View the source and examples on GitHub

Welcome! This is the homepage for HTML5 and JavaScript Web Apps, by Wesley Hales.

This book covers a ton of content related to HTML5 and the current state of web development for mobile and desktop environments, but the concept behind it is simple. It sets out to identify the most widely used browsers, specifications and frameworks being brought into the enterprise (or the mainstream) - and also reveals code examples that are practical and of use in the real world, today.

html5e

html5e is a term coined in HTML5 and JavaScript Web Apps. It stands for HTML5 Enterprise and is an identifier for the 5 specifications and the 5 most widely supported browsers that are the building blocks of any modern enterprise (mobile or desktop) web application today.

desktop

OS/API Geolocation WebSocket Web Storage Device Orientation Web Workers
Safari 5+ Yes Yes Yes Unknown Yes
Chrome 19+ Yes Yes Yes Yes Yes
IE 10+ Yes Yes Yes Unknown Yes
Opera 12+ Yes Yes Yes No Yes
Firefox 12+ Yes Yes Yes Yes Yes

mobile

OS/API Geolocation WebSocket Web Storage Device Orientation Web Workers
Mobile Safari Yes Yes Yes Yes Yes
Android Yes No Yes Yes No
Mobile IE Yes No Yes No No
Opera Mobile Yes Mixed** Yes Mixed* Yes
Mobile Firefox Yes Mixed** Yes Yes Yes

*Opera Mobile for Android has experimental support

**Both Mozilla and Opera have temporarily disabled WebSockets due to security issues with the protocol.

slidfast.js

Build Status

slidfast is a learning framework created for the book HTML5 and JavaScript Web Apps on O'Reilly Media. All the examples and code are explained in detail in the book.

This framework is well commented and documented so that you can learn. It is focused on the 5 HTML5 or W3C specifications that are widely supported across all modern browsers:

This means that we're only using native API's provided by the browsers. That's right kids, no jQuery or any other helper framework. All bloat has been removed so that we can truly learn what is going on and get the maximum performance on our target browsers.

Getting started

There are quite a few live examples to get you started (source here):

Basic Init

Include slidfast.js and slidfast.css in your html, then call:

slidfast({
   defaultPageID:'home-page',  //required
   touchEnabled: true, //optional - gives pages native like touch and swipe functionality
   singlePageModel: true, //optional - allows pre-fetching of external links
   optimizeNetwork: true, //optional - changes loading strategy based on network type (3G, Edge, wifi, etc...)
   orientationNav: true, //optional - navigates pages when user tilts device with accelerometer
   geo: {on:true,track:true,interval:10000,callback:geoCallback}, //optional - basic Geolocation tracking
   workers: {script:'worker1.js', threads:9, mycallback:workerCallback} //optional - Web Worker thread pool

});

Notes

There's a million ways this can be improved and made to support all web browsers. Right now slidfast mostly supports WebKit, Mozilla, Opera and the others need to be tested.

Fun Facts