Frontend

A brief history of JavaScript frameworks, ranked by client-side rendering performance 🧵

A brief history of JavaScript frameworks, ranked by client-side rendering performance 🧵

https://youtu.be/E5amN0_1XyE

(Credit: Ryan Carniato, creator of SolidJS)

/frontend dev・founder/decentralized data wrangler /blockhead・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx, ritual.net・x.com/darryl__yeo

(Credit: Ryan Carniato, creator of SolidJS)

https://warpcast.com/darrylyeo/0xc3f6d83e

2014 – 2015:
• [D] React (virtual DOM)
• [E] Ractive.js (virtual DOM + signals)
• [D] Marko (virtual DOM)
• [C] Vue 1 – 2 (virtual DOM + signals)
• [C] Riot.js (virtual DOM + signals)
• [C] Mithril.js (virtual DOM)
• [C] Elm (compiler + virtual DOM)
• [A+] Inferno (compiler + virtual DOM)
• [C] Preact (virtual DOM + signals)

2016 – 2017:
• [D] Angular 2+ (dirty checking; later + signals)
• [C] Svelte 2 (dirty checking + signals)
• [B] Imba (compiler + virtual DOM)
• [C] Hyperapp (virtual DOM)
• [A] Lit (HTML `<template>` + template literals + dirty checking)

2018 – 2019:
• [F] Alpine.js (HTML `<template>` + signals)
• [S] SolidJS (signals)
• [F] Blazor (compiler)
• [D] Yew (WASM compiler + virtual DOM)
• [B+] Svelte 3 – 4 (compiler + dirty checking)

2020 – 2021:
• [B] Vue 3 (virtual DOM + signals)
• [C] Qwik (virtual DOM + signals)
• [S] Million.js + React (compiler + block DOM)

2022 – present:
• [A] Leptos (compiler + signals)
• [A] Dioxus (WASM compiler + block DOM + signals)
• [D] React Compiler (compiler + virtual DOM)
• [S] Svelte 5 (compiler + signals)
• [S] Vue Vapor (signals)

Trends:
• [B] and above: uses a compiler for template-level optimization
• [A] and above: uses signals or a block DOM (and *not* a virtual DOM) for re-rendering

Not pictured:
• [God tier] vanilla JavaScript
• [God tier] jQuery

Benchmarks:

https://krausest.github.io/js-framework-benchmark/2025/table_chrome_132.0.6834.83.html

Fine-grained rendering in depth:

https://www.youtube.com/watch?v=kkUuaqDBSqA

2010 – 2013:
• [E] Knockout.js (signals)
• [E] Backbone.js (render-agnostic views)
• [E+] AngularJS (dirty checking + block DOM)
• [F] Ember.js (string templates; later virtual DOM)