Delving into Web Components

If you have done any amount of frontend dev work you will have no doubt had to implement your own reusable UI components. This especially gets annoying when you find yourself making the same ones over and over again in various projects and in different frontend frameworks.

Thankfully the tech has been catching up and now you can create Web Components. Web Components according to the mdn web docs is defined as.

Web Components is a suite of different technologies allowing you to create reusable custom elements β€” with their functionality encapsulated away from the rest of your code β€” and utilize them in your web apps.

The great thing about this is that your web components can be used anywhere you have JavaScript enabled, which means they can be reused in any frontend framework. Code once, reuse everywhere.

So let's make our own UI Library.

Now there is an abundance of web component libraries already available on the web for you to download and use so why am I making my own?

In my opinion there is no better way to learn a technology than to use it to create something with a real use case and building my own means I will have to learn about all aspects of Web Components. Not just how to import and use a library.

I will be creating a series of blog posts exploring my journey on this adventure but if you would like to take part in shaping how this UI system grows by suggesting Components I can make, raising bugs when using the framework or improvements than you can over at the public github repo.

GitHub - ageddesi/aurum-ui: A set of UI web components
A set of UI web components. Contribute to ageddesi/aurum-ui development by creating an account on GitHub.

Right this second it is just a placeholder as I have only got the js lib compiling and being used on a webpage. But the first component I am planning on tackling is an Accordion component.

Let me know in the comments below if you have used web components and any pitfalls that I should avoid.

Subscribe to Making sense of the world around me, one blog post at a time

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.