With components, Google agitates for a revolution in Web development

At the Google I/O conference this week, the company vigorously lobbied developers to adopt a new programming model, one that could, the company asserted, make it radically easier to build Web applications.

In multiple sessions through the conference, Google engineers spoke about Web Components, an evolving World Wide Web Consortium (W3C) standard designed to help organize complex Web pages by providing a mechanism to assemble them using small single-function components.

“Web Components utterly change the Web platform. This isn’t hyperbole. This actually changes everything,” said Matthew McNulty, a Google engineering manager, during a presentation at the conference, which was held in San Francisco.

The standard could be important because “it introduces a new world where components from different vendors can live together on the same page. Apps can be crafted from parts found on a massive shelf,” McNulty. “It’s about composability. It gives you just enough of a container that the Web becomes composable.”

Meet Polymer

Google has been working on its own library, called Polymer, that makes it easier to use and extend Web Components. “Polymer does all the hard work to make [Web Components] a cohesive system,” McNulty said.

“The idea behind Polymer is to leverage the Web Components standard,” said Al Hilwa, an IDC research program director for software development.

Hilwa noted that Polymer is an attempt to bring advanced extensibility to the Web platform, in much the same way that the Java Enterprise Edition and Microsoft .Net allows developers to share components and rapidly build applications using the work of others.

Although work on Web Components has been going on since 2010, the technology now seems to be picking up momentum.

Google’s Chrome 36, which will ship in a few weeks and is ready in the beta channel now, will support Web Components. It is the first browser to do so.

“This is a milestone in Web development,” said Eric Bildeman, a Google engineer working on the Chrome team, during another presentation on the technology.

In many ways, Web Components finally delivers the advanced coding tools and techniques that developers in other languages have long enjoyed, such as objects, templates and data binding (though the data binding is offered by Polymer, not Web Components itself).

HTML running out of steam?

Despite its almost universal use over the past decade, HTML, which provides the basic mark-up format for building Web pages, hasn’t been advanced much in terms of helping developers build complex Web applications, Bildeman said.

For instance, there is no one standardized way in HTML to load additional elements into a Web page without help from external technologies such as PHP or Apache modules. Both JavaScript and CSS (Cascading Style Sheets) have long offered the ability to call in external files when a browser renders a Web page.

The recent emergence of HTML5 has provided a lot of support for advanced technology, such as local storage, geolocation and semantic tagging. But Web components are designed specifically help to make developers more productive, Bildeman said.

However, Web Components does require a different way of thinking about how to build Web apps, Bildeman said.

Web Components is actually an umbrella term, covering four different specifications that, when used together, provides the foundation for building a componentized Web pages.

Perhaps the core technology for Web Components is an import tag for HTML. While it sounds simple, the HTML import tag can save developers from what is known as dependency hell, in which they must declare, in the body of a page, all the libraries that will be needed to execute the code.

Instead, developers can embed that information within a component, and have the page call the component. The component can then be used by other pages as well.

The import tag allows developers to define their own elements, which can then be called by the browser.

Users can write their own elements, use those written by others, or even extend the elements that others have created with new features. Elements can also contain connections to other resources on the Web by wrapping around external APIs (application programming interface calls).

“There is logical separation now. It’s about compartmentalizing the problem, so it’s no longer just a bunch of JavaScript, HTML and CSS that you are hoping will work together,” Bildeman said.

Support coming from other browsers?

Beyond Google, other browsers makers seem to be taking a hard look at the technology.

Mozilla has already included a number of functions to support Web Components, and Apple and Microsoft appear to be investigating the possibility of including support in their browsers. Opera, because it uses Google Chrome Blink layout engine, will support Web Components by default.

Google has been testing Web Components in its own operations. The Polymer site uses components. Google’s site for documenting the progress of Chrome development also uses components to fetch data from a database and render it on screen.

The ChromeOS operating system, used in Google Chromebooks, uses Web Components to power its virtual keyboard and media player.

Interest in Web Components seems to be growing elsewhere as well. A number of component registries where developers can use and contribute their own components have popped up, including Custom Elements, Component Kitchen, and WebComponents.org.

“This ecosystem is just getting started,” McNulty said.