Why I Wrote my own web component framework (componentForge)

Back in days I was assigned a task to create a distributable widget which can be embeddable in website or front-end technology and the obvious choice was web components / custom elements

Website

ComponentForge

The goals

• Create a lightweight widget
• It has to work with a paid/free charting framework for e.g Highcharts, Amcharts etc.
• It should be easy to maintain.
• Minimum dependencies on other library's

Journey (planned) of building widget (web component)

1. Identify the framework
2. Create the component
3. Test the component.
4. Deploy.

So as there ware many frameworks like Stencil and LitElement avaible i started to evaluate them by building my first MVP widget and Bang!!! I hit a roadblock right away the charting library was not able to compile with the web component.

Was trying to talk to support people from the charting library and there response was “We do not support web components yet” and for me that's like saying “We do support JavaScript yet…”

I was able to a MVP with basic JavaScript Web Component in a day. with the same library so clearly there was no problem with Web components.

I thought lets take the things in my hand …. grrrr

So next weekend i set some goals for my framework

Framework goals

1. It has to have minimum learning curve.
2. Should have props and its own state like react.
3. Should be fast.
4. For simple ajax call it should not be dependant on any other library like axios.

So I decided to mimic the React class components as its a well known API and the next developer can find its documentation online. so i re-created the state props all lifecycle events and the famous setState method

For templating I used googles lit-html which is fast and I am standing on the shoulders of giants

and Added get and post methods to the base class.

Now it was time to test it by creating the widget and Walla!!! it worked in first attempt.

Over the time I kept improving it and below are some features

• Available in Typescript and JavaScript
• Speed
• No Configuration needed just include in page and get started
• Has Props and State like react
• Micro-templating built in so you can allow your users to inject templates
• For Basic Ajax no need for other library it has GET/POST built in or you can use fetch always#
• You can load external CSS and JavaScript so you can easily load any third party dependencies
• Slots databinding (Only available with componentForge) So you can use slots as child components like we use in React

Some of the components I have developed with the componentForge

So if you need to maintain a old web site or application in 2023 componentForge is the way forward.

Some use cases

• Internal Legacy Apps like PHP Asp.net JSP Etc.
• Use with CMS like WordPress, Umbraco, AEM Sitecore Etc.
• Creating Cross Technology Widgets which we can distribute
  Re-useable Web components.
• Write a single component when you have Polyglot frontend teams using different technologies (Angular , React, VueJS, Etc.)