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…
Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage.
This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused.
Should I use SSR? What about Rehydration?
Where should we implement logic and rendering in our applications?
Answers:
developers.google.com/web/updates/20…
🦖 HTM: JSX without the transpiler.
700 bytes to run in the browser,
or compile it away using babel-plugin-htm.
(works with any VDOM library!)
github.com/developit/htm
💁♀️ 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