ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: new post about wcb

Browse source
This commit is contained in:
Ayo Ayco 2025-03-29 08:47:52 +01:00
parent 43583072cf
commit f2f478a9a6
1 changed files with 36 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
_posts/2025-03-29-.md Normal file
View file

@ -0,0 +1,36 @@
---
title: "Web Component Base (WCB)"
permalink: /:title/
description: "A simple reactivity system for Web Components"
category: technology / productivity / personal / motivational / entertaining
---
Funny story how the project started: I was on a vacation with the family and did not bring my laptop. While in vacation, I took lots of videos and pictures and posted them via Instagram Stories because that's where my friends & the rest of family are.
It was also a time that I was working on some contributions to [Elk](https://main.elk.zone), and I thought: Hey wouldn't it be nice to post these _Instagram-story-style_ (I'm a big fan of that UI) everywhere I can: Elk, my personal site, Pixelfed maybe?
But Elk is in [Nuxt](https://nuxt.com/), my site is in [Astro](https://astro.build), and [Pixelfed](https://pixelfed.org/) is in some PHP framework (I think)...
I have to build it framework-agnostic! How?
That's when I got into **web components**.
The problem was: I had the idea in my head for a while, without a laptop to work on it...
So when I got back home, without consideration of searching for available tech, the first thing I did was study how to build it starting from scratch: extending from HTMLElement. Immediately I saw several boilerplate I don't want to write every time I need a custom element... and I naturally wrote my own base class.
After several iterations, the APIs got really interesting, and I posted about it on my social. This is when someone commented: "TAKE A LOOK AT THIS" (or something like that) and linked me to Lit's ReactiveElement.
And then, I realized, woops **HOW CAN I FORGET LIT EXISTS!?**.
Anyway, here we are, I still don't have the _Instagram-story-style_ component that started it all... because I felt the need to have a simple custom elements base class first...
Now I have [Web Component Base](https://webcomponent.io) for it. Cursed hobby projects :)
There's a trade off between productivity & lightweight-ness here, and it is somewhere between [Microsoft's FASTElement](https://github.com/microsoft/fast) & [Google's LitElement](https://github.com/lit/lit/).
## I would like to thank the following
1. [htm](https://github.com/developit/htm) - I use it for the `html` function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see.
1. [fast](https://github.com/microsoft/fast) - Somewhere in the middle, I found that Microsoft has their own base class (super cool!) and I thought: okay, I don't feel bad about forgetting Lit exists now
1. [lit](https://github.com/lit/lit) - you guys rock. `lit-html` continues to amaze me and I worked to make `wcb` generic so I (and others) can continue using it