Ryan Carniato ryansolid

## js-framework-benchmark.marko

import { buildData } from "./build-data";

<let/data = []/>
<let/selected = null/>

<div class="jumbotron">
  <div class="row">
    <div class="col-md-6">
      <h1>Marko 6 (keyed)</h1>

## Comparison - Todo Sizes.md

      
              6 files
            
          
              2 forks
            
          
              0 comments
            
          
              9 stars
            
          
                ryansolid
                / Comparison - Todo Sizes.md
            
            
              Last active
              February 17, 2024 14:29
            
              
                Looking at how frameworks scale using their official TodoMVC Example and Vite
              
          
    Based on Evan You's comparison which included Svelte and Vue. https://github.com/yyx990803/vue-svelte-size-analysis
For Preact, React, and Solid I took their official TodoMVC and ran them through Vite (2.3.6) to get vendor.
For the components I grabbed the unminified source, ran it through Terser Repl, removed the imports, and ran through Brotli.
I wanted to use hooks for React and Preact since those are much smaller but all the official demos use classes. Adding Hooks adds library weight to Preact but it is worth it for this comparison(Preact with classes was 1.60kb and 3.81kb). Honestly I couldn't find a good hooks implementation for React/Preact that was small so I made one myself based on Solid.


Preact
React
Solid
Svelte
Vue


component size (brotli)
1.21kb
1.23kb
1.26kb
1.88kb
1.10kb


## framework size comparison.md

      
              5 files
            
          
              0 forks
            
          
              4 comments
            
          
              9 stars
            
          
                ryansolid
                / framework size comparison.md
            
            
              Last active
              October 22, 2022 13:27
            
              
                Size Comparison Vue vs Svelte vs Solid
              
          
    Based on Evan You's methodology: https://github.com/yyx990803/vue-svelte-size-analysis
Table


Vue
Vue (SSR)
Svelte
Svelte (SSR)
Solid
Solid (SSR)


Source
3.93kb
-
3.31kb
-
4.98kb
-


Compiled w/o imports (min)
2.73kb
-
5.01kb (183.52%)
6.59kb (241.39%)
3.68kb (134.805)
3.96kb (145.05%)


Compiled w/o imports (min+gz)
1.25kb
-
2.13kb (170.40%)
2.68kb (214.40%)
1.46kb (116.80%)
1.57kb (125.60%)


Compiled w/o imports (min+brotli)
1.10kb
-
1.88kb (170.91%)
2.33kb (211.82%)
1.26kb (114.55%)
1.32kb (120.00%)


## vite-solid-plugin.js
import { join } from "path";
import { Plugin } from "vite";
import { babel } from "@rollup/plugin-babel";
import { transformFileSync } from "@babel/core";

const presets = ["solid", "@babel/preset-typescript"];

export const solidPlugin: Plugin = {
  rollupInputOptions: {
    plugins: [

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Remove All Children: removeChild vs. innerHTML vs. Range vs. innerText vs. textContent</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Native TreeWalker vs Handwritten TreeWalker</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## todos-list-item.jsx
const TodoList = ({ store, editTodo, removeTodo, toggleAll }) => {
  const [state, setState] = createState(),
    filterList = todos => {
      if (store.showMode === 'active')
        return todos.filter(todo => !todo.completed);
      else if (store.showMode === 'completed')
        return todos.filter(todo => todo.completed);
      else return todos
    },
    isEditing = todoId => state.editingTodoId === todoId,

## todos-header-footer.jsx
const TodoHeader = ({ addTodo }) => (
  <header class='header'>
    <h1>todos</h1>
    <input
      class='new-todo'
      placeholder='What needs to be done?'
      onKeyUp={({target, keyCode}) => {
        let title;
        if (!(keyCode === ENTER_KEY
          && (title = target.value.trim()))) return;

## todos-app.jsx
const TodoApp = () => {
  const [store, {
      addTodo, toggleAll, editTodo,
      removeTodo, clearCompleted, setVisibility
    }] = createTodosStore(),
    locationHandler = () =>
      setVisibility(location.hash.slice(2) || 'all'
    );

  window.addEventListener('hashchange', locationHandler);

## todos-create-store.js
function createTodosStore() {
  const [state, setState] = createLocalState({
    counter: 1, todos: [], showMode: 'all'
  });
  createEffect(() => {
    const completedCount = state.todos.filter(
      todo => todo.completed
    ).length;
    setState({
      completedCount,

	import { buildData } from "./build-data";

	<let/data = []/>
	<let/selected = null/>

	<div class="jumbotron">
	<div class="row">
	<div class="col-md-6">
	<h1>Marko 6 (keyed)</h1>
	Vue	Vue (SSR)	Svelte	Svelte (SSR)	Solid	Solid (SSR)
Source	3.93kb	-	3.31kb	-	4.98kb	-
Compiled w/o imports (min)	2.73kb	-	5.01kb (183.52%)	6.59kb (241.39%)	3.68kb (134.805)	3.96kb (145.05%)
Compiled w/o imports (min+gz)	1.25kb	-	2.13kb (170.40%)	2.68kb (214.40%)	1.46kb (116.80%)	1.57kb (125.60%)
Compiled w/o imports (min+brotli)	1.10kb	-	1.88kb (170.91%)	2.33kb (211.82%)	1.26kb (114.55%)	1.32kb (120.00%)
	import { join } from "path";
	import { Plugin } from "vite";
	import { babel } from "@rollup/plugin-babel";
	import { transformFileSync } from "@babel/core";

	const presets = ["solid", "@babel/preset-typescript"];

	export const solidPlugin: Plugin = {
	rollupInputOptions: {
	plugins: [
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Remove All Children: removeChild vs. innerHTML vs. Range vs. innerText vs. textContent</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	const TodoList = ({ store, editTodo, removeTodo, toggleAll }) => {
	const [state, setState] = createState(),
	filterList = todos => {
	if (store.showMode === 'active')
	return todos.filter(todo => !todo.completed);
	else if (store.showMode === 'completed')
	return todos.filter(todo => todo.completed);
	else return todos
	},
	isEditing = todoId => state.editingTodoId === todoId,
	const TodoApp = () => {
	const [store, {
	addTodo, toggleAll, editTodo,
	removeTodo, clearCompleted, setVisibility
	}] = createTodosStore(),
	locationHandler = () =>
	setVisibility(location.hash.slice(2) \|\| 'all'
	);

	window.addEventListener('hashchange', locationHandler);
	function createTodosStore() {
	const [state, setState] = createLocalState({
	counter: 1, todos: [], showMode: 'all'
	});
	createEffect(() => {
	const completedCount = state.todos.filter(
	todo => todo.completed
	).length;
	setState({
	completedCount,