Introducing Preact Signals: a reactive state primitive that is fast by default.

✅ feels like using plain values
🥳 automatic updates when values change
⏱ updates DOM directly (fast!)
🥹 no dependencies arrays

preactjs.com/blog/introduci… What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible.

You don't have to write any code to opt into this - simply accessing a signal's value in a component will set everything up for you.

@ScriptedAlchemy @jonstuebe FWIW we spent considerable effort exploring whether modern syntax could benefit Preact, and our conclusion was that hand-optimized ES5 is still fastest.
We did find a bunch of browser bug workarounds for IE11 that were worth dropping though. @ScriptedAlchemy @jonstuebe Example - here's the fastest ES20xx JSX factory:

function createElement(type, props, ...children) {
if (children.length !== 0) {
if (props == null) props = {};
props.children = children;
}
return { type, props };
}

I have been working on an experimental ground-up rewrite of Preact's renderer. It now renders TodoMVC faster than hand-written vanilla JS.

It's somewhere between 1.5x and 3x faster than Preact 10 (depending on VM optimization state). A lot of the performance improvement comes from two key things: moving to linked lists for tree structure, and replacing function calls with a primitive stack machine. The latter has been super fun to work with, and it feels easier to mentally model than nested function calls.

How to drop IE11 support while keeping your site accessible (including from IE):

1. Build your site to work properly without JavaScript.
2. Load JS via <script type=module>, which IE ignores

Think about it: bogging IE11 down with 2mb of polyfilled JS reduces accessibility. In case it's been forgotten:
• IE11 was half as fast as Chrome M44
• current browsers are all >2x faster than M44
• this is for ES5 - ~ES2017 widens the gap (+10%)

Food for thought:

We accept that it's okay to drop support for Android 5 - released in 2014 for a Nexus 5 flagship, which has 3.3% marketshare today.

But we still support IE11 - released in 2013 before the Surface product line existed, which has 0.8% marketshare today.

Why? Over the past 12 months, IE11's global marketshare has dropped by more than 50%. The browser's longevity was being largely driven by a few countries, and its marketshare in these countries has been plummeting.

HTM 2.1 is out:

🧙‍♂️@jviide rewrote it, twice.
it's faster. it's smaller. it doesn't violate CSP.

🐣there's a new htm/mini version: <400 bytes

🗜you can now compile JSX to HTM.
Get those sweet Tagged Template gainzz🦵

🏗Easy `htm/react` integration

github.com/developit/htm @jviide "why would you want to do this?" I hear you say.

As it turns out, we're all compiling JSX to huge blobs of nested function calls. They look like this:

It's inspiring to hear about so many folks using htm to build without tools.

This little library has had more of an impact than I would have thought!

github.com/developit/htm The next step for htm is to roll over to a custom parser. Right the parser is essentially 1:1 with JSX, which means this is a breaking change.

💁‍♀️ Cost of updating text in the DOM

⬛️⬛️⬛️⬛️⬛️⬛️ .innerHTML
⬛️⬛️⬛️⬜️⬜️⬜️ .textContent
⬛️⬛️⬜️⬜️⬜️⬜️ .innerText
⬛️⬜️⬜️⬜️⬜️⬜️ .firstChild.data

- Use innerText if you can't assume structure
- Use Text#data to update existing text A humble benchmark:
esbench.com/bench/590c9cfe…