For the majority of time in modern JS world, frameworks have held the spotlight. After jQuery fell from peak popularity, JS MV* frameworks and similar libraries rose to the top. These including: Angular, React, Ember, and Backbone just to name a few more famous ones. Despite this, there is one older concept that has been gaining enough traction to compete and compete with them. That being Web Components!
What Are Web Components
Originally introduced in 2011, Web Components are a vanilla approach to building reusable code modules in HTML/CSS/JS as custom HTML elements. Similar to the above-mentioned frameworks and libraries, it is a good way to architect code logic in your library in the most optimal way.
Building one out couldn’t be any easier as well. As an example, look at the code snippet below:
class TestComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<p>Test</p>`;
}
}
window.customElements.define('test-component', TestComponent);What this code above does is define a test custom component for us which will render a paragraph specified in the connectedCallback method. The define call we used is what makes the component available in the DOM.
Web Components and Modern Frameworks
It’s easy to see how they could be competitive with the other modern tools we’ve grown accustomed to today. For the most part, they do the same thing, without the need for the same level of dependencies you’ll find in the node_moduels folder of applications using modern frameworks. However, it is for those same reasons as to why they are great compliments to them as well.
You see, with web components they are nothing more than vanilla JS components with cross browser support. No real dependencies associated with it except for maybe a polymer to be used when older browser support is required. So, that means that they could be a great future proof route to building views in your modern applications.
As a real world example, think of an application built in the latest framework of its time. However, as the years go by a new technology is introduced and takes the industry by storm. In a typical project, it would take a complete rewriting of the application to migrate over. However, with web components, that rewrite would be cut down since all the view logic is written in a way that’s easy to transport from framework to framework.
In Closing
Web components are great! They provide us with the flexibility we need to build our applications for the present, and maintain relevance in the future. In upcoming articles we will keep digging deeper into them, and learning more about how well they play together with the frameworks/libraries we already know and love!