Creating A Portable Dynamic Gallery With Web Components

Recently Orbit worked with a client to develop a dynamic web image gallery. Based on a number of user selected options, the gallery should display images to the user to preview how their choices affected the styling of the product they were about to buy. We didn't know where or how the dynamic gallery would be hosted, so we needed to develop a solution that would be reusable in a variety of contexts and easy for the client to implement wherever they needed it.

A Background On Web Components

Web components have been supported in most major browsers for many years. They provide an interface for UI components on top of JavaScript similar to a framework like React or Angular. The difference is that they are native in browsers which allows them to be embedded directly in HTML/JS without the need to include a framework. This made them perfect for our use case as we wanted to make implementation as simple as possible for our end clients. We didn't want them to have to install npm, load a framework like react and render our component, especially if the rest of their site was built in another framework like Angular or even on Wordpress.

Orbit hadn't had much experience with Web Components prior to this project, but we knew that our years of experience in web development and the wealth of documentation about Web Components would hold us in good stead.

Build Tools

Whilst web components are native to browsers, there is still benefit to using build tools to help minify code, improve performance and ensure backwards compatibility. A build tool can also help apply styling and import images (which is particularly important for our gallery).

Parcel

ORBIT has been interested in Parcel https://parceljs.org/ for a while. It seemed like it had a good feature set by default without being as complex as something like Webpack or Rollup. This project was a perfect opportunity to try out Parcel as it dealt with building JavaScript components with complex styling and a large quantity of images with a well defined scope.

Parcel also gave us the benefit of a development server that would automatically rebuild/reload changes. This allowed us to shorten to dev loop and iterate more quickly as we progressed.

The only parcel plugin we needed to use was @parcel/resolver-globto help us bulk import images from a folder. We also made use of inbuilt bundle-text and url imports to aid with styling and fonts.

What Did We Learn

Shadow DOM Encapsulation

Web components make use of The Shadow DOM to encapsulate components. This is beneficial as outside styling and DOM structure does not effect the component. For our use-case this is perfect, as we can guarantee the styling of our gallery regardless of other CSS etc. that might be applied on the page. However, we also have to include all relevant CSS and fonts inside the shadow dom rather than relying on traditional methods for injecting these.

Web Component Lifecycles

Web component lifecycle methods are a little more complicated than something like React Hooks. There is a good guide here: https://ultimatecourses.com/blog/lifecycle-hooks-in-web-components

It is worth understanding these to help ensure that the component updates as expected.

Conclusion

In the end, Web Components and Parcel were the perfect choice for this project. They allowed flexibility and fast development and a quality final product.