.png)
4 days ago
3
Web Components have been around for quite some time now, but they haven’t seen widespread adoption — possibly due to their perceived complexity. Many frameworks attempt to simplify working with Web Components, but they often feel too complex or unintuitive to me. Moreover, these frameworks usually introduce new APIs, which defeats the purpose of working solely with web standards.
A common opinion is that Web Components aren’t suitable as a baseline for building web apps. As a result, most developers fall back on mainstream frameworks like React, Svelte, and others.
In my quest for simplicity and minimalism, however, I believe Web Components could be the perfect building blocks for developing SPAs using only standard APIs.
DROP is my take on this idea!
<script type="module">import { signal, effect } from '@webreflection/signal';
class Counter extends HTMLElement {
constructor() {
super();
this.count = signal(0);
}
increment(inc = 1) {
this.count.value += inc;
}
}
</script>
<template>
<div>
<button onclick="{increment()}">Counter is {count}</button>
</div>
<style>
button {
font-size: 1.5rem;
}
</style>
</template>
Does it look familiar? Yes — it shares a lot of similarities with Svelte. DROP aims to keep what makes Svelte great, while relying solely on Web standards (or proposals) and staying much simpler and more minimalistic.
Embracing the HTML Modules Proposal
The syntax above is inspired by the HTML Modules proposal, which will hopefully become a standard in the future. For now, DROP compiles this syntax into JavaScript. It goes a step further by handling boilerplate code such as creating a Shadow DOM and loading the template.
Signals for Reactivity
Signals have emerged as a proposal for managing reactivity. DROP takes full advantage of this. The HTML template can contain specific markers that are converted during compilation into precise instructions for updating the DOM when a signal changes — just like in Svelte.
Takeaway
After spending the last decade jumping from one frontend framework to another, I’ve grown tired of the constant churn. Meanwhile, standards like HTML, CSS, plain JavaScript, and even SQL have remained relatively stable — skills I learned 20 years ago are still relevant today!
I believe DROP could be a step toward that goal of minimalism, relying only on standard APIs.
So far, it’s been a fun project to work on. I’ve spent time reading through the Svelte and Acorn codebases, uncovering a few of their mysteries :) You can do the same with DROP — it has a much smaller footprint.
