Speedometer Workloads is a collection of open source example apps and sites that aim to be representative of the web. These workloads can be consumed by benchmarks for testing and benchmarking purposes.
This repo contains two distinct directories, which groups containing projects into apps and packages.
apps: Main directory for workload apps and websites.packages: Reusable projects that can be consumed by workloads or benchmarks.
Table of content:
This monorepo is managed by pnpm. In order to develop or test locally, please ensure that pnpm is installed on your machine.
Install pnpm globally with npm:
npm install -g pnpmFor troubleshooting, refer to this guide.
Once pnpm is available, the following script installs all dependencies for all projects:
pnpm installTo run a single app, a filter function from pnpm can be used from the root directory. Each app can be targeted by referencing its package name.
For example to run the news-site-next app in development mode, the following command can be used:
pnpm -F news-site-next devThe following scripts are currently supported by all workloads:
dev: Run a workload in dev mode locally.build:static: Bundles all necessary files and copies them into adistfolder.start:static: Starts a node server to serve files from thedistfolder.
These scripts can be used either by opening a terminal in each workloads directory itself, or from the root of this repo.
From a workloads directory, by navigating to the folder in your finder and opening a terminal.
Example news-site-next:
npm run dev
npm run build:static
npm run start:staticFrom the root of the repo with pnpm and a filter flag.
Example news-site-next:
pnpm -F news-site-next dev
pnpm -F news-site-next build:static
pnpm -F news-site-next start:staticTo enable communication between the workloads and a benchmark using postMessage, the benchmark-connector package is used.
Each workload that opts into this feature has the benchmark-connector package installed.
Some workloads use a prepare script to copy the relevant JavaScript file to the appropriate directory.
To run the build script on all apps, the following command can be used:
pnpm run build:appsTo create a copy of all dist folders of all apps, the following commands can be used:
pnpm run move:apps
pnpm run move:apps:desktopMain directory for all workloads, which are grouped by categories:
charts: Various charting apps.complex-dom: TodoMvc apps wrapped in a complex dom.dashboards: Various dashboard apps.editors: Various editing apps.news-site: Various versions of a news site.todomvc: Various versions of a todo application.
Charting apps allow us to test SVG and canvas rendering by displaying charts in various workloads. These apps represent popular sites that display financial information, stock charts or dashboards.
Observable Plot displays a stacked bar chart, as well as a dotted chart. It is based on D3, which is a JavaScript library for visualizing tabular data and outputs SVG elements. It loops through a big dataset to build the source data that D3 needs, using map, filter and flatMap methods. As a result this exercises creation and copying of objects and arrays.
Chart.js is a JavaScript charting library. The included workload displays a scatter graph with the canvas api, both with some transparency and with full opacity. This uses the same data as the previous workload, but with a different preparation phase. In this case it makes a heavy use of trigonometry to compute distances between airports.
React Stockcharts displays a dashboard for stocks. It is based on D3 for all computation, but outputs SVG directly using React.
pnpm -F charts-chartjs dev
pnpm -F charts-chartjs build:static
pnpm -F charts-chartjs start:staticpnpm -F charts-observable-plot dev
pnpm -F charts-observable-plot build:static
pnpm -F charts-observable-plot start:staticpnpm -F charts-react-stockcharts dev
pnpm -F charts-react-stockcharts build:static
pnpm -F charts-react-stockcharts start:staticThe complex DOM workloads embed various TodoMVC implementations in a static UI shell that mimics a complex web page. The idea is to capture the performance impact on executing seemingly isolated actions (e.g. adding/deleting todo items) in the context of a complex website.
pnpm -F todomvc-angular-complex dev
pnpm -F todomvc-angular-complex build:static
pnpm -F todomvc-angular-complex start:staticpnpm -F todomvc-backbone-complex dev
pnpm -F todomvc-backbone-complex build:static
pnpm -F todomvc-backbone-complex start:staticpnpm -F todomvc-es5-complex dev
pnpm -F todomvc-es5-complex build:static
pnpm -F todomvc-es5-complex start:staticpnpm -F todomvc-es6-webpack-complex dev
pnpm -F todomvc-es6-webpack-complex build:static
pnpm -F todomvc-es6-webpack-complex start:staticpnpm -F todomvc-jquery-complex dev
pnpm -F todomvc-jquery-complex build:static
pnpm -F todomvc-jquery-complex start:staticpnpm -F todomvc-lit-complex dev
pnpm -F todomvc-lit-complex build:static
pnpm -F todomvc-lit-complex start:staticpnpm -F todomvc-preact-complex dev
pnpm -F todomvc-preact-complex build:static
pnpm -F todomvc-preact-complex start:staticpnpm -F todomvc-react-complex dev
pnpm -F todomvc-react-complex build:static
pnpm -F todomvc-react-complex start:staticpnpm -F todomvc-react-redux-complex dev
pnpm -F todomvc-react-redux-complex build:static
pnpm -F todomvc-react-redux-complex start:staticpnpm -F todomvc-svelte-complex dev
pnpm -F todomvc-svelte-complex build:static
pnpm -F todomvc-svelte-complex start:staticpnpm -F todomvc-vue-complex dev
pnpm -F todomvc-vue-complex build:static
pnpm -F todomvc-vue-complex start:staticpnpm -F todomvc-web-components-complex dev
pnpm -F todomvc-web-components-complex build:static
pnpm -F todomvc-web-components-complex start:staticWebkit Perf-Dashboard is an application used to track various performance metrics of WebKit. The dashboard uses canvas drawing and web components for its ui.
pnpm -F perf.webkit.org dev
pnpm -F perf.webkit.org build:static
pnpm -F perf.webkit.org start:staticEditors, for example WYSIWYG text and code editors, let us focus on editing live text and capturing form interactions. Typical scenarios are writing an email, logging into a website or filling out an online form.
Codemirror is a code editor that implements a text input field with support for many editing features. Several languages and frameworks are available and for this workload we used the JavaScript library from Codemirror.
Tiptap Editor is a headless, framework-agnostic rich text editor that's customizable and extendable. This workload used Tiptap as its basis and added a simple ui to interact with.
pnpm -F editors-codemirror dev
pnpm -F editors-codemirror build:static
pnpm -F editors-codemirror start:staticpnpm -F editors-tiptap dev
pnpm -F editors-tiptap build:static
pnpm -F editors-tiptap start:staticA news site that allows testing of a single-page application. The content is derrived from a static local source and is available in english, japanese and arabic. Styling supports left-to-right (LTR) and right-to-left (RTL) and can be forced by passing in the following url parameters:
dir: "rtl" or "ltr"lang: "en", "jp" or "ar" (defaults to "en" if language is not found)
Several interactions are available, such as:
- navigating to different pages
- expanding and collapsing a sitebar
- showing and hiding of login modal
- showing and hiding of settings modal
- toggling of drop-down menu
pnpm -F news-site-next dev
pnpm -F news-site-next build
pnpm -F news-site-next build:static
pnpm -F news-site-next start
pnpm -F news-site-next start:staticpnpm -F news-site-nuxt dev
pnpm -F news-site-nuxt build
pnpm -F news-site-nuxt build:static
pnpm -F news-site-nuxt start
pnpm -F news-site-next start:staticTodoMVC is a to-do application that allows a user to keep track of tasks. The user can enter a new task, update an existing one, mark a task as completed, or delete it. In addition to the basic CRUD operations, the TodoMVC app has some added functionality: filters are available to change the view to “all”, “active” or “completed” tasks and a status text displays the number of active tasks to complete.
pnpm -F todomvc-angular dev
pnpm -F todomvc-angular build:static
pnpm -F todomvc-angular start:staticpnpm -F todomvc-backbone dev
pnpm -F todomvc-backbone build:static
pnpm -F todomvc-backbone start:staticpnpm -F todomvc-es5 dev
pnpm -F todomvc-es5 build:static
pnpm -F todomvc-es5 start:staticpnpm -F todomvc-es6-webpack dev
pnpm -F todomvc-es6-webpack build:static
pnpm -F todomvc-es6-webpack start:staticpnpm -F todomvc-jquery dev
pnpm -F todomvc-jquery build:static
pnpm -F todomvc-jquery start:staticpnpm -F todomvc-lit dev
pnpm -F todomvc-lit build:static
pnpm -F todomvc-lit start:staticpnpm -F todomvc-preact dev
pnpm -F todomvc-preact build:static
pnpm -F todomvc-preact start:staticpnpm -F todomvc-react dev
pnpm -F todomvc-react build:static
pnpm -F todomvc-react start:staticpnpm -F todomvc-react-redux dev
pnpm -F todomvc-react-redux build:static
pnpm -F todomvc-react-redux start:staticpnpm -F todomvc-svelte dev
pnpm -F todomvc-svelte build:static
pnpm -F todomvc-svelte start:staticpnpm -F todomvc-vue dev
pnpm -F todomvc-vue build:static
pnpm -F todomvc-vue start:staticpnpm -F todomvc-web-components dev
pnpm -F todomvc-web-components build:static
pnpm -F todomvc-web-components start:staticDirectory that contains shareable utilities that can be consumed by the apps, or installed by a benchmark.
To format all packages or to build all packages, the following script can be used:
pnpm run format:packages
pnpm run build:packagesVarious plugins for bundlers.
pnpm -F rollup-constructable-css format
pnpm -F rollup-constructable-css buildpnpm -F rollup-copy-files format
pnpm -F rollup-copy-files buildStyles for workloads.
pnpm -F news-site-css format
pnpm -F news-site-css buildpnpm -F todomvc-css format
pnpm -F todomvc-css buildTools that are used by workloads or benchmarks.
A script that helps moving workload files to an output folder. This script also takes care or renaming references in the index.html file, to ensure the output folder contains a locally contained build.
pnpm -F app-build-scripts format
pnpm -F app-build-scripts buildEnables communication between benchmarks and workloads.
- benchmark-connector.min.js: communication between benchmark and workload.
- prepare.min.js: script to copy benchmark-connector.min.js file to the public folder of workload.
pnpm -F benchmark-connector format
pnpm -F benchmark-connector buildUsed to generate a complex dom for todomvc apps.
pnpm -F big-dom-generator buildUtility to remove words from output files that should be ommited.
pnpm -F sanitize-language format
pnpm -F sanitize-language buildManages all workloads, by using the following commands:
pnpm -F workloads-manager format
pnpm -F workloads-manager build
pnpm -F workloads-manager build:apps
pnpm -F workloads-manager move