If you're involved with the front-end of web applications, there are probably very few people who haven't heard of the term Web Components. There are already many related articles, and many people have started to use it. But how many of you can succinctly explain to those around you why this is such a revolutionary technology? In this article, I'd like to attempt to do just that.

Digital parts distribution revolution #

Major changes are currently occurring in the distribution of software components.

Remember the open source environment of a few years ago? Repositories were centrally managed using Subversion, releases were done using zip files, and testing was done manually. Each project had its own bug management system for registering issues, which made it difficult to get started and sending patches a pain.

The open source environment has undergone remarkable development, beginning with the emergence of git and GitHub. With the establishment of network repository environments, automated testing and deployment through CI (Continuous Integration), and the development of package managers that allow for easy downloading of the latest source code when needed, everything has become easier and faster. The cycle from development to reuse of software components has been shortened to minutes, stimulating feedback and contributions (patch/pull requests) through the community, and systems for improving quality have become more efficient than ever before. It's no exaggeration to say that open source is finally gaining a true ecosystem.

This trend has also been extremely useful in front-end development. In particular, the combination with grunt, npm, bower, etc. has become quite widespread.

UI Component Ecosystem #

One of the most successful front-end software to date is jQuery. Many developers utilize plugins like jQuery UI, which not only allow for DOM manipulation but also allows for the easy creation of complex UIs. jQuery UI also significantly lowered the barrier to implementing user interfaces that are difficult to achieve with plain HTML, such as calendar UIs (datepickers), tabbed interfaces, and dialog boxes.

Of course, many competing UI libraries have also emerged, including Kendo UI, ExtJS, Dojo, Bootstrap, and the list goes on and on. However, one thing is certain: each has its own unique philosophy and approach. Therefore, to actually use one, you must start by learning the philosophy and approach, rather than the API. Also, with so many options, different people have different preferences and are better suited to different libraries. Therefore, if you're forced to choose one for a project, it's important to remember that someone will have to compromise or incur additional learning costs.

Web Components

So, what if UI libraries could be used with the same philosophy and practices? In other words, "what if the philosophy and practices of UI components were standardized?"

The answer is Web Components. Web Components have the following features:

  • Planned to become a web standard
  • Can be used as an extension of existing HTML/CSS/JavaScript knowledge
  • UI components can be created as HTML tags
  • Components are encapsulated, so they do not pollute the outside world
  • Reusable
  • Easy division of labor

It's easier to understand by seeing it in action than by reading about it in theory. Here's a simple example.

Click on the image to see a working demo (http://agektmr.github.io/webaudio-controls/sample1.html). The source code for this demo is available here (https://github.com/WebMusicDevelopersJP/webaudio-controls). These cool-looking knobs were created using Web Components (Polymer). Drag them up and down to increase or decrease the parameter. Hold down the Shift key while dragging to increase or decrease the parameter by one. The changed parameter will be set to value.

<webaudio-knob
  diameter="64"
  max="100"
  sprites="100"
  src="img/LittlePhatty.png"
  step="1"
  style="left: 128px; position: absolute; top: 76px;" tooltip="Knob2 tooltip" value="50">
</webaudio-knob>

Best of all, if you look at the source, you'll notice that these elements use the <webaudio-knob> tag. The knob's appearance and range can be customized using attributes, just like with native HTML elements.

What I want you to pay attention to is what is in the head tag

<link href="webcomponents/webaudio-controls.html" rel="import"></link>

This line enables the use of <webaudio-knob> (and actually loads the polyfill platform.js). Wouldn't it be great if you could achieve this with just HTML tags, without any JavaScript?

As Web Components become mainstream, users will be able to treat UI components just like native DOM elements, without worrying about ideology or conventions.

I'd like to see some more examples

As a simple example, how about Twitter Button? By providing the necessary information as attributes using <twitter-button></twitter-button>, you can display a Twitter button. If you've ever implemented a Twitter button, you'll know how easy this is.

You can also find publicly available UI components made with Web Components on the site customelements.io.

Here's a perfect video for you. At a recent Google event called All About Polymer, Rob Dodson demonstrated live coding of an app using Google Maps. It's impressive to see how a flashy app can be created by simply adding tags. It's in English, but with subtitles, so be sure to check it out and practice your English.

Building blocks of Web Components #

Here's a bit of technical explanation: Web Components is made up of four main technologies:

*Custom Elements *HTML Imports *Template

  • Shadow DOM

Let's briefly explain each technology.

Custom Elements #

This allows the browser to recognize your custom tag. This tag can have properties, methods, and events, making it similar to a native DOM element. In the example above, <webaudio-knob></webaudio-knob>:

var knob = document.querySelectorAll('webaudio-knob')[0];
knob.setValue(100);

This will change value to imperative (the opposite of declarative) from JavaScript.

knob.value = 100;

You can also do this.

In fact, Custom Elements are already being used on GitHub.

Looking at it in DevTools

  • The time tag is extended (is="relative-time") to make the time displayed within the tag relative.
  • The title-format attribute is used to specify the format for the date and time displayed in the tooltip.

That's how it seems to be used.

For unsupported browsers, it seems they also use Polymer Custom Elements Polyfills. I was amazed by how it works.

Template #

It provides standard template functionality. The concept of templates has been under consideration for a long time. Recently, Handlebars.js, Backbone.js (Underscore), and AngularJS templates have become popular, but think of this as a web-standards version of those. Compared to existing hacks,

  • No matter where you place it, the template is not recognized as DOM, so it won't execute the script or retrieve images.
  • When you import it, it's recognized as DOM rather than a string, making it easy to handle.

It provides functions that seem possible but are not. Please note that it does not provide placeholder or binding functions.

HTML Imports #

You can load multiple resources with a single tag. Whether it's jQuery UI or Bootstrap, you had to include JavaScript, CSS, etc. separately. By using the import tag, you can include UI components and their required resources with a single tag.

Shadow DOM

You can add encapsulated HTML elements. At first glance, the effect is that you can add invisible markup, but its bigger role is encapsulation. A common pitfall with UI libraries is

  • Using the same class name can cause styles to be applied to unintended elements.
  • Styles applied to other elements can affect unintended areas.

But Shadow DOM enables encapsulation by separating the outside world from the inside world.

Browser vendors' stance #

Although we said we are aiming for standardization, standardization cannot be achieved unless browser vendors are on the same page. However, each browser vendor is focusing on Web Components, and is working on implementation and specification development in parallel.

Google #

Google plays the largest role in Web Components. All of the specifications were written by Google engineers. Google Chrome has already implemented most of the features, and version 36 will incorporate HTML Imports, meaning all features will work without the about:flags flag. Also, while still in alpha, they are developing a framework based on Web Components called Polymer. Once completed, they are working to enable various components to run on it. At the same time, they are also developing a polyfill (a library that emulates functionality in JavaScript) called platform.js to enable Web Components to work in browsers that do not support it.

Mozilla #

After Google, Mozilla is undoubtedly the most active developer of Web Components. They've developed a framework called x-tag and have also released a collection of UI components called Brick.

Apple #

When Blink was forked from WebKit, Shadow DOM was removed, and at one point, support for Web Components was seen as negative. However, it was recently announced that development would proceed on a separate branch and people are now interested, albeit cautiously.

Microsoft #

As far as Microsoft's support for Web Components is concerned, both features are currently under consideration, as seen on status.modern.ie, but they are showing interest, including related to the HTML Templates specification.

Use Cases #

In what situations can you use Web Components? Here are some examples:

Create product-specific UI components #

When developing a service, we design it with the UI as a component. This allows the team creating the UI components to focus on their functionality, and the team using them can proceed with development with the assumption that the interface will work as expected. One of the benefits of Web Components is that it makes division of labor easier.

Creating shared UI components across multiple services #

Companies that operate portal sites or sites that integrate multiple services often want to unify the theme and UI. This is where Web Components can really shine. Many sites already have infrastructure in place to deliver CSS and images from a common server, so this can be achieved by replacing it with Web Components.

Use public UI components #

If you want to create a simple service on your own, it can be quite a hassle for a developer to handle the design as well. While it's great to have ready-made UIs like Bootstrap, Web Components make it relatively easy to achieve more complex designs. By searching for and reusing publicly available Web Components libraries on sites like customelements.io, you can significantly reduce development time. While there aren't many of them yet, as Web Components become more widespread, it may actually become more difficult to find the ones you need.

Where to learn #

If you've read this far and are excited to try Web Components, where can you learn how to use them? It sounds like a lot of work to read the specs, right? A spec is just a spec, so it doesn't tell you how to use it. Fortunately, there are already many articles on HTML5Rocks. These articles are maintained, so you can rest assured that they follow the latest specifications (implementations).

However, HTML5Rocks articles are written in English, so it can be difficult to read them... For those of you who find it difficult, I have translated them into Japanese.

Other Japanese materials #

Where are the questions? #

If you're asking in Japanese, I'm sure someone will answer you if you ask on the html5j mailing list. If you're asking in English, I recommend using the polymer tag on StackOverflow.

summary #

If someone asks me, "What's so great about Web Components?" I'd answer:

Web Components is a technology that dramatically improves development efficiency by standardizing web UI components and incorporating them into an ecosystem.

We look forward to seeing all of your amazing UI components!