Web Components: New hope for Web designers

Experimental Web technology aims to make it easier to build rich Web apps with ordinary markup and CSS

The Web Components project, led largely by the Google Chrome development team, aims to help solve a simple problem: Building Web applications is more complicated than it used to be. Worse, it's more complicated than it should be.

Modern Web apps have rich, interactive UIs, driven largely by client-side code. Today we generally build such UIs using JavaScript frameworks and UI toolkits, such as Dojo/Dijit, jQuery UI, and YUI. That's both good and bad. It's good because it means it's now easier to build rich Web UIs than ever before. It's bad because it needlessly shifts the balance of control over Web development from designers to programmers.

[ Delve into HTML5 programming with InfoWorld's "HTML5 Megaguide Deep Dive" PDF how-to report. Then understand the issues surrounding HTML5 today in InfoWorld's HTML5 Deep Dive PDF strategy report. | Keep up on key application development insights with the Fatal Exception blog and Developer World newsletter. ]

In the old days, we chuckled at newbies who talked about "HTML programming," as if writing markup made you a programmer. But to use a tool like Dojo or jQuery, that's really what you have to be. To create a pop-up dialog box using one of these toolkits, for example, you wouldn't just describe it, as you'd do in HTML. You'd probably instantiate a Dialog object, set some parameters that control how it will display, then tell it to insert the right elements into the DOM -- like a programmer. From the Semantic Web perspective, it means a lot of Web content is effectively hidden. Search crawlers and other JavaScript-disabled clients can't see it.

It also erects a barrier between Web designers and the relatively new category of dedicated client-side JavaScript developers. Once, Web designers could write some HTML and CSS and end up with a functioning UI. Now they're forced into the old model of gathering requirements, writing them down, handing them off to programmers, and seeing what comes back.

"That's actually a regression," says Google's Alex Russell. "We've regressed from how we'd like to be building apps. And it's worth acknowledging that we have failed, and that we would like to do better."

The components of Web Components
That's where Web Components come in. The project is composed of a group of technologies aimed at making it possible to create rich Web UIs using ordinary CSS and markup. They do this by allowing toolkit makers to encapsulate their widgets and UI elements as easily reusable components.

At the core of this idea is a new HTML element called a Template, which contains markup that gets inserted into the DOM but not displayed. Once it's in the DOM, you can activate a Template as many times as you want to make as many visible copies as you need -- like creating objects from a class.

What is a Template good for? For one thing, it can be used to create a Decorator: a complex package of styles that you apply to an element using CSS. It's much more powerful than plain CSS because in addition to modifying CSS attributes, it can insert blocks of markup and even script.

1 2 Page
Join the discussion
Be the first to comment on this article. Our Commenting Policies