Beyond React: Exploring Svelte and SolidJS

Svelte: The Compiler Approach

How Svelte Differs from React

Svelte shifts the paradigm by compiling your components into highly efficient imperative code at build time, rather than interpreting them in the browser. This approach removes the need for a virtual DOM, reduces runtime overhead, and results in faster initial loads and updates.

Svelte Syntax and Reactivity

Svelte makes reactivity explicit. Assigning a value to a variable triggers updates:

<script>
  let count = 0;
  function increment() {
    count += 1; // Triggers update automatically
  }
</script>

<button on:click={increment}>{count}</button>

No need for hooks or setState. Svelte tracks dependencies at compile-time.

Computed Values

<script>
  let first = 'John';
  let last = 'Doe';

  $: fullName = `${first} ${last}`; // $: makes this reactive
</script>

<span>{fullName}</span>

Svelte Stores

For shared state, Svelte provides stores:

// store.js
import { writable } from 'svelte/store';
export const count = writable(0);

<script>
  import { count } from './store.js';
</script>

<button on:click={() => $count += 1}>{$count}</button>

Svelte Routing and Ecosystem

• Routing: Use svelte-routing or Routify
• SSR: SvelteKit is the official app framework, supporting SSR, routing, and more.

SolidJS: Fine-Grained Reactivity

How SolidJS Differs from React

SolidJS offers React-like syntax with a fundamentally different reactivity model. Its fine-grained reactivity system is inspired by Knockout and MobX, tracking dependencies at the signal level and updating only what’s needed without a virtual DOM.

SolidJS Syntax and Reactivity

SolidJS uses “signals” for state. State is managed via primitives like createSignal:

import { createSignal } from 'solid-js';

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

  return (
    <button onClick={() => setCount(count() + 1)}>
      {count()}
    </button>
  );
}

Notice:
– count() is a getter, not a variable.
– No hooks, no dependencies array.

Computed Values and Effects

import { createSignal, createMemo, createEffect } from 'solid-js';

const [a, setA] = createSignal(2);
const [b, setB] = createSignal(3);

const sum = createMemo(() => a() + b());

createEffect(() => {
  console.log("Sum is", sum());
});

createMemo caches computations, and createEffect runs when dependencies change.

SolidJS Routing and Ecosystem

• Routing: solid-app-router is the official router.
• SSR: SolidStart is the app framework with SSR and routing.
• DevTools: Available as browser extensions.

Svelte vs SolidJS: Side-by-Side

Migrating from React: Practical Steps

Svelte Migration Example

React:

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Svelte:

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>{count}</button>

Key Actions:
– Use Svelte’s reactive assignments instead of useState.
– Replace JSX with Svelte’s HTML-like template.
– Use on:event for events.

SolidJS Migration Example

React:

const [value, setValue] = useState(0);
return <input value={value} onChange={e => setValue(e.target.value)} />;

SolidJS:

import { createSignal } from 'solid-js';

const [value, setValue] = createSignal(0);
return <input value={value()} onInput={e => setValue(e.target.value)} />;

Key Actions:
– Replace hooks with createSignal.
– Getter functions for state access: value().
– Use onInput instead of onChange for input elements.

When to Use Svelte or SolidJS

Actionable Insights

• Choose Svelte if you want a truly minimal, easy-to-learn framework with a focus on simplicity, small bundles, and a modern application framework (SvelteKit).
• Choose SolidJS if you want React-like declarative UI with the fastest updates possible, and are comfortable with JSX and new primitives.
• Migration is straightforward for simple components; more complex state or lifecycle logic may require rethinking patterns for reactivity.
• Performance: Both frameworks routinely outperform React in benchmarks, especially on updates and bundle size.
• Community & Ecosystem: Svelte is more established, but SolidJS is growing rapidly, especially among React enthusiasts seeking better performance.

Quick Start Commands

Svelte

npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
npm install
npm run dev

SolidJS

npm create vite@latest my-solid-app -- --template solid
cd my-solid-app
npm install
npm run dev

References

• Svelte Documentation
• SolidJS Documentation
• Svelte vs SolidJS Benchmarks
• SvelteKit
• SolidStart