Five reasons why Web Components could complement JavaScript frameworks

So it be said, that “web components are the future”…. but yes, we have heard these murmurings since 2011 when they were first introduced — and that (in terms of web development) is many moons ago!

What are web components?

Conceptually, “web” components isn’t a new thing — they create reusable components — which is what made frontend frameworks like Angular/React/Vue are so popular.

** Disclaimer: I know React is a library and not a framework, but for the purposes of this post I will refer to it as a framework **

In addition web components don’t offer anything deeper than the UI layer (and why should they) so developers have invested themselves in JS frameworks like Angular and Vue.js.

In truth, the uptake for web components has been pretty slow, but it has seen a recent boost mostly due to improved browser support.

How do they work?

Here’s an example of how web components are defined:

class MyWebComponent extends HTMLElement {...}
window.customElements.define('my-web-component', MyWebComponent);

Here’s a quick look at how they are implemented:

<my-web-component value="something"></my-web-component>

For more on web components, check out this link:

While others pitch web components as a threat to React/Angular/Vue, is there a possibility that they could actually compliment them?

Have no fear, this isn’t another comparison on framework v framework or frameworks v web components, I despise those conversations…. wouldn’t the world be a better place if we all just worked together?

Here’s 5 reasons why I think web components, could actually compliment the big frameworks:

1. Web components are a standard

One major advantage Web Components has, is that it is a defined standard included in the HTML spec.

How many times have we sat in a meeting with some big personalities while they struggle to agree? Web components take that decision out of their hands as the standard is already set in the HTML spec.

With this being the case, could web components force the big frameworks to play by the rules and work towards adopting standards?

2. Web components are compatible

We have already established that web components are a standard included in the HTML spec, so this also means they have native support.

As they are native, this inherently means that they are compatible with the big frameworks.

None of the big frameworks can avoid supporting HTML (as this is required to render in a browser) therefore support for web components is guaranteed.

Now we can build re-usable components that can be used across multiple frameworks!

Also — because it’s just HTML, CSS, JS — no fancy transpilation required!

3. Web components are simple

Web components don’t do much beyond providing a way of creating re-usable components with some fancy encapsulation.

They aren’t opinionated on how you should structure your code.They don’t provide state management, data binding or even inter-component communication.

Use web components to create re-usable components and allow your framework to handle the rest.

Image result for reusable components meme

4. Web components are considered

What has been interesting, is the fact that all the big players seem to be on-board with the idea of the web components or at least considering them.

This text is taken from the official React online docs:

React and Web Components are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.

React is pretty much backing this argument, but what about Angular?

As of Angular 6, Google have included Angular Elements, which is their own take on… yep, you’ve guessed it… web components. Within Angular you can now define your Angular components as custom elements similarly to how it was shown at the beginning of this post.

This means you can use Angular components in any web application by including them as custom elements. Check out this post for more:

5. Web components are the future

I currently work for a large Fintech corporation with lots of widely-distributed applications.

What if they could be migrated into a single cohesive user experience regardless if they are native Javascript, jQuery, React, Angular etc?

Web components could provide a native wrapper for such components allowing them to co-exist in a single page.

Each application could be completely decoupled in terms of build and deployment processes but have their components defined as web components.

Now you can have lots of application teams contributing to a single application with strong encapulsation using web components.

Thank you for taking the time to read my article.