The makeup of the Open Web stack

The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).

Open Web 0: The AJAX age

I’m informally calling this the Open Web 0, also known as Web 2.0 and AJAX. This is when the Web started to bloom as an application platform. JavaScript and DOM Scripting was suddenly taken seriously, and XHR liberated us. We could now pull in data from the server without those pesky full page reloads. Applications on the Web, through a web browser, blossomed. I call this Open Web 0 as all modern browsers today support the technology stack (although not always 100%) of this era. Of course, during the golden age of AJAX the support was lopsided, and IE needed special code paths, but this is by and large not needed for modern day IE.

The Open Web 0 stack

The stack of this era largely centred around HTML4 and XHTML. CSS2.1 was still being worked on, but was largely usable cross browser (except IE vintage of that era). On the scripting side ES3 was top dog, aided and abetted by XHR and DOM 2 (again with shims for IE). These were the days when we were living in the shadows of the first browser wars. IE had been laying dormant, fattened and inactive after all the market share it had drank up. Jerked awake from their slumber by the XHR powered AJAX revolution–a technology they created no less–the IE team was reformed and they started to play catch up and implemented the parts of the stack that they lacked.

The Open Web 0 stack roughly consists of:

Markup

• HTML 4.01
• XHTML 1.0 and 1.1 (the same except spec modularisation and the largely unimplemented Ruby Module)

Semantics could be added to HTML or XHTML using existing attributes with Microformats.

Styling

• CSS 2.1

Behaviour: ECMAScript, the DOM and APIs

• ES3 (PDF link). Commonly known as JavaScript
• DOM 2 Core
• DOM 2 HTML
• DOM 2 Views
• DOM 2 Style
• DOM 2 Events
• DOM 2 Range & Traversal
• XHR 1

Graphics and Images

• SVG 1.1 (largely unused due to lack of IE support at the time)
• PNG, JPEG, GIF, etc.

Video and Audio

• No native support. Plug-ins such as Flash provided this capability

Fonts

• Only installed system fonts

Other

• XSLT 1 and other XML friends

Open Web 1: the HTML5 application age

We’re now moving into a new age. That of HTML5. The Web is truly becoming an application platform. Apps on the Web are becoming richer thanks to new APIs, there are efforts to make installable apps through the Widgets initiative, and platforms such as webOS, Windows 8 and the BlackBerry Playbook’s QNX based OS either use Open Web technologies as the way to write apps or one of a number of options.

Flash was used to prop up the deficiencies of the Open Web in the past. It became the solution for video, and as a shim for supporting new fonts and cut and paste. It had capabilities the web didn’t have such as microphone and web cam access. We’re not quite there yet, as we’ve not fully arrived in the application age. We’re in the middle of that particular path, but Flash is well on the way to being supplanted by the Open Web. Flash will put up a good fight, and HTML owes a debt of gratitude to it for the inspiration, help and challenge it has provided, but the Web will win. All the momentum is currently on its side. Even Microsoft is playing along. Who would have thought that 6 years ago?

The Open Web 1 stack

The star of this particular show is HTML5. It swept XHTML and XML to one side and became the media darling. Like many things that crave the limelight, it has stolen credit for things it doesn’t do (No CSS and Geolocation are not part of HTML5). But it plays its role of front man and poster boy well. Even the men in suits talk about it, even if they have no idea what it actually is. Much of the real power of HTML5 comes from its associated APIs. These give it the ability to do things that real applications do, such as access client side storage, multi processes, graphics APIs, web cam and GPS access and so on.

It is not clear what technologies should be included in the stack as many are still under active development. I’m including specs that are either stable and have implementations, or where there is no previous spec in its area but there is significant vendor interest in implementing in the near future. Some will fall by the way side or be replaced by competing specs. Some will be be replaced with newer versions of the same spec. Some of these might not arrive until the next generation.

Markup and Semantics

• HTML5
• ARIA 1 (Accessibility)
• MicroData (Semantics. See also RDFa for a rival that fills the same space, and Microformats.)

Styling

