Web components - standards vs. proprietary JavaScript frameworks

Individual parts that mesh like gears

We at Tojio love Web Components. This is because they have the potential to solve several web development problems at once.

At the beginning of projects, the question often arises as to which frontend framework would be best suited to a project? Sometimes, however, the choice is simply narrowed down pragmatically based on the skills available in the team.

With web components, it is possible to create real added value long before a specific framework is selected: by building on pure web standards, they can be used to create reusable building blocks that every web browser can understand and use completely independently of any frameworks or other libraries.

For organizations with many web projects, which may also have to work with different frameworks (e.g. different frameworks (such as React, Vue, Angular, Svelte ...), enormous savings in design and development costs can be achieved by using web components as the lowest common denominator.

Maximum encapsulation - no more side effects!

Encapsulation means that although a web component is used by the HTML document for display (and can also communicate with the rest of the document), it otherwise leads a completely individual life of its own and only follows its internal logic and its own visual definitions.

Web components use a so-called shadow root for this. This works internally like a part of an HTML document, but is not accessible from outside. Therefore, it cannot happen that a web component is influenced by a CSS style from outside. This type of (annoying, but not uncommon) page effect is completely excluded here - and that alone is an immense advantage.

Delivered as ordered: Consistency and interoperability

While different browsers still differ greatly in terms of the display of built-in user interface elements (buttons, select, etc.), web components allow consistent displays to be realized across all browsers.

Because web components only use web standards and do not require any additional libraries or frameworks, they also work reliably in every browser and deliver the views you expect.

A perennial favorite: maximum reusability

With their encapsulation, consistent appearance and function, Web Components excel in terms of reusability. This means that one and the same component, once developed, can easily be used in any number of Drupal themes, Wordpress themes, static HTML pages or even in applications with completely arbitrary frameworks (React, Vue, Svelte, ... ).

Independent and future-proof thanks to web standards

Because all Web Components are pure web standards of the World Wide Web Consortium (W3C), custom-built Web Components are and remain completely independent of all other possible developments in the fast-paced world of front-end frameworks.

But above all, they are future-proof "by design" - because if one framework is to be replaced by another, the Web Component can remain the same and all the work that has gone into it is retained.

Faster development, easier maintenance

With the help of web components, projects can be implemented much faster and are also much easier to maintain afterwards.

And even if a component is not intended for reuse, there is still an advantage to this approach: the web component can be developed, tested and later developed further completely independently (for example, by a third-party developer who is not otherwise involved in the project) because it only has to follow its own internal logic. With a clearly defined interface, unwanted side effects with the rest of the project are virtually eliminated.

Examples of components include:

• Select Improved - a filterable select element that has been greatly improved in terms of usability
• Audio Player - a mini-application to display and play audio files such as podcasts

Would you like to benefit from Web Components and all their advantages in your projects? Talk to us!