Comparisons

There are many JavaScript frameworks! Below is an overview of some of the major ones and how Torpor is similar and different.

React

React is a hugely popular framework that was launched and backed by Facebook. Its components are written in JavaScript with an embedded XML-like syntax called JSX for declaring the UI. It has been used in some of the biggest websites and has an extensive ecosystem of helper libraries as well as a robust jobs market. Despite being one of the older JavaScript frameworks, React is constantly evolving with new (and sometimes controversial) features added frequently.

React uses a Virtual DOM to store a copy of the browser's UI and update it when component state is changed. This means that state management can be as simple as possible, stored in plain JavaScript variables that are synced automatically to the UI, but this can also lead to performance issues if you're not careful.

Styling in React is achieved by importing a CSS file, using style objects within JSX, or using one of the many third party libraries with a variety of approaches.

There are many backend frameworks built for use with React, but the most used are probably Next.js (maintained by Vercel) and Remix (maintained by Shopify).

A React counter

import { useState } from "react";

export default function Counter() {
	const [count, setCount] = useState(0);

	function incrementCount() {
		setCount((count) => count + 1);
	}

	return (
		<>
			<p>Counter: {count}</p>
			<button onClick={incrementCount}>+1</button>
		</>
	);
}

Solid

Solid is one of the newest frameworks, but it has been enormously influential in spreading the adoption of fine-grained reactivity, via a mechanism they call signals.

Unlike a Virtual DOM, which re-runs all or part of the UI in response to changes, signals watch for changes to state and update only the smallest part of the UI that depends on that state.

Otherwise, the experience of writing a Solid component is similar to that of a React component, with the logic in JavaScript, the markup in JSX and styles in imported CSS.

Solid provides an official server framework called SolidStart.

A Solid counter

import { createSignal } from "solid-js";

export default function Counter() {
	const [count, setCount] = createSignal(0);

	function incrementCount() {
		setCount(count() + 1);
	}

	return (
		<>
			<p>Counter: {count()}</p>
			<button onClick={incrementCount}>+1</button>
		</>
	);
}

Vue

Vue is another very popular framework. Its components are written in a single file using a custom templating language, with separate sections for scripts, markup and styles. Vue has an extensive ecosystem of helper libraries known for their high quality and consistency.

Vue uses a Virtual DOM to manage component state changes with some clever optimizations to avoid re-rendering where possible. There are some ongoing efforts to go beyond this and remove the Virtual Dom altogether, replacing it with a signals-based implementation, known as Vue Vapor.

Styling in Vue is achieved by writing plain CSS within the <style> tag of a component.

Vue provides an official Vue Router for building Single Page Applications, and for more complex requirements there is the Nuxt framework.

A Vue 3 counter

<script setup>
	import { ref } from "vue";
	const count = ref(0);

	function incrementCount() {
		count.value++;
	}
</script>

<template>
	<p>Counter: {{ count }}</p>
	<button @click="incrementCount">+1</button>
</template>

Svelte

Svelte is a newer framework that has gained a lot of fans due to its focus on ease of use and simplicity. Like Vue, its components are written in a single file using a custom templating language, with separate sections for scripts, markup and styles.

Initially, Svelte used a compile-time tracking system to know when to update the browser's UI, but the latest version (Svelte 5) has moved to a more signals-like system that they call Runes.

Styling in Svelte is achieved by writing plain CSS within the <style> tag of a component.

Svelte provides an official server framework called SvelteKit.

A Svelte 5 counter

<script>
	let count = $state(0);

	function incrementCount() {
		count++;
	}
</script>

<p>Counter: {count}</p>
<button onclick={incrementCount}>+1</button>

Torpor

Torpor components are written in JavaScript with embedded HTML and CSS for declaring the UI. Torpor aims to include everything you need to build high-quality components, apps and sites without having to immediately reach for third-party libraries.

Torpor state is stored in an object, which is wrapped in a JavaScript proxy, which is monitored for changes to update the browser UI. This is conceptually simpler than the approaches of Solid, Vue and Svelte, but may not be as efficient.

Torpor provides a set of UI components, as well as an official server framework called Torpor Build.

A Torpor counter

export default function Counter() {
	let $state = $watch({ count: 0 })

	function incrementCount() {
		$state.count++;
	}

	@render {
		<div>
			<p>Counter: {$state.count}</p>
			<button onclick={incrementCount}>+1</button>
		</div>
	}
}

Comparison table

	React	Vue	Svelte	Solid	Torpor
State	Virtual DOM	VDOM / Signals	Runes	Signals	State proxy
UI Markup	JSX	HTML template	HTML template	JSX	HTML template
Styling	Import CSS	CSS template	CSS template	Import CSS	CSS template
Server Framework	Next or Remix	Nuxt	SvelteKit	SolidStart	Torpor Build
Popularity	Huge	Large	Medium	Small	None