• CSS 2.1 (for parts of the spec not supplanted by a CSS3 module)
• CSS3 Selectors
• CSS3 Color
• CSS3 Backgrounds & Borders
• CSS3 Multi-Column Layout
• CSS3 Grid Layout
• CSS3 Flexible Box Layout
• CSS3 Regions
• CSS3 Exclusions
• CSS3 Media Queries
• view-mode Media Feature
• CSS3 Conditional Rules
• CSS3 Device Adaptation
• CSS3 Values & Units
• CSS3 Image Values
• CSS3 Text
• CSS3 Fonts
• CSS3 Basic UI
• CSS3 2D Transforms
• CSS3 3D Transforms
• CSS3 Transitions
• CSS3 Animations
• CSS Namespaces
• CSS Style Attribute

Behaviour: ECMAScript, the DOM and APIs

• ES5 (the ES6 spec is now in development)
• DOM4 (Replaces DOM2 Traversal and Range, DOM3 Core, parts of DOM3 Events, and Element Traversal specs and moves DOM APIs from HTML5)
• CSSOM (Replaces DOM2 Style)
• DOM3 Events
• Progress Events
• DeviceOrientation Event
• Touch Events
• Gamepad
• Server-Sent Events
• XHR 2
• Selectors API 2
• Web Workers
• Web Storage
• Indexed DB
• Web Messaging
• Web Sockets
• Web Notifications
• File API
• File API Writer
• File API Directories & Systems
• HTML Editing APIs

Performance APIs

• Navigation Timing
• Performance Timeline
• Resource Timing
• User Timing
• Page Visibility
• Animation Timing
• Efficient Script Yielding

Device and System APIs

Apart from Geolocation it is not clear whether there will be vendor support for the various W3C device related APIs. We will have to wait and see what gets included in browsers and what doesn’t. Or if we have to wait for the next generation.

• Geolocation
• Contacts API
• Calendar API
• System Information
• Battery Status Events
• Network Information API
• Media Capture
• Messaging API

Installable Web Application

Aside from Opera, it isn’t clear if the Widget family of specifications will be adopted by desktop web browsers. There has been some interest on mobile platforms however.

• Widgets Packaging
• Widgets Interface
• Widget Access Request
• Widget URIs
• Widget Updates
• XML Digital Signatures

Graphics, Images and Effects

• HTML Canvas 2D
• WebGL 1
• SVG 1.1 (for parts not superseded by SVG 1.2 modules)
• SVG 1.2 Tiny
• SVG Compositing
• SVG 1.2 Color
• SVG Parameters
• SVG Transforms
• Filter Effects 1 (Replaces SVG 1.2 Filters. Also applies to HTML/CSS)
• CSS Shaders
• PNG, JPEG, GIF, etc.

Video and Audio

• video and audio elements in HTML5. Nearest we have to a royalty free codecs at the moment is VP8 for video and OGG Vorbis for audio. Together these make up WebM.
• WebRTC 1 (includes getUserMedia, which is the replacement for the device element.)
• Web Audio API

Fonts

• WOFF 1, OTF, TTF, SVG Fonts via CSS Web Fonts.

Other

• XSLT 1 and other XML friends

What’s Next?

Its always hard to predict the next era of the Web. Especially when we don’t even fully know how this era will pan out yet. We’re living in an era where web technologies are a realistic option for building applications, especially on mobile where there are so many platforms. PhoneGap is one example of a successful project that allows you to write to the web but deploy as native apps. I think the next era will be when the Open Web has shrugged off Flash and has native apps in its sights. Early skirmishes have already started, but the real titanic battle is yet to begin. Once the Open Web has been super charged with the likes of the Shadow DOM and Component Model, CSS4, WebCL, and access to the full range of device capabilities and services, then the Web will be able to stand shoulder to shoulder with native apps. With the tools at our disposal we should be able to produce user experiences every bit as beautiful, fast and pleasant to use as its native brethren. And don’t forget the server-side, where JavaScript-based technologies such as Node are starting to make their presence felt.

8 months ago  /  155 notes  /