Whether you’re a .NET guru or Rails rebel makes no matter when it comes to developing with open technologies on the front end. Web doyenne Molly Holzschlag explains what the Open Web Technology Stack looks like, how developers can use this stack as a guideline for best practices, and how the stack compares with proprietary options.
Technology “stacks” have been around for years. At best, a technology stack provides a means of visualizing the way a group of technologies work together. At worst, it ends up looking like a convoluted “follow the blind hamster” maze of confusion.
In Web standards and the “Open Web,” we in the industry have definitely been the blind hamsters. This has led to extreme confusion about what goes where and why. A prime example of this is the use and misuse of the term HTML5, which many people are, to this day, confused by. Fear not! This article not only explains the Open Web technology stack but also provides a visual you can understand and put to use.
What is the Open Web?
The actual definition of the Open Web is still forming. However, it is built upon core principles of the Web itself, with a little more wisdom thrown in after having seen the original idea of the Web become reality.
The root principles of the Web are to create and share content regardless of:
- Operating System
- Data format
- Ability or disability
From its earliest inception, the Web’s creators, Tim Berners-Lee and others such as Robert Cailliau, saw the Web as a social environment inasmuch as a technical one. This sociological bent has persisted in terms of evangelism of the Web as democratic, a tool for human empowerment in all ways and, as such, as open and low cost as possible.
But if anything is the single most important principle for an open and democratic Web, it is interoperability. Interoperability means that the systems, software, sites, and applications we develop work with each other without conflict.
If you’re chuckling as you read that statement, you realize that this is no easy task, and that tension has been at the heart of every “war” the Web has ever had, be it the result of browser, platform, apps, and codecs that are not interoperable.
To not ensure interoperability is to allow the greater vision of an integrated yet Open Web falter into a controlled model, prohibiting its potential evolution. Open Web philosophies are emerging at a fast pace to attempt to counteract the ever-challenging interoperability concerns.
Core Principles of the Open Web
The Open Web is as much of a path of technology as it is a path of professional and social ethics, ensuring that the true strength and potential of the Web – and all humanity – is maintained.
The first and perhaps most critical aspect to the Open Web is that it is decentralized. This means it’s not controlled by any single individual, company, or organization. Rather, it belongs to anyone who wants to use it. There is choice as to how you are included in the process, from using a wide range of service providers to setting up your own home-based site.
Other socio-technical issues with which the Open Web is concerned include:
- Transparency. From a technical standpoint, this means all levels of the Web should be visible, from document source to URLs to HTTP layers.
- Connect-ability. Via open APIs and information gathered via transparency, it should be possible to put various pieces together with ease, in a secure way, such as adding a Flickr stream to a blog, or embedding a clip of music from one site into another.
- Open Specifications. Specs require documentation, and open specifications are especially important to an Open Web, with no encumbrances such as copyrights or patents on those open specs.
- Freedom of Social Forms. This term, coined by Brad Neuberg, former developer advocate at Google, describes an “organic” broad global open market. This includes open source products, volunteer-led wikis, micro loans to those in economic need, right on through to larger economic and social entities such as auction sites or social networks.
- Open discourse. The Web is of millions, and contains the voices of all who participate. Open Web encourages civil, open discourse between people, utilizing the Web as a primary, global, low-cost tool linking one-to-many or millions-to-millions, or any combination imaginable.
- Pay It Forward. If you learn something, to be an open Web participant means to share that learning with others via discourse, blogs, conferences or the creation and integration of open technologies to further these ideals.
While this list is not exhaustive, it does provide a strong look at the principles that guide the Open Web. There are differences of opinion, of course. Many Open Web advocates do not ascribe specific technologies to the Web, believing this leaves the door wide open for ongoing evolution. While I agree with this as an ideal, I’ve also found that providing the visual technology stack has assisted profoundly in demystifying the way open specifications in the Open Web can, and do, work together.
Open Web Technologies: Front End
Of course, one can readily say that Open Web technologies are those that conform to the root and core principles of Web standards and Open Web. And they’d be right! Again, it is the principles that allow for us to expand and respond to our ever-growing duties as Web professionals. With that in mind, here’s a look at some of the technologies considered to be open.
You’ll note also that I’ve stuck to technologies used by front end developers. There’s a method to my madness here: Front end development often has to play well with proprietary server technology. This is critical because technologies on the front end (Table 1) tend to be very adaptable, in large part due to their transparency.
|Open Web Technology||Versions||Organization||Description|
|HTML||HTML – HTML 4.01||W3C||Markup language for Web documents|
|HTML/5||HTML / HTML5||WHAT-WG / W3C||Markup language and related APIs for an application-rich Web|
|XHTML||XHTML 1.0 – 1.1, XHTML Basic, XHTML-MP||W3C||XML serialization of HTML for docs and applications|
|XML||All||W3C||Metalanguage for XML applications|
|SVG||All||W3C||Scalable Vector Graphics for the Web (XML-based)|
|MathML||All||W3C||Notation for math and science (XML-based)|
|CSS||All||W3C||The style language for the Web|
|HTML5 Media APIs||HTML5||WHAT-WG / W3C||<video> <audio> and <canvas>|
|HTML5 APIs||HTML5||WHAT-WG / W3C||Variety of application programming interfaces for a wide range of script access to application and document elements.|
|Microformats||All||microformats.org||Extending existing markup to make it more human-readable and open.|
|WAI-ARIA||All||W3C||Web Accessibility Initiative / Accessibility for Rich Internet Applications|
Table 1: Current technologies considered to be Open Web
While the majority of these technologies come from the W3C, the WHAT-WG and microformats.org are grass-roots organizations and work in the way compliant with the ideals of the Open Web. They are open to anyone who has the interest and desire to participate, a testament to the power of individuals to help build the very technologies with which we work.
Visualizing the Open Web Technology Stack
One of the challenges in today’s perception of Web standards and Open Web is that HTML5 is the combination of these technologies. Nothing could be further from the truth. It is very important that developers, managers, and folks right on up to the CTO have at least this understanding: HTML5 is simply a language that works with other languages in the Open Web technology stack.
Putting this into a visual has helped clear up a lot of confusion. When we can actually look at how these technologies work together, we can separate the layers and understand that it’s not just one technology, but many working together in the connect-ability sense of the Open Web.
Figure 1: The Open Web Technology Stack: a visualization of Open Web
There are four layers: structure, presentation, behavior, and media. Many readers will be familiar with the three layer model, but along with HTML5 has come open APIs for embedded media.
On the first level, structure, we see HTML5 along with ARIA. This provides the syntax, semantics, and accessibility features for the content and features of your websites and applications. Above structure is presentation, which is of course the design layer via CSS. Along with the content and style, there’s the behavior layer.
It’s in this layer we begin to see the influence of HTML5 in the Open Web, where HTML5 APIs (as well as other APIs that are related to but not HTML5, such as geolocation) and scripting sit at the same level. This is the real shift that HTML5 brings: incredibly rich scripting options we’d never had in browsers before.
Finally, there’s the media layer, where we also see the influence of HTML5 in the form of specific media APIs: video, audio, and canvas. SVG is Scalable Vector Graphics and can be used to create in-browser vector graphics and animation. Not new to the game, SVG is now becoming more desirable as the IE browser begins to mature.
Keep in mind that this stack is only one of many potential representations. Microformats, for example, could easily be added to the structural layer, and so on. In fact, my colleague at Opera Software, David Storey, began this visualization and I’ve modified it from there. In the spirit of the Open Web, Paul Irish from Google saw it, asked for it, and now it’s being modified and used to create a variety of visualizations. That’s the Open Web in action!
An Iterative, Open Future
As evolving and emerging technologies change, so must those of us who work with them change. This requires a great deal of willingness to adapt and perhaps even change an entire project plan to accommodate a given technical challenge. This is the beauty, and the pain, of being part of disruptive technology.
What mitigates the need to rapidly adapt is in fact the Open Web, as it is built to be flexible, adaptive, and address the needs of today with the needs of the future, all the while keeping faithful to the original principles of the Web itself. It’s no easy task, and there’s no one-size-fits-all process. Be a part of the open conversation, and I promise the rewards will be priceless.