Technology

Web components as lego blocks

Javascript Ljubljana Night

01. 12. 2022Duration: 21.57

We’ll look into an implementation that uses web components at its core - leveraging the power of configurability and framework agnosticism.

Talk recap

This talk was automagically recapped with help of Ljubljana.tech Wordsmith AI.
Subjected to paraphrasing and mirror errors.

Web components are a useful tool for building reusable and customizable solutions on the web. They are similar to components used in frameworks, but are framework agnostic, meaning they can be used on any platform. This makes them a useful solution for building checkout solutions that can be customized and used across different platforms and setups.
At Rally, a headless checkout solution, the front end team has been working on building customizable checkout solutions for the last five years. Rally has an agnostic backend and customizable front end, and all pages in the checkout flow are built using the same web components, which are adjusted with different configurations and styles.
Web components are similar to components used in frameworks, but they follow the HTML element interface and can be used anywhere on the web. Rally faced the challenge of building a solution that would work across different platforms and be customizable and reusable for merchants. To address this challenge, they needed to adjust their builds to offer NPM packages and inline scripts to support different stacks.
To support reusable functionality, such as forms, Rally created a custom element called the dynamic form. This element is responsible for all of the form logic, including connected validators and form states. The dynamic form can be configured to include different fields, such as text inputs or select boxes. In addition to the dynamic form, Rally also created a dynamic field element that can be customized to act as different input types. These custom elements can be used standalone or as a base for other business domain forms, such as email or payment forms.
Web components can be customized in multiple ways, including using data attributes or the Rally SDK, and can also be created dynamically with JavaScript. By using web components, Rally was able to build a solution that was customizable and reusable for merchants, while also being able to work across different platforms and setups.

Tadeja Firman Rally a headless checkout

This talk was powered by

Audience questions for Tadeja

These questions were asked by the attending audience of about 150 participants on 01. 12. 2022 at Ljubljana.tech. Maximize your next knowledge experience by attending our event in-person.

What should we be aware of when working with web components? Are there any tools or frameworks that can help us manage state?: I use Angular elements, which have singleton services that are reactive. To consider the footprint of the store, I did not include any external stores and it made sense not to do so.
Did you use any frameworks or just the native JavaScript functionality to create the web components?: No, we use frameworks, we use slate, which is great, gives you the smallest amount of functionality possible, and it's lightweight.
Did you encounter any performance issues or slowdowns in the browser while working on the web components, possibly due to a high amount of logic within the component or other factors?: In general, the process of creating the web components went well and there is always room for improvement, especially in e-commerce. One idea we have is to move more towards using Angular, as it has a lot of built-in features but can also be constraining in terms of flexibility. We are always looking for ways to optimize and improve.
Did you consider security concerns during the development process, particularly in regards to e-commerce and the potential for developers to include sensitive information in the "as" property of a component?: Yes, we considered security during the development process and even underwent penetration testing. Based on the results of this testing, our site was deemed to be secure. It is always important to prioritize security in development as even a single mistake can have serious consequences.
How do you track debugging and identify which component may be causing problems if issues arise?: We use Sentry to track debugging and identify which component may be causing problems. Sentry allows us to upload source maps and pinpoint the specific component that is failing. However, for local development, we use Browsersync and had to create our own solution for debugging, as Angular's built-in solution is not compatible with Browsersync. We did encounter some problems with this approach and had to move some processes outside of Docker in order to see certain errors that were being hidden.
Is it possible to use web components to build an entire application, or is it something that is being avoided for the time being?: I mean, if you're building a dashboard, I wouldn't use Web Components ever. Like web components come handy. If you want to have common shared components or you want have such a scenario that we do. It's really great. But just for app, it has too much overhead to it, in my opinion.