Web components: present and future in web development

Web components are a W3C standard which allow us to break down the development of web applications into small containers that encapsulate markup, JavaScript code and styles CSS, receiving the name of components.

This allows us reuse them in different parts of our applications and also to display our services in other applications by simply using an HTML tag.

Origin of web components

Web components arose out of a proposal from Google to W3C, almost at the same time as the JavaScript MVC frameworkAngularJS, also created by the search engine. This framework introduced the concept of “directive”, in which we could create our own HTML tags to encapsulate a HTML markup with its own area of execution.

AngularJS gave us controllers, routing, filters, services, etc. and the directives were there, although to start with they were not used so much. Over time they started to spread due to third developers who shared their implementations by way of Open Source projects. In this way, in our applications we could import these projects and use them in our developments.

At the same time, W3C was working on the concept of web components that fed heavily from this concept that began in AngularJS.

Elements of a Web Component

We need several elements to create a Web Component:

–       Templates

–       Custom Elements

–       Shadow DOM

–       HTMLImports

Templates

Templates are an HTML5 element that allow us to create templates to present the data, and they are native to the browser. In our HTML we would have something like the following:

<template id=”profileTemplate”>

<div class=”profile”>

<img src=”” class=”profile__img”>

<div class=”profile__name”></div>

<div class=”profile__social”></div>

</div>

</template>

This would represent the markup for a user profile in a web application. None of the code included within the <template>will be visible in the browser until it is enabled, even if it is within the code.

To be able to enable it and inject data, we must do so via JavaScript with a similar code to the following one:

