A year of work later and we can finally tie a bow on this series of web component perf threads.
I built a fully declarative, compile-time reactive framework on web components. In the latest JS Framework Benchmark, Roqa is the 2nd fastest (unflagged) – beating Ripple, Vue Vapor, Solid & Svelte. 🏎️💨
![VS Code Insiders showing an Example.js file. The file contains:
import { Component, html, defineComponent } from '../../@lib/client.js';
class CounterButton extends Component {
count = 0;
render() {
return html`
<button
onclick=${() => {
this.count++;
this.rerender();
}}
>
Clicked ${this.count} ${this.count === 1 ? 'time' : 'times'}
</button>
${() => {
if (this.count === 5) {
return html`<p>You got to 5! Keeping going!</p>`;
}
if (this.count === 10) {
this.count = 0;
return html`<p>Incredible! You win!</p>`;
}
}}
<ul>
${() => {
const items = [];
for (let i = 1; i <= this.count; i++) {
items.push(html`<li>Item ${i}</li>`);
}
return items;
}}
</ul>
`;
}
}
defineComponent('counter-button', CounterButton);](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:fxipo3ogt5nrxjddervd4hxa/bafkreia7aezm3ow7jg6ofivprxexf5dzowxmoyeevxfafcv5s7emh4i5za)
