{"id":997,"date":"2019-12-04T08:00:00","date_gmt":"2019-12-04T07:00:00","guid":{"rendered":"http:\/\/cmagazine.test\/thinking-in-web-component\/"},"modified":"2021-12-23T15:30:51","modified_gmt":"2021-12-23T14:30:51","slug":"thinking-in-web-component","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/thinking-in-web-component\/","title":{"rendered":"Thinking in Web Component"},"content":{"rendered":"

The development of Web Application<\/span> has led us to rewrite some pieces of User<\/span> Interface<\/span> so many times in\u00a0 different varieties of JavaScript frameworks<\/span> for compatibility and interoperability<\/span>.<\/p>\n

When we build our User<\/span> Interface<\/span>, we have to think about performance, accessibility, compatibility, reusability, extensibility and maintainability. In my personal opinion, many of these aspects are the same challenges we have in any other \u201cclassical\u201d application<\/span>. Object Oriented Programming<\/span><\/strong> is a paradigm mostly used to build enterprise applications<\/span>, it uses concepts such as encapsulation<\/span>, inheritance, interoperability<\/span> to gain robust, reusable portions of code called Classes<\/span>. Then we have SOLID Principles<\/strong> such as Inversion of Control, Single Responsibility and finally, the best one, the simplest principle in programming: DRY<\/strong> (D<\/strong>on\u2019t R<\/strong>epeat Y<\/strong>ourself).<\/p>\n

In the Web Development<\/span> world, to achieve these important goals, we need to introduce a new idea, called \u201cComponent<\/span><\/strong>\u201d. It\u2019s not a new concept and it has been around for a long time. I can think about Component<\/span> like a Class<\/span> in OOP<\/span>.<\/p>\n

One of the first frameworks that introduced the concept of components<\/span> was AngularJS<\/span><\/strong> (do not confuse with Angular, they are very different).<\/p>\n

Today we have a lot of frameworks and libraries, like Angular<\/strong>, React<\/strong> or VueJS<\/strong>, which are trying to solve the problem of \u201cThinking in Web Components<\/span><\/strong>\u201d; they continue to use the idea of Component<\/span>, but they abstract from the DOM<\/span> (Document Object Model<\/span>). They give us the power to define our custom HTML tag<\/span> in order to enrich the \u201cgrammar\u201d of the HTML language. We are able to define our custom behaviour, with some JavaScript code, attached to these new elements.<\/p>\n

One of the most powerful features of Angular is to be able to define a new syntax constructor<\/span> by using the decorator @Component<\/code>. It allows developers to decorate a class<\/span> with some metadata in order to define the custom tag HTML<\/span> with template (View) and a class<\/span>, which defines the behaviour of the component<\/span> itself. In addition, we can take advantage of the Shadow DOM<\/span><\/strong> to provide complete encapsulation<\/span> for our components<\/span>.<\/p>\n

All elements and styles that belong to an HTML document<\/span> are defined in one global scope. A Shadow DOM<\/span> is a \u201cDOM<\/span> within a DOM<\/span>\u201d, where we can build an isolated DOM<\/span> tree with our own elements and styles.<\/i><\/p>\n

These frameworks have their own definition and implementation of what a component<\/span> is, but they lack a common API<\/span>. They share only the idea about what a component<\/span> should be, but you cannot share a component<\/span> with different technology stacks or, at least, it is not a quick job<\/span>. They also implement a custom DOM<\/span> like Virtual DOM<\/span><\/strong> in React and VueJS or \u201cEmulated Native Scoping\u201d in Angular to emulate Shadow DOM<\/span>.<\/p>\n

In \u201cGet hyper-excited for web standard<\/span><\/b>\u201d, Jiayi Hu\u2019s talk at Codemotion Rome 2019<\/strong>, we saw what a Web<\/span> Component<\/span> is in a \u201cnative\u201d way using standard API<\/span>, that tries to resolve this fragmentation caused by the presence of a non-standard<\/span> way of building reusable<\/span> piece of code.<\/p>\n

Web<\/span> Component<\/span><\/b> is a set of different APIs<\/span> that allow us to create highly reusable<\/span> UI<\/span> components<\/span> that will work across modern browsers and they can be used with third party frameworks and libraries. They allow us to define reusable<\/span> custom elements via standard specifications, such as Custom Element and Shadow DOM<\/span>.<\/p>\n

Custom Elements<\/h2>\n

The Custom Elements API<\/span> provides a way for programmers<\/span> to define our own custom HTML tags<\/span><\/strong>, with fully-featured DOM<\/span> elements with attached behaviour on them. With Custom Elements API<\/span>, we can instruct the browser<\/span> parser to properly construct an element and how elements should react to the user<\/span> events.<\/p>\n

To define our custom element, we can use some of the newer ES6<\/span> JavaScript<\/span><\/strong> features such as Classes<\/span><\/strong>. We need to extend HTMLElement<\/b> base class<\/span> and call the super()<\/code> method<\/span> inside the constructor<\/span><\/b>. Then we can have one method<\/span> of the lifecycle of a component<\/span>: connectedCallback<\/b><\/code>, but it is not mandatory to have one. This is a particular method<\/span> that it is invoked when our component<\/span> is created and added to the DOM<\/span>. Inside this method<\/span> we will do initialisation logic, data fetching or something else that can occur in the beginning.<\/p>\n

In the connectedCallback()<\/code> method<\/span> we can set the textContent<\/code> of our element within a timer function like setInterval()<\/code>, but we can have complete access to the DOM<\/span> tree, such as querySelector<\/code> and other methods<\/span> to get access to the DOM<\/span>. Because of the use of a Timer, we need to write the logic to release it inside the disconnectedCallback()<\/b><\/code>, another life-cycle method<\/span> of the Custom Element API<\/span>, called when the element is detached from the DOM<\/span> tree.<\/p>\n

Finally, we need to register our component<\/span> to the DOM<\/span> with the define()<\/b><\/code>. We need to make sure we define the name of our custom element with at least one dash in the name, in order to prevent collision with native elements that have no dashes in the name. Here is an example:<\/p>\n