TL;DR: In previous posts I described common web storefront performance issues and provided a quick introduction to web components. This post continues the series by exploring applying web components to the field of web e-commerce.
So what are some of the benefits of using web components on an e-commerce site? (Many of these benefits are not e-commerce specific.)
- Web components can reduce development effort because components can be shared between projects. This can be particularly useful for agencies working on multiple e-commerce platforms.
- The component model in general allows large complex pages to be broken down into smaller reusable components. e-Commerce pages can get pretty complex, especially on desktop.
- Web components can be developed and tested individually.
- The built-in Chrome developer tools understand web components, making pages easier to debug.
- Web components allow declarative markup to be stored in a database — different presentation interfaces can load up different web component definitions based on context.
The first point in this list I want to reinforce. When working with e-commerce platforms, developers generally have two pick one of two routes to follow:
- Use the built in e-commerce platform storefront technology stack, where not all platforms give full control, or
- Use a standalone (“headless”) storefront and connect to the e-commerce backend via APIs.
Web-components work directly in most web browsers (with polyfill support for older web browsers). That can make them easier to use in both contexts, much like CSS. I personally find this flexibility appealing. Web components let you go beyond what CSS alone can do, without mandating a different toolchain, which may not be easy to incorporate with your existing e-commerce platform stack.
Looking back at the complete list of benefits above, not all are unique to web components. For example, code reuse and testability are equally valid for components in frameworks such as React, Vue, or Angular. However, again, web components have an edge in that they are a browser level technology that works across all of these frameworks, as well as on sites that do not use such frameworks.
So web components appeal to me as a flexible technology upon which to build a library of e-commerce components that are usable across a range of different platforms and frontend stacks. They allow richer components to be built while staying within the space of basic web standards such as HTML and CSS.
What do Web Components Not Solve?
Do Web Components Have a Future?
Web components are not new, so why have they not taken off until now if they are as good as the above implies? One reason is they have not been supported by all the major browsers until recently. As a result, there was a lot of noise early on but they never really took off due to lack of cross browser support.
It was also less certain early on that they could be used with frameworks such as React. This however has been now addressed by the main frameworks as well, so is no longer a significant concern. (React even has a page describing web components can be used in React, and React can be used inside web components.)
Returning to the original list of problems, while there are other solutions as well, web components can help with the following issues as noted:
- Referenced images are too big. Web components can implement more advanced logic to pick the most appropriate image resolution, without cluttering the marked up page with such logic. This also allows the logic to be changed later without modifying the original content.
- Images on low-end devices. Web components can encapsulate the knowledge of the right image format and size to select.
- Unused CSS and bundling CSS. Web components can result in simpler CSS as styling may be incorporated inside the web component (e.g. when using Shadow DOM).
Web components also have additional benefits.
- They browser level technology allowing them to be reused across platforms
- They can be used by platforms that use HTML server side rendering. There are still a lot of platforms that rely on server side rendering.
- They can be used by most frameworks such as React, Vue, Angular etc allowing a component to be written once and reused on multiple frameworks. A React component library in comparison can only be used with React, not Angular.