Jurrien Piris

Full-stack developer

Usage of Web Components

The last couple of years, the way of front-end development - and te increasing popularity of component-based architecture for web development - massively changed the way developers built user interfaces. Front-end developers totally left the traditional MVC arcitecture behind and they started to chunk up their interfaces into reusable web components. However, web components don't offer anything more than a UI layer, that's why front-end developers have invested themselves into JavaScripts frameworks like React and Vue.

Usage of components

The goal for this arcitecture is to seperate the (small) parts of our interface into it's own, independent, components. If we create small independent components we make heavily use of reusability and single-responsibility. An interface can consist of different types of components: from simple “leaf” components like buttons or inputs, to more complex compound components such as a log-in form, which itself consists of a number of other components.



I personally tend to seperate my components into two categories: leaf components and compound components. Leaf components are small and independent components such as buttons and inputs. Compound components are more complex such as forms or a navigation. A compound component will likely consist of a number of other components that communicates with other via events or a store.


Browser support

Will this work in every browser? Yes, with the appropriate polyfills. Browsers like Chroms, Safari and Firefox support most features natively. With Edge announcing their intent to adopt the Chromium engine, soon all major browsers will natively support Web Components 🎉.



In truth, the uptake for web components has been pretty slow, but it has seen a recent boost mostly due to improved browser support. Fortunately, Web Components are fully polyfill-able, which allows us to achieve backward compatibility for older browsers that don’t natively support Web Components, such as Internet Explorer. This can, however, make polyfilled browsers performance slower.

Example

Usage


So what are the real benefits of Native Web Components?

If you build a reusable component library using Web Components you will be able to adopt to all the JavaScripts frameworks such as Angular, React and Vue. So Web Components can be a good solution for companies that make use of multiple JavaScript framework across different sites and would like to keep the components consistent. Therefore you don't have to update your components according to every JavaScript framework, you only need to update that one Web Component that is used across all the websites.

Or imagine your company is currently using Angular and you have made all your components in Angular. Then far into the future, due technology advances, business decisions or whatever, your company decides to change the JavaScript framework to Vue. Now, because you have made your components into Web Components, you can still make use of the components.

Thank you for reading! :)