BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Web Components Reaching Mainstream Maturity

Web Components Reaching Mainstream Maturity

Leia em Português

This item in japanese

For years web components have been a standard that was almost ready. With the recent Apple Music web client release, Apple shipped over 45 web components to drive the Apple Music experience. Others, including Amazon, Porsche, arm, Panera, and Microsoft, are leveraging Stencil to create design systems and cross-framework web components.

Web components have challenges that can be overcome with a tool or library. Some of the commonly raised concerns about web components include:

  • Bundle size within each component can get significant (by framework bundle size, or lack of HTML Imports support)
  • Controlling how content gets rendered
  • Flash of unstyled content and CSS in JS
  • Polyfills needed for older browsers
  • Property and attribute management
  • Server-side rendering and progressive enhancement

These concerns are mitigated by leveraging a tool like Stencil, an open source project started by the team at Ionic. As explained by Ionic CEO Max Lynch, the current sweet spot for web components is different than the ongoing use of JavaScript frameworks:

What problem does providing a native web component model actually solve then? Well, the biggest one it solves is being able to share and consume developer-created components directly in the browser regardless of application technology, and in a highly efficient way. We believe the killer app for Web Components is solving those component distribution and Design System problems. We also believe that 90% of the market doesn’t have those problems, and find the current debate about the merits of Web Components a bit unproductive.

By leveraging Stencil, Ionic provides a mechanism to leverage cross-framework components with their support of Angular, React, and Vue, the latter currently in beta support. Users of newer releases of Ionic are creating web components by default, making it possible for Ionic users to transition component libraries across other frameworks seamlessly.

Modern Dojo focuses on supporting the custom elements portion of the web components standard, providing a mechanism for framework interoperability. The Dojo custom element showcase highlights the existing Dojo widgets leveraged as custom elements.

Many other options exist for working with web components, including Hybrids, LitElement (the apparent successor to Polymer), Skate.js, and Slim.js. There are also material-components, a Material Design implementation of web components.

The improvements in tooling and framework support the advances in browser support for web components, and the ongoing challenge of reusing components across frameworks and applications have led to mainstream usage of web components by Apple, Amazon, Microsoft, and others.

Web components provide a hedge that the components you create today may outlast your framework of choice for building an application by aligning with the web platform and its standards. For some organizations web components may end the debate of using one single front-end framework for all applications.

There are many resources available for getting started with web components, including Pascal Schilp's Web Components: from zero to hero. Further documentation about the web components standards is available at MDN and webcomponents.org.

Rate this Article

Adoption
Style

BT