Content pfp
Content
@
0 reply
0 recast
0 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
A brief history of JavaScript frameworks, ranked by client-side rendering performance đŸ§” https://youtu.be/E5amN0_1XyE
2 replies
6 recasts
37 reactions
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
(Credit: Ryan Carniato, creator of SolidJS) https://warpcast.com/darrylyeo/0xc3f6d83e
1 reply
0 recast
2 reactions
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
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)
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
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)
1 reply
0 recast
0 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
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)
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
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)
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
2020 – 2021: ‱ [B] Vue 3 (virtual DOM + signals) ‱ [C] Qwik (virtual DOM + signals) ‱ [S] Million.js + React (compiler + block DOM)
1 reply
0 recast
2 reactions
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
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)
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
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
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
Not pictured: ‱ [God tier] vanilla JavaScript ‱ [God tier] jQuery
1 reply
0 recast
2 reactions