I like to throw around the term “new hotness” when I talk about the web. When I say that, I am referring to an idea, technique, or piece of code that is gaining popularity and might be useful. Web components are the new hotness.
In recent years there has been a focused concept to make the web more modular. This forces for developers to write more efficient code and not write sites and applications where every piece of code depends on other pieces. The idea of small independent chunks of code and functionality has been working quite well for back-end systems and client side dynamic scripts, so naturally some developers started creating small pieces of modular code for HTML elements. AngularJS was an early adopter of the component paradigm with directives, and other libraries like KnockoutJS make creating and using web components a breeze. So let’s dive in!
The What
Web components are reusable components for the web. They are typically complete with markup, functionality, and sometimes styling. Each component is considered a custom HTML element (for example: <div> is a current valid HTML element, <google-doc> might be a web component for a Google Doc). Each component should always extend an existing element where possible. Web components are on their way to becoming a recommendation for HTML specifications.
The Where
They can be used in any HTML document. Scripts are loaded onto the page which will enable the usage of the custom HTML element.
The How
AngularJS
This is a simple custom directive in AngularJS.
Highlights
-
Line 10: Restricts usage of this directive to an element (restrictions can be one or more of Element, Attribute, or Comment).
-
Lines 11 – 14: Binds the attributes from our custom directive to each elements own scope.
-
Lines 15 – 16: Simple template to inject our team member into the DOM (note that for both Angular and Knockout it’s usually going to be best to use a separate template file).
Usage
KnockoutJS
This is a simple custom component in KnockoutJS.
Highlights
-
Line 3: Registers our custom component to be used as an element.
-
Lines 4 – 8: Takes the parameters that we pass and assign them to properties in the components view-model.
-
Lines 9 – 10: Simple template to inject our team member into the DOM.
Usage
Google Polymer:
This is a separate HTML file from our main view, and it is imported to the document. As you can see, Google Polymer implementation is quite different from the above JavaScript frameworks. Custom components in Polymer are typically fully encapsulated – meaning all style, markup, and scripts are contained in a single file. The reason for this is that polymer injects the element as a shadow DOM, and your other style sheets and scripts won’t have access to it.
Highlights
-
Line 1: Our custom element must be defined as a polymer element, with its own name and attributes.
-
Lines 2 – 28: Each polymer element has only one template that includes style and markup.
-
Lines 24 – 27: Simple template to inject our team member into the DOM.
- Lines 29 – 31: Any interaction needed on the element can be added here, but the minimum is shown here to register the element so it’s recognized by the browser.
​
Usage
Result
Since I’m using the same template for all of the implementations here, the result is going to look the same. Here it is (made pretty with some extra CSS) :
The Why
The goal of web components is to make the web more efficient. Each piece is to be reusable across any web project, staying in-line with the Don’t Repeat Yourself philosophy. In my opinion, web components are going to play a large role in front-end development in the near future. Would you like to have the same piece of code written in a bunch of places and every time you need to modify it you have to do it in all of those places? Or would you rather have that code written once and distributed to every place you need automatically, and whenever you need to make a change you do it once? I’ll take the latter.
The Who
Who can make web components? Well, anyone! With that in mind, some very smart people have some web component libraries or frameworks that you can use to make life a little bit easier:
AngularJS Directives
Although Angular is a lot more than directives, directives are a very big help in Angular, allowing you to write code once, and reuse it wherever you need to
KnockoutJS
Knockout is a great MVVM JavaScript framework with really good and simple implementation of custom components, it even supports ancient browsers
Google Polymer
Google has a very extensive collection of great web components, most of which are in designed alongside their Material Design guidelines
With these resources you should be able to get a good start on using web components. If you have any questions feel free to leave them in the comments or contact me directly and I’ll help you out!