var template = document.querySelector(‘#profileTemplate’);

template.querySelector(‘.profile__img’).src = avatar.jpg’;

template.querySelector(‘.profile__name’).textContent = Mi Nombre’;

template.querySelector(‘.profile__social’).textContent = ‘Sígueme en Twitter’;

document.body.appendChild(template);

Custom Elements

Custom Elements allow us to define our own HTML element (similar to the AngularJS directives).

According to the standard, the correct way to create a Custom Element is with the JavaScript Object.create function and the HTMLElement.protoype element. Based on the above element, the code would look something like this:

<template id=”profileTemplate”>

<div class=”profile”>

<img src=”” class=”profile__img”>

<div class=”profile__name”></div>

<div class=”profile__social”></div>

</div>

</template>

<script>

var MyElementProto = Object.create(HTMLElement.prototype);

window.MyElement = document.registerElement(‘user-profile’, {

  prototype: MyElementProto

  // other props

});

</script>

This allows us to use the <user-profile> element in our application.

Shadow DOM

Shadow DOM is the DOM that encapsulates our component. It does not belong to the original DOM of the document or web page, it is within the component that we have created. It has its own area of execution and its own CSS style. Think of it as a DOM added to the page’s primary DOM.

One way of viewing the shadow DOM is in the web inspector on the Chrome browser, by clicking on the recently-created element. This shows the DOM that encapsulates the components:

▾<user-profile>

▾#shadow-root (user-agent)

<div class=”profile”>

<img src=”” class=”profile__img”>

<div class=”profile__name”></div>

<div class=”profile__social”></div>

</div>

</user-profile>

This is because in the source code we would only see <user-profile></user-profile>

HTML Imports

Like in CSS, we can import external files with @import and in JavaScript using require (using Node.js or Browserify) or import {module} from ‘libreria.js’, with HTML Imports we can import HTML files containing the web components.

Assuming that our <user-profile> is in a file called ‘user-profile.html’, the way to import it into our application would be as follows:

<link rel=”import” href=”user-profile.html”>

Compatibility in different browsers

Like any web standard, each browser takes its time to implement it and for it to be 100% usable. One of the best sites to check whether a certain element, CSS property or JavaScript API is available in the browsers is caniuse.com

However, specifically for web components, we have one that is adapted to the main elements of the standard. This is: http://jonrimmer.github.io/are-we-componentized-yet/

In it we can see that at the time of writing, Chrome and Opera already support all of the requirements to implement and use web components. Firefox almost supports it, except for leaving HTML Imports stable. Safari does not yet support it natively and Microsoft, in its Edge v13 version, only supports the <templates> for the time being.

But through Polyfills we can use the standard in almost any browser and, combining them with the Polymer library (also developed by Google), we can create Web Components in a straightforward manner, share them and use them in the browsers.

Using a Polymer WebComponent

The first thing we must do is import the webcomponents.js library, which is a Polyfill developed by the same Polymer team, so that the web components are compatible in browsers that do not yet support it natively.

Next, the component that we want to use is imported, for example, the Google Maps component.

And, finally, within the BODY, we can already use that component. The code would be something like this:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Ejemplo Polymer</title>

<script src=”components/webcomponentsjs/webcomponents-lite.min.js”></script>

<link rel=”import” href=”components/google-map/google-map.html”>

</head>

<body>

<google-map latitude=”40.415848″ longitude=”-3.701905″ zoom=”15″></google-map>

</body>

</html>

Which would show a map like the following one in the browser:

Creating a Web Component with Polymer

To create a web component with Polymer, we must follow the style guide and good practices that the Google team promotes. The first thing we need to do is to create an HTML file with the name of the component that we want to develop.

Within this file we import Polymer to be able to use the <dom-module> tag. The dom-module id and the ‘is’ of the Polymer function must have the same name as the webcomponent name.

Within <dom-module>, we insert the <template> tag for the HTML markup, the <script> for the JavaScript code and <style> for the CSS of the component.

<!– Fichero components/contact-card/contact-card.html –>

<link rel=”import” href=”../polymer/polymer.html”>

<dom-module id=”contact-card”>

<style>

        …

</style>

<template>

<img src=”{{image}}”>

<span>{{name}}</span>

</template>

<script>

        Polymer({

            is: ‘contact-card’,

            properties: {

                name: String,

                image: String

            }

        });

</script>

</dom-module>

And we can reuse it in our developments as follows:

<link rel=”import” href=”components/contact-card/contact-card.html”>

<contact-card name=”Carlos Azaustre” image=”avatar.jpg”></contact-card>

The Component-based Web

Last year we saw how the development of web applications was becoming “componentized”. With the boost of React and Polymer, this new method of development is becoming more popular.

Now the focus is on small components with their own logic and which gradually form the structure of an application, instead of a complete Model-View-Controller code.

This new method of development has made popular by React, the library created by Facebook. React, unlike Polymer, does not create exportable web components by default, instead it componentizes the actual application. This is the main difference when we talk about Components and Web Components.

A Component is a piece in our application, such as a menu, a header, a navbar, an item, and so on. We break down the logic of our application into these small containers without them being exportable for another application.

On the other hand, it is understood that a Web component exports an API or a third-party service, such as <google-map> or <youtube-video>, or a payment platform like PayPal or Stripe, via a series of HTML tags.

Angular for its part is leaning toward this method of programming. Its new 2.0 version follows this method of creating components and its 1.x versions (specifically 1.4, 1.5 which is in the beta phase, and the future 1.6) are leaning toward this.

The PayPal Engineering team is developing/focusing on directives to encapsulate templating and controllers inside them. Then, in the routing, instead of giving a templateUrl with an HTML and a controller, it gives the directive we want to load for a specific URL.

This fits in with the fact that the directive function in Angular will be replaced by the component method in Angular 1.5, fulfilling the same purpose but indicating that a directive does not have to be extensive HTML content, it can be limited to a smaller component.

It also fits in with the new Angular 2 routing system, which can already be used in Angular 1.x with ngNewRouter, which is component-based.

Conclusion

Everything seems to suggest that the present and future frontend web development will be component-based. This way we break our problems down into smaller pieces, with their own style and functionality, and we put them together to form larger applications.

It is the same logic as followed in the Backend, where monolithic systems that controlled all of the application logic are giving way to microservices with small assigned tasks.

We are without doubt facing a time of constant change in the web and we need to be kept informed and up-to-date to be able to get the most out of our professional developments

References:

●      WebComponents and Concepts by Todd Motto

●      Aprende a crear WebComponents con Polymer by Abdón Rodríguez

●      La web orientada a componentes by Javier Vélez

●      HTML5Rocks

●      WebComponents.org

Image: Steven Depolo

By Carlos Azaustre:

Carlos Azaustre is a Telematics Engineer. He specializes in JavaScript fullstack web development. He works with AngularJS and NodeJS on a daily basis. At the moment he is CTO and CoFounder of Chefly, a sharing economy startup that helps you to make first-rate homemade meals.

Follow us on @BBVAAPIMarket