slidfast

slidfast is a learning framework created for the book HTML5 Architecture 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:

• Web Storage
• Web Socket
• Geolocation
• Orientation
• Web Workers

This means that I'm only using native API's provided by the browsers. That's right kids, no jQuery. 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 examples in the root directory to get you started.

• slide and rotate - is the basic example of using CSS3 transitions and AJAX loading to navigate within a single DOM. Also uses localStorage to store the dynamically loaded HTML.
• touch - shows how to add touch events for navigation
• orientation - shows how to perform basic navigation events with the Orientation API
• workers - Uses Web Workers to create a thread pool and parallel processing
• geo - shows how to track a users location with common workarounds for iOS5

Basic Init

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

slidfast({
   defaultPageID:'home-page',  //required
   touchEnabled: true,
   singlePageModel: true
});

Notes

There's a million ways this can be improved and made to support all web browsers. Right now it's mostly supporting WebKit(100%), Mozilla(50%), and the others need impl and testing.

Fun Facts

• I created this framework while writing this HTML5Rocks article
• It's used within the JBoss Richfaces enterprise mobile offering.
• This framework is built using the same JavaScript structure as jQuery :) compare the sources and you'll see what I mean. So you can easily turn any part of it into a plugin.