Test each framework for it's performance cost

Last update: Jan 2, 2023

Related tags

Overview

Framework Benchmarks

Test each framework for it's performance, particularly common Lighthouse and CWV metrics as applications scale

Important: This is not a measure of "is framework x better than y". There are many tradeoffs to weigh when choosing the best framework for you - such as DX, features, familiarity, ecosystem, documentation, etc. These benchmarks only show a part of the picture.

Goals

The goal for this project are to understand the performance tradeoffs of popular frameworks in real world-ish scenarios. We want to assume non trivial codebases and imperfect code and conditions, so to see how each framework holds up to real world scenarios and scale.

We are intentionally not focused on client side rendering performance, for that please use Stefan Krause's great js-framework-benchmark

Status

This project is in initial development. Do not put too much weight on these current results, there is still much more to do to ensure accuracy, consistency, and fairness.

Contributions are welcome!

How it works

Methodology

We created a basic starting point for each framework in the frameworks/ folder using each framework's suggested starter/cli.

We then create basic example components and use Mitosis to compile them to best-effort idiomatic code for each framework. This will never be perfectly optimized code

We then build and serve each project, and run Lighthouse on each project with puppeteer, including with emulation of slow devices and networks (aka includes CPU and network throttling), and measure:

FCP: First Contentful Paint (lower is better)
LCP: Largest Contentful Paint (lower is better)
TBT: Total Blocking Time (lower is better)
TTI: Time to Interactive (lower is better)
Score: Lighthouse Performance Score (higher is better)
Eager JS Kib: the KiB of JS that is eagerly downloaded and executed from <script> tags for the initial page load. This is the actual size transferred over the network, including compression (lower is better)
Total KiB: the total KiB transferred with the given page, including HTML, CSS, prefetched resources, etc. Also known as the "total byte weight". This is the actual size transferred over the network, including compression (lower is better)

We take the median of multiple runs, and sort the results by TTI, ascending

We are also experimenting with looking at other metrics, such as build times

The Frameworks

Alphabetically:

astro - generated via their official CLI, with Solid for the interactive parts. Source
fresh - generated via their official CLI. Source
gatsby - contributed by the Gatsby team. Source
hydrogen - generated via their official CLI. Source
lit - generated via their official starter. Source
marko - generated via their official CLI. Source
next - generated via their official CLI. Source
nuxt2 - generated via their official CLI. Source
nuxt3 - generated via their official CLI (in beta). Source
qwik - generated with Qwik City (meta framework). Source
react - generated from create-react-app with react-router-dom added for routing. Source
react-ssr-node - Ultra simple Node server to server-side render react. Source
react-ssr-deno - Ultra simple Deno server to server-side render react. Source
react-ssr-bun - Ultra simple Bun server to server-side render react. Source
remix - generated from create-remix. Currently excluded from Lighthouse tests by request from the team, from concerns about the code being too non-idiomatic. Source
solid - generated with Solid Start (meta framework). Source
svelte - generated with Svelte Kit (meta framework). Source
vue3 - generated via their official CLI, with routing. Source

Sample output

Important: This project is still in initial development. Do not put too much weight on these current results, there is still much more to do to ensure accuracy, consistency, and fairness.

Jump to:

Dashboard
Todo App
Hello World
SSR times
SSR throughput (req/second)
React SSR throughput
Build times

Dashboard:

A more feature rich app for displaying table data, sorting, filtering, etc. Uses more JS, more like a median website. Source

