Using Web Components (Part 1)
Posted January 4th, 2023
With the advance of technology and the ever-growing increase of screen types and sizes, layout flexibility (or responsive web design) and browser compatibility are big concerns when developing software. At the same time, UI extensibility is of the utmost importance for development platforms and those were two of the main focus points of our decision to embrace Web Components. In this post we’ll make an introduction to Web Components, and why we believe they contribute to a great development experience.
“Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.” – webcomponents.org
Web Components are primarily built using standard definition features like Custom Elements, Shadow DOM and HTML Templates, and they can make use of Javascript libraries (such as chart.js) to render their output or perform other operations. To know more about creating your own web components, visit this resources page.
In this post we’ll be highlighting two types of the most common Web Component types, to demonstrate the range of possibilities you have when using them in our platform. We’ll divide them into, Visual and Operational Components:
Visual Components
Web components that only provide a visual output to the user and don’t require user action;
– Charts
– Loading indicators
– Information tiles
Operational Components
Web components that enable user interaction and input, process its data and change its output accordingly;
– iFrames (embed videos, maps, etc)
– External UI Components (Stripe API)
In the spirit of reusing and sharing, we’ve developed a specific Community Web Components Github repository, where we’ll keep sharing new web components, for free, for everyone to use and share their own work if they so desire.
This post is only an introduction to Web Components, these are only a few examples and a few possible use cases. In the weeks to come you can expect more in-depth information regarding Web Components, where we’ll dive into the specifics of building, configuring and deploying specific web components.
We hope you’ve enjoyed this first look at our web component feature, don’t forget to follow us on LinkedIn, Twitter, and subscribe to our newsletter so you don’t miss one single update.
