At the last year's Devoxx conference there were a lot of talks on component based web development and especially on Web Components. What is this new technology, and what implications does it have on UI modernization?

Component based development

Component Based Development focuses on the decomposition of the design into individual functional or logical components that represent well-defined communication interfaces containing methods [tutorialspoint] A component is a package or module that is reusable and replacable and defines a set of functionality exposed as a higher level interface and can itself be composed of other components. With user interfaces in mind components can be described as reusable parts such as buttons and text fields that can be combined into a user interface or into new components.

Components on the web

The notion of Component Based Development for the web is not new. Technologies like ASP.NET Web Forms made it possible to develop a webpage with components like buttons, lists, tables and much more. A lot of libraries appeared that offered their own custom components that could be used in a webpage. The developer could even create new components by combining existing components. This way of development started to disappear and the new trend was to build everything in plain HTML. One could argue that this was because of the movement of server side generated HTML to client side generated HTML. Because a lot of the components generate vanilla HTML at the server this would not be possible to use in the modern client side frameworks.

So this is the end of the component based era, or is it?

Lately the notion of components has started to return. Frameworks like AngularJS and Knockout support some way of creating custom components. Custom tags can be defined that encapsulate an HTML structure and some sort of behavior. The developer can use these new components as regular HTML. This allows the developer to create and use new components by using standard HTML or other custom components to create new components. Although these components are very useful it requires the use of one of these specific frameworks. Sharing components between different frameworks is also very difficult, if not impossible. But there is a new kid on the block since 2013, Web Components.  

Web components

The HTML specification provides a set of built-in elements like <video> and <button>. Each element has its own API, attributes and behavior. These are very useful but basic components. To create more complex behavior one would need a whole block of HTML and possibly some JavaScript and CSS to make it work. Even something as simple as a set of tabs can require quite a lot of code. Web Components are a suite of four specifications, of which three are still a draft, by the W3C that specify how the HTML vocabulary can be expanded with custom components. </button></video>

The HTML Template specification introduces the <template> tag. This tag is used to create a template structure. This structure can be used to stamp out multiple instance of this structure.</template>

The Shadow DOM specification makes it possible to create a part of the DOM that is hidden to the normal DOM. This prevents CSS rules and DOM queries from crossing the shadow DOM boundary. This provides functional encapsulation for the DOM subtrees used by the Web Components.

The Custom Elements specification introduces an API to create custom tags. This makes it possible to use custom components with normal HTML syntax.

The HTML Imports specification enable importing external HTML files. This makes it easy to import custom components by just importing the HTML file that contains this custom component.

Because Web Components are so new, most browsers do not yet fully support them. At the time of writing only Chrome and Opera fully support all specifications. All other browsers only fully support the template specification. To still use the power of Web Components, Google and Mozilla created the Polyfill library to fill the gaps that are not yet supported.

On top of this library Google built Polymer, and Mozilla built X-Tag. These libraries simplify the creation of Web Components and provides extended functionality such as data binding. Other than browser support it can take some time to create custom components. Polymer, a Web Components library by Google, simplifies and extends the creation of Web Components.

UI Modernization

How can Web Components be useful in UI modernization? Usually a legacy system consists of hundreds of different screens. Modernizing all these screens will take quite some time. Even more so when a lot of structures are found on many different screens. Web Components allow for rapid development because screens can be defined by using meaningful and reusable components.

Maintenance of these screens is facilitated because a developer can just read the meaning of all the components and is not overwhelmed by a web of <div> tags and the CSS/JavaScript that accompany it.</div>

Development and maintenance

Even though the Web Components standard is not yet finished and not fully supported by all browsers it is still clear that this is a huge step forward for web development. By using the Polyfill library and perhaps Polymer the power of Web Components can be used today in all major browsers. Because the custom elements make development and maintenance of screens so much easier it makes it possible to modernize lots of screens in a short time.

For the modernization of legacy screen technologies that are already component-oriented, the development of Web Components would allow new migrations that capture component behaviors more natively.

Share this article