┌─────────┬────────────┬──────────┬──────────┬──────────┬──────────┬───────┬──────────────┬───────────┐
│ (index) │    name    │   TTI    │   FCP    │   LCP    │   TBT    │ Score │ Eager JS KiB │ Total KiB │
├─────────┼────────────┼──────────┼──────────┼──────────┼──────────┼───────┼──────────────┼───────────┤
│    0    │   'qwik'   │ '0.6 s'  │ '0.6 s'  │ '1.5 s'  │  '0 ms'  │  100  │      2       │    38     │
│    1    │  'react'   │ '0.8 s'  │ '0.8 s'  │ '2.4 s'  │  '0 ms'  │  98   │     187      │    199    │
│    2    │  'gatsby'  │ '0.8 s'  │ '0.8 s'  │ '1.4 s'  │  '0 ms'  │  100  │      82      │    87     │
│    3    │   'lit'    │ '0.8 s'  │ '0.8 s'  │ '1.1 s'  │  '0 ms'  │  100  │      23      │    25     │
│    4    │  'solid'   │ '0.9 s'  │ '0.6 s'  │ '1.3 s'  │  '0 ms'  │  85   │      24      │    28     │
│    5    │  'astro'   │ '0.9 s'  │ '0.9 s'  │ '1.1 s'  │  '0 ms'  │  100  │      15      │    35     │
│    6    │  'marko'   │ '1.0 s'  │ '0.8 s'  │ '0.9 s'  │ '10 ms'  │  100  │      24      │    33     │
│    7    │  'fresh'   │ '1.3 s'  │ '1.3 s'  │ '1.5 s'  │  '0 ms'  │  100  │      17      │    46     │
│    8    │   'next'   │ '1.6 s'  │ '0.6 s'  │ '1.2 s'  │ '10 ms'  │  100  │      91      │    103    │
│    9    │  'svelte'  │ '1.6 s'  │ '1.6 s'  │ '1.7 s'  │  '0 ms'  │  99   │      29      │    35     │
│   10    │ 'angular'  │ '1.7 s'  │ '1.5 s'  │ '1.5 s'  │ '150 ms' │  98   │      86      │    88     │
│   11    │   'vue3'   │ '1.8 s'  │ '1.2 s'  │ '2.1 s'  │  '0 ms'  │  94   │      41      │    50     │
│   12    │  'nuxt2'   │ '2.1 s'  │ '1.2 s'  │ '2.1 s'  │ '70 ms'  │  98   │     106      │    118    │
│   13    │  'nuxt3'   │ '20.8 s' │ '20.8 s' │ '21.0 s' │  '0 ms'  │  45   │     3784     │   3801    │
└─────────┴────────────┴──────────┴──────────┴──────────┴──────────┴───────┴──────────────┴───────────┘

Todo App:

A very simple/trivial interactive Todo app. Source

Ordered by TTI, ascending:

┌─────────┬────────────┬─────────┬─────────┬─────────┬──────────┬───────┬──────────────┬───────────┐
│ (index) │    name    │   TTI   │   FCP   │   LCP   │   TBT    │ Score │ Eager JS KiB │ Total KiB │
├─────────┼────────────┼─────────┼─────────┼─────────┼──────────┼───────┼──────────────┼───────────┤
│    0    │  'astro'   │ '0.6 s' │ '0.6 s' │ '0.6 s' │  '0 ms'  │  100  │      20      │    32     │
│    1    │   'qwik'   │ '0.7 s' │ '0.7 s' │ '1.2 s' │  '0 ms'  │  100  │      2       │    25     │
│    2    │  'react'   │ '0.8 s' │ '0.8 s' │ '2.2 s' │  '0 ms'  │  99   │     159      │    171    │
│    3    │  'fresh'   │ '0.8 s' │ '0.8 s' │ '0.9 s' │  '0 ms'  │  100  │      9       │    37     │
│    4    │   'lit'    │ '0.8 s' │ '0.8 s' │ '1.1 s' │  '0 ms'  │  100  │      16      │    18     │
│    5    │  'solid'   │ '1.0 s' │ '0.7 s' │ '1.3 s' │ '40 ms'  │  86   │      17      │    19     │
│    6    │  'marko'   │ '1.1 s' │ '0.8 s' │ '0.9 s' │ '10 ms'  │  100  │      17      │    23     │
│    7    │   'vue3'   │ '1.2 s' │ '1.2 s' │ '1.8 s' │ '10 ms'  │  99   │      33      │    41     │
│    8    │  'svelte'  │ '1.5 s' │ '1.5 s' │ '1.5 s' │  '0 ms'  │  100  │      19      │    24     │
│    9    │  'gatsby'  │ '1.6 s' │ '0.8 s' │ '1.1 s' │  '0 ms'  │  100  │      70      │    75     │
│   10    │  'nuxt2'   │ '1.6 s' │ '1.0 s' │ '1.0 s' │ '40 ms'  │  100  │      95      │    106    │
│   11    │ 'angular'  │ '1.6 s' │ '1.5 s' │ '1.6 s' │ '30 ms'  │  99   │      72      │    74     │
│   12    │  'nuxt3'   │ '2.2 s' │ '2.2 s' │ '2.3 s' │ '10 ms'  │  96   │     122      │    131    │
│   13    │   'next'   │ '2.2 s' │ '0.7 s' │ '0.8 s' │ '110 ms' │  99   │      83      │    94     │
└─────────┴────────────┴─────────┴─────────┴─────────┴──────────┴───────┴──────────────┴───────────┘

Hello World:

Just a few links and <h1>Hello World</h1>. Source

Ordered by TTI, ascending:

┌─────────┬────────────┬─────────┬─────────┬─────────┬──────────┬───────┬──────────────┬───────────┐
│ (index) │    name    │   TTI   │   FCP   │   LCP   │   TBT    │ Score │ Eager JS KiB │ Total KiB │
├─────────┼────────────┼─────────┼─────────┼─────────┼──────────┼───────┼──────────────┼───────────┤
│    0    │   'qwik'   │ '0.7 s' │ '0.7 s' │ '0.7 s' │  '0 ms'  │  100  │      0       │     4     │
│    1    │  'astro'   │ '0.7 s' │ '0.7 s' │ '0.7 s' │  '0 ms'  │  100  │      0       │     9     │
│    2    │  'react'   │ '0.8 s' │ '0.8 s' │ '2.2 s' │  '0 ms'  │  99   │     154      │    166    │
│    3    │  'fresh'   │ '0.8 s' │ '0.8 s' │ '0.8 s' │  '0 ms'  │  100  │      0       │    27     │
│    4    │  'marko'   │ '0.8 s' │ '0.8 s' │ '1.1 s' │  '0 ms'  │  100  │      15      │    21     │
│    5    │   'lit'    │ '0.8 s' │ '0.6 s' │ '0.9 s' │ '10 ms'  │  100  │      15      │    16     │
│    6    │  'solid'   │ '0.9 s' │ '0.9 s' │ '1.1 s' │  '0 ms'  │  100  │      16      │    18     │
│    7    │   'vue3'   │ '1.2 s' │ '1.2 s' │ '1.5 s' │  '0 ms'  │  100  │      31      │    38     │
│    8    │  'gatsby'  │ '1.4 s' │ '0.6 s' │ '1.0 s' │  '0 ms'  │  100  │      69      │    73     │
│    9    │  'svelte'  │ '1.5 s' │ '1.5 s' │ '1.5 s' │  '0 ms'  │  100  │      18      │    22     │
│   10    │  'nuxt2'   │ '1.5 s' │ '0.9 s' │ '0.9 s' │ '120 ms' │  99   │      93      │    103    │
│   11    │ 'angular'  │ '1.7 s' │ '1.5 s' │ '1.5 s' │ '150 ms' │  98   │      72      │    74     │
│   12    │ 'hydrogen' │ '1.8 s' │ '0.6 s' │ '1.6 s' │ '30 ms'  │  91   │     160      │    172    │
│   13    │  'nuxt3'   │ '2.0 s' │ '2.0 s' │ '2.2 s' │ '10 ms'  │  97   │     122      │    130    │
│   14    │   'next'   │ '2.1 s' │ '0.7 s' │ '0.8 s' │ '40 ms'  │  100  │      82      │    93     │
└─────────┴────────────┴─────────┴─────────┴─────────┴──────────┴───────┴──────────────┴───────────┘

SSR times:

Time it took to server-side render the /dashboard page in milliseconds. Smaller numbers are better.

┌─────────┬────────────┬─────┬──────┬─────┬───────┬─────┬────────┬─────────┬─────┬─────┐
│ (index) │    name    │ 1%  │ 2.5% │ 50% │ 97.5% │ 99% │  Avg   │ Std Dev │ Min │ Max │
├─────────┼────────────┼─────┼──────┼─────┼───────┼─────┼────────┼─────────┼─────┼─────┤
│    0    │  'marko'   │  1  │  1   │  1  │   3   │  4  │  1.29  │   0.8   │  1  │ 39  │
│    1    │  'fresh'   │  4  │  4   │  4  │   5   │  6  │  4.19  │  0.88   │  1  │ 50  │
│    2    │ 'hydrogen' │  4  │  4   │  5  │  12   │ 14  │  5.63  │  4.39   │  2  │ 181 │
│    3    │  'svelte'  │  6  │  6   │  7  │  16   │ 18  │  8.17  │  3.12   │  4  │ 61  │
│    4    │  'solid'   │  6  │  6   │  8  │  18   │ 22  │  8.77  │   3.8   │  3  │ 71  │
│    5    │  'nuxt2'   │ 11  │  11  │ 14  │  25   │ 32  │ 15.04  │  4.89   │  3  │ 105 │
│    6    │  'astro'   │ 11  │  11  │ 14  │  31   │ 38  │ 16.56  │  5.98   │  9  │ 75  │
│    7    │  'remix'   │ 12  │  13  │ 18  │  47   │ 62  │  20.3  │  8.87   │  2  │ 93  │
│    8    │  'gatsby'  │ 27  │  28  │ 33  │  78   │ 103 │  36.9  │  12.86  │ 26  │ 153 │
│    9    │   'next'   │ 35  │  35  │ 40  │  95   │ 113 │ 46.96  │  19.06  │ 34  │ 220 │
│   10    │ 'angular'  │ 113 │ 116  │ 127 │  268  │ 400 │ 141.73 │  47.64  │ 42  │ 408 │
└─────────┴────────────┴─────┴──────┴─────┴───────┴─────┴────────┴─────────┴─────┴─────┘

SSR throughput (req/second):

SSR throughput of the dashboard page, measured by autocannon, sorted by 99% percentile descending. Larger numbers are better.

┌─────────┬────────────┬──────┬──────┬──────┬───────┬──────┬─────────┬─────────┬──────┬──────┐
│ (index) │    name    │  1%  │ 2.5% │ 50%  │ 97.5% │ 99%  │   Avg   │ Std Dev │ Min  │ Max  │
├─────────┼────────────┼──────┼──────┼──────┼───────┼──────┼─────────┼─────────┼──────┼──────┤
│    0    │  'marko'   │ 3677 │ 3677 │ 5411 │ 5951  │ 5951 │ 5263.1  │ 702.18  │ 3677 │ 5950 │
│    1    │  'fresh'   │ 1748 │ 1748 │ 2057 │ 2123  │ 2123 │ 1997.73 │ 117.92  │ 1748 │ 2122 │
│    2    │ 'hydrogen' │ 843  │ 843  │ 1653 │ 1807  │ 1807 │ 1528.1  │ 290.27  │ 843  │ 1807 │
│    3    │  'svelte'  │ 536  │ 536  │ 820  │ 1107  │ 1107 │  795.3  │ 182.24  │ 536  │ 1107 │
│    4    │  'solid'   │ 534  │ 534  │ 842  │ 1019  │ 1019 │ 830.64  │ 138.46  │ 534  │ 1019 │
│    5    │  'astro'   │ 444  │ 444  │ 573  │  641  │ 641  │   579   │  56.1   │ 444  │ 641  │
│    6    │  'nuxt2'   │ 384  │ 384  │ 550  │  588  │ 588  │  539.8  │  54.2   │ 384  │ 588  │
│    7    │  'remix'   │ 264  │ 264  │ 371  │  485  │ 485  │  387.9  │  69.16  │ 264  │ 485  │
│    8    │  'gatsby'  │ 158  │ 158  │ 233  │  277  │ 277  │  239.6  │  34.64  │ 158  │ 277  │
│    9    │   'next'   │ 142  │ 142  │ 206  │  233  │ 233  │  203.7  │  24.71  │ 142  │ 233  │
│   10    │ 'angular'  │  45  │  45  │  72  │  76   │  76  │  69.91  │  8.61   │  45  │  76  │
└─────────┴────────────┴──────┴──────┴──────┴───────┴──────┴─────────┴─────────┴──────┴──────┘

React SSR throughput:

Measure Node vs Bun vs Deno at SSR speed of a non trivial (the dashboard) React app. The below is requests per second. Larger numbers are better.

┌─────────┬──────────────────┬─────┬─────┬─────┬───────┬─────────┐
│ (index) │       name       │ 1%  │ 50% │ 99% │  Avg  │ Std Dev │
├─────────┼──────────────────┼─────┼─────┼─────┼───────┼─────────┤
│    0    │ 'react-ssr-bun'  │ 500 │ 669 │ 718 │ 650.8 │  71.7   │
│    1    │ 'react-ssr-deno' │ 550 │ 600 │ 630 │  601  │  20.89  │
│    2    │ 'react-ssr-node' │ 267 │ 375 │ 394 │ 366.5 │  35.04  │
└─────────┴──────────────────┴─────┴─────┴─────┴───────┴─────────┘

The above uses Bun version 0.1.10, Deno version 1.25.0, Node.js version 16.14.0. Run on a 2.6 GHz 6-Core Intel Core i7.

Build times:

┌─────────┬────────────┬──────────────────────┐
│ (index) │    Name    │ Build Time (Seconds) │
├─────────┼────────────┼──────────────────────┤
│    0    │   'fresh'  │          0           │
│    1    │   'vue3'   │         3.5          │
│    2    │   'react'  │         7.4          │
│    3    │  'svelte'  │         7.7          │
│    4    │   'qwik'   │         7.7          │
│    5    │   'next'   │         7.8          │
│    6    │   'astro'  │         7.9          │
│    7    │ 'hydrogen' │         8.4          │
│    8    │    'lit'   │         8.4          │
│    9    │  'gatsby'  │         9.9          │
│   10    │  'angular' │         10.7         │
│   11    │   'nuxt2'  │         12.8         │
│   12    │   'solid'  │         12.9         │
│   13    │   'nuxt3'  │          16          │
│   14    │   'marko'  │         16.2         │
└─────────┴────────────┴──────────────────────┘

Roadmap

Next things we want to add:

More complex examples that more closesly emulate real world sites and apps (e.g. a dashboard for exploring the test run results in interactive tables and graphs)
Test interaction delays - such as initial interaction (like add todo) or navigate to next page
Move test running to be remote, such as in GH actions (Help wanted!)
Benchmark SSR speeds. Also add Bun here.
Benchmark with and without Partytown for 3P scripts (and vs none at all)

Contributions welcome!

Running locally

Prereqs

You will need Node.js >= 16.14.0k Deno installed locally, and Bun installed locally

Setup

After cloning this repo, install dependencies:

npm install

Now you can start running the below scripts:

Install

Use the install script to install dependencies of each framework:

npm run fw-install

Generate

First, we must generate the component code for each framework via Mitosis.

cd apps/components
npm install
npm run build

Build

Use the build script to build all frameworks (be sure to install first as described above):

npm run build

Measure

To measure the weight of each framework (after you ran install and build):

npm run measure

Credit and Inspiration

Stefan Krause and his js-framework-benchmark
Addy Osmani and his great Web Performance Recipes With Puppeteer blog post
Lighthouse and the very helpful Lighthouse team
Ryan Carniato for always providing incredibly helpful insight and feedback
Builder.io for funding this research and development

Comments

Update Nuxt3 Benchmark

Hi @steve8708. This PR updates and fixes Nuxt3 benchmarks with more realistic numbers.

Currently, we were basically benchmarking Nuxt 3 SSR without compression. Let me explain nuxt commands before changes:

nuxt build: Builds Nuxt with Node.js target preset and prerenders (generates) specified routes if any
nuxt generate: Prerenders routes starting from / and uses a crawler to pretender any possible route
nuxt preview: Starts build against target preset. With the default target, it runs a local Node.js process with SSR renderer and no compression (new feature: it is possible to enable compression without CDN too!)

In this PR I've made a few changes:

Updated to latest Nuxt 3 and Nitro builds (close to RC.9 releasing this week)
Used new Nitro feature to precompress public assets and removed vue-plugin-compression.
Added /, /todo and /dashboard to the prerender routes
Added dashboard-ssr page and enabled nuxt3 to be included in measure-ssr benchmarks.

When running nuxt previe now, a local Node.js runs Nuxt 3 in hybrid mode handling generated routes with compression and rest with SSR. Tip: if you want to ensure it is SSR rendered or static, check for X-Powered-By header. Only SSR pages have it.

Results: Here are the results from my M2 Air - Node.js v16.16.0 - MacOS 13.0 Beta (22A5321d). I've not updated the readme so that you can run benchmarks on the same environment to be fair but please let me know if you like to update the current readme too. Current data is honestly unfair for Nuxt3...

/ 
┌─────────┬─────────┬─────────┬─────────┬─────────┬────────┬───────┬──────────────┬───────────┐
│ (index) │  name   │   TTI   │   FCP   │   LCP   │  TBT   │ Score │ Eager JS KiB │ Total KiB │
├─────────┼─────────┼─────────┼─────────┼─────────┼────────┼───────┼──────────────┼───────────┤
│    0    │ 'nuxt3' │ '1.5 s' │ '1.5 s' │ '1.7 s' │ '0 ms' │  99   │      50      │    57     │
└─────────┴─────────┴─────────┴─────────┴─────────┴────────┴───────┴──────────────┴───────────┘

/todo

┌─────────┬─────────┬─────────┬─────────┬─────────┬────────┬───────┬──────────────┬───────────┐
│ (index) │  name   │   TTI   │   FCP   │   LCP   │  TBT   │ Score │ Eager JS KiB │ Total KiB │
├─────────┼─────────┼─────────┼─────────┼─────────┼────────┼───────┼──────────────┼───────────┤
│    0    │ 'nuxt3' │ '1.5 s' │ '1.5 s' │ '1.7 s' │ '0 ms' │  99   │      50      │    55     │
└─────────┴─────────┴─────────┴─────────┴─────────┴────────┴───────┴──────────────┴───────────┘

/dashboard

┌─────────┬─────────┬─────────┬─────────┬─────────┬────────┬───────┬──────────────┬───────────┐
│ (index) │  name   │   TTI   │   FCP   │   LCP   │  TBT   │ Score │ Eager JS KiB │ Total KiB │
├─────────┼─────────┼─────────┼─────────┼─────────┼────────┼───────┼──────────────┼───────────┤
│    0    │ 'nuxt3' │ '1.7 s' │ '1.7 s' │ '1.7 s' │ '0 ms' │  99   │      59      │    65     │
└─────────┴─────────┴─────────┴─────────┴─────────┴────────┴───────┴──────────────┴───────────┘

/dashboard-ssr (ssr)

┌─────────┬─────────┬────┬─────┬─────┬──────┬─────────┐
│ (index) │  name   │ 1% │ 50% │ 99% │ Avg  │ Std Dev │
├─────────┼─────────┼────┼─────┼─────┼──────┼─────────┤
│    0    │ 'nuxt3' │ 6  │  7  │ 18  │ 8.5  │  4.38   │
└─────────┴─────────┴────┴─────┴─────┴──────┴─────────┘

opened by pi0 5

update solid-start, add solid-ssr-node

This normalizes results and gives us a more raw Solid render. I did notice Mitosis gens unnecessary code for Solid loops. We don't have keys which means we don't often need index. Solid actually optimizes the no index case, so it's forth improving. I changed it by hand and actually saw performance improvements. I need to dig in more honestly, but it's a start.

opened by ryansolid 2
fix(nuxt3): use latest edge channel without page prefetching

Following up https://twitter.com/steve8708/status/1558247170045751297?s=21&t=mNJZB79vPuhTTa_39hp3Rg this PR updates Nuxt 3 to edge channel (containing latest RC.8 and also a recent commit that disables pages prefetching by default https://github.com/nuxt/framework/pull/6662)

I will follow up with subsequent PRs to improve testing measurements for Nuxt3 👍🏼

Results with this PR on M2:

Screenshot I also tweeted by more optimizations using app.vue instead of pages/ and Nuxt 3 universal routing utils. It includes more optimizations than this PR.

opened by pi0 2

npm run build - Failing with a type error

Here's what I did:

I made sure I'm using Node 16 with nvm (it would be cool if you could fix the exact version of Node this way)
npm install
npm run install
cd apps/components
npm install
npm run build
cd ../.. - Back to project root
npm run build

It's compiling a lot and then failing with this:

Error: src/app/generated-components/components/todo-item.ts:5:9 - error TS2304: Cannot find name 'Todo'.

5   item: Todo;
          ~~~~

It's possible I'm missing something obvious.

It looks like that as a side effect of those npm installs, it modified package locks:

> git st                                                  ✔  4s  16.15.0 Node
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
	modified:   frameworks/astro/package-lock.json
	modified:   frameworks/next/package-lock.json
	modified:   frameworks/next/yarn.lock
	modified:   frameworks/nuxt3/package-lock.json
	modified:   frameworks/solid/package-lock.json
	modified:   frameworks/svelte/package-lock.json

Untracked files:
	frameworks/fresh/package-lock.json

That might have something to do with the failure case.

opened by bebraw 2

Make react-dom ssr section more accurate

Results using the same react-dom/server:

None of the runtimes are using the same build of react-dom/server, so this line is incorrect.

Node is using react-dom/server.node: https://github.com/BuilderIO/framework-benchmarks/blob/2fb93ecf448737ab08b5e2efa481d54a709fce97/frameworks/react-ssr-node/http.jsx#L4

Deno is using react-dom/server.browser: https://github.com/BuilderIO/framework-benchmarks/blob/2fb93ecf448737ab08b5e2efa481d54a709fce97/frameworks/react-ssr-deno/http.jsx#L5

Bun is using what will become react-dom/server.bun: https://github.com/BuilderIO/framework-benchmarks/blob/2fb93ecf448737ab08b5e2efa481d54a709fce97/frameworks/react-ssr-bun/http.js#L5

In real-world usage, it's not clear why someone would choose a build intended for a different host, so it's not particularly useful for benchmarking.

Also, we can switch bun's import.meta.require to be a regular import statement. There was a bug little while ago that has since been fixed

Are the tables manually updated? I just moved the bun row from the bottom table to the top table and removed the bottom table

opened by Jarred-Sumner 1

Issue with Deno React SSR bench

Hi, in the React SSR bench there's:

React SSR times:
Test Node vs Bun vs Deno at React SSR of a non trivial (the dashboard) app

Note: currently having an issue with Deno, looking into

What's the issue? How can we help to fix it?

opened by bartlomieju 1

Adds Gatsby as a tested framework
2 heads up outside of the actual commit:

When running main, Angular errored out so I removed it during my testing and brought back for the PR.

Can't add PRs to the actual main repo.

I think this tool is awesome and was stoked to see it pop up on my Twitter. I went ahead and added Gatsby using npm init gatsby and otherwise matched the implementation used for Next.js.
opened by ChrisLaRocque 1
Feature/todo app
add Mitosis todo app

add it as a dependency to every framework

get it working in Svelte & Solid

try but failed to get it working in Remix (ESM issues) and Nuxt2 (weird import issues, can't find module despite being there)

the app is non-interactive due to a mitosis bug when generating functions: they have extra/wrong arguments added to them (props, state, event) instead of (event)
opened by samijaber 0
Performance issues in Angular SSR configuration
Hello,

I think that this is a great project, Angular Universal has lacked public performance benchmark data since it's so different to other frameworks and Universal has been difficult to set up until quite recently. I think there are a few issues affecting the performance of the Angular Universal example which is currently the slowest SSR example.

Things like:

Dynamically running the critical CSS inliner at runtime (an unsafe default): https://github.com/angular/universal/issues/2106

Extra change detection cycles by not explicitly using onPush change detection: https://angular.io/api/core/ChangeDetectionStrategy

Missing a track by function to keep track of individual rows and not re-rendering the whole table: https://angular.io/api/core/TrackByFunction

Calling methods from inside templates which are invoked on each change detection cycle: https://blog.devgenius.io/avoid-calling-expressions-in-template-of-angular-39439c547653

If we make some PRs for that is there a contribution process or should we just make a bunch of PRs?

Thanks!
opened by cgrantnz 3
Maybe more candidates to benchmark
Two frameworks or libs I see much less mentions on social media are:

https://capri.build/ - afaik came out around the same time as Fresh, and the funny part is, the logos are even similar. This one is definitely comparable to the other frameworks in the test (e.g. you can also choose Solid to render interactive parts)

https://turbo.hotwired.dev/ - came out a few years ago, which was the first new framework to my knowledge to make a turn to the 'send HTML and not only JavaScript bundles'-era we're entering now (if we exclude marko)
opened by kurtextrem 3

Owner

Builder.io

GitHub

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

3 May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

coc-pyright-tools is a coc-extension that adds its own functionality to coc-pyright for coc.nvim. Currently the "Inlay Hints", "CodeLens" and "Test Framework commands" feature is available.

coc-pyright-tools !!WARNING!! Inlay hints feature of coc-pyright-tools, have been ported to coc-pyright itself. https://github.com/fannheyward/coc-pyr

5 Aug 23, 2022

Reddit is a website where a community of registered users ( redditors) submits content. Its format resembles a traditional bulletin board system, allowing users to post messages and links to other websites and comment on each other's posts. Entries are ranked by a voting system; other users can vote comments and posts either up ( upvoted) or down.

Setup First, run the development server: npm run dev Open http://localhost:3000 with your browser to see the result. You can start editing the page by

4 Jun 23, 2022

It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

4 May 13, 2022

Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

3 Sep 30, 2022

A bot to automatically DCA (Dollar-Cost Average) buy cryptocurrency on Binance

Binance DCA (Dollar-Cost-Averaging) Bot This bot allows you to sit back and relax while it automatically invests in cryptocurrency on the Binance exch

164 Jan 6, 2023

Use pulsar to make custom trading strategy that uses Flashloans at low cost. No contract deployment required.

PULSAR Pulsar is a contract that will let you execute custom call on the blockchain and let you make use of the Flasloans in your trading sequences. Y

9 Jun 6, 2022

Ethereum smart contract gas cost waste pattern detection and patching tool

4 Mar 23, 2022

Low cost, low effort P2P WebRTC serverless signalling using Cloudflare Workers

P2PCF P2PCF enables free (or cheap) serverless WebRTC signalling using a Cloudflare worker and a Cloudflare R2 bucket. The API is inspired by P2PT, bu

560 Jan 8, 2023

Jester is a test-generation tool to create integration test code.

Code Generator for Integration Tests Introduction Welcome to Jester: An easy-to-use web application that helps you create and implement integration te

54 Dec 12, 2022

Simple components showing differences in each major frontend web framework.

Web Frameworks A collection of simple components in each of the leading frontend web frameworks. So far, covering React, Vue, Angular, Svelte and Soli

21 Nov 27, 2022

Simple and Extensible Markdown Parser for Svelte, however its simplicity can be extended to any framework.

svelte-simple-markdown This is a fork of Simple-Markdown, modified to target Svelte, however due to separating the parsing and outputting steps, it ca

3 May 22, 2022

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

103 Dec 30, 2022

Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility and performance

Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence.

12.7k Dec 30, 2022

Brittle TAP test framework

brittle tap à la mode A fullstack TAP test runner built for modern times. API Initializers To create a test the exported test method can be used in a

72 Dec 14, 2022

Mixed Messages is a simple Node.js application, that will print a randomized fake fact to the terminal each time it is ran.

Mixed Messages - Fake Fact Generator Mixed Messages is a simple Node.js application, That will print a randomized fake fact to the terminal each time

2 Jan 10, 2022

Compare camelized/dasherized/underscored strings each other 🤜🏿 🤛🏿

aynen Compare camelized/dasherized/underscored strings each other Install npm install aynen yarn add aynen Usage import aynen from 'aynen'; aynen('fo

4 Mar 25, 2022