Skip to content

Instantly share code, notes, and snippets.

@ryansolid
ryansolid / js-framework-benchmark.marko
Created April 21, 2022 06:29
Marko 6 Compiler Article Examples
View 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>
@ryansolid
ryansolid / Comparison - Todo Sizes.md
Last active January 9, 2023 11:29
Looking at how frameworks scale using their official TodoMVC Example and Vite
View Comparison - Todo Sizes.md

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
@ryansolid
ryansolid / framework size comparison.md
Last active October 22, 2022 13:27
Size Comparison Vue vs Svelte vs Solid
View framework size comparison.md

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%)
@ryansolid
ryansolid / vite-solid-plugin.js
Created July 11, 2020 20:14
Example of Solid plugin for Vite
View 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: [
@ryansolid
ryansolid / index.html
Created March 3, 2020 09:04 — forked from RubaXa/index.html
Remove All Children: removeChild vs. innerHTML vs. Range vs. innerText vs. textContent (http://jsbench.github.io/#b80fc169aa8c7b31c71604ac9e2a3aa6) #jsbench #jsperf
View 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>
@ryansolid
ryansolid / index.html
Last active December 14, 2019 07:46 — forked from jridgewell/index.html
Native TreeWalker vs Handwritten TreeWalker (https://jsbench.github.io/#5d907b7fc0f75d2e39c5f70a2da6df0d) #jsbench #jsperf
View 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>
@ryansolid
ryansolid / todos-list-item.jsx
Last active August 2, 2019 06:49
Todos: List & Item
View 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,
@ryansolid
ryansolid / todos-header-footer.jsx
Last active September 26, 2019 14:24
Todos: Header and Footer
View todos-header-footer.jsx
@ryansolid
ryansolid / todos-app.jsx
Last active August 2, 2019 06:50
Todos: TodoApp
View 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);
@ryansolid
ryansolid / todos-create-store.js
Created April 9, 2019 04:15
Todos: createTodosStore
View 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,