Implementazione di Componenti Reattivi con SolidJS

Introduzione a SolidJS

SolidJS è un framework frontend moderno che si focalizza sulla reattività e le performance. A differenza di soluzioni più popolari come React o Vue, SolidJS utilizza un sistema di fine-grained reactivity, cioè una reattività basata su segnali e dipendenze precise. Questo permette di aggiornare solo le parti realmente interessate dal cambiamento dello stato, senza dover ricorrere al virtual DOM.

Il risultato è un framework estremamente performante che offre controllo granulare sugli aggiornamenti all’interfaccia utente, senza sacrificare leggibilità o ergonomia nello sviluppo.

Confronto con altri framework

Per capire meglio dove si posiziona SolidJS, vale la pena confrontarlo con framework noti:

SolidJS, come Svelte, elimina il concetto di virtual DOM, aggiornando direttamente il DOM reale, riducendo le operazioni superflue. Questo approccio porta benefici simili a quelli esplorati in React con tecniche di ottimizzazione del DOM, ma con un design nativamente più efficiente.

Installazione e setup

Per iniziare con SolidJS, il modo più rapido è tramite create-solid:

npx degit solidjs/templates/js my-solid-app
cd my-solid-app
npm install
npm run dev

In alternativa, si può integrare SolidJS in build più complesse con Vite, Webpack o analoghi strumenti. Grazie alla compatibilità con TypeScript, è ideale anche per progetti enterprise.

Creazione di componenti reattivi

I componenti in SolidJS sono semplici funzioni che ritornano JSX. Vediamo un esempio di counter:

import { createSignal } from "solid-js";

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

  return (
    <button> setCount(count() + 1)}>
      Cliccato {count()} volte
    </button>
  );
}

export default Counter;

La particolarità è che count() non è una variabile, ma una funzione che restituisce il valore attuale del segnale. Questo garantisce una reattività immediata e puntuale.

Se sei interessato a concetti come il ciclo di vita del DOM, ti consiglio anche questa guida approfondita sul ciclo di vita del DOM.

Gestione dello stato

SolidJS offre diversi primitive reattive:

createSignal

Per valori singoli, come contatori o variabili di input.

createEffect

Per eseguire side effect ogni volta che un segnale cambia.

createMemo

Per calcoli derivati efficienti, memoizzati automaticamente.

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

function Cart() {
  const [items, setItems] = createSignal([10, 20, 30]);
  const total = createMemo(() => items().reduce((a, b) => a + b, 0));

  createEffect(() => {
    console.log("Totale aggiornato:", total());
  });

  return

Totale carrello:

{total()} €;}

Il rapporto diretto tra segnali e UI riduce complessità e bug dovuti a stati non sincronizzati.

Performance e ottimizzazioni

SolidJS è particolarmente adatto quando vogliamo performance elevate. L’assenza del virtual DOM elimina una grossa quota di overhead. Inoltre, le primitive reattive sono ottimizzate per aggiornare solo le parti influenzate.

Per contesti particolarmente complessi, è utile adottare tecniche complementari, come l’uso di Web Workers e offscreen canvas o componenti fluidi con ResizeObserver. Queste soluzioni garantiscono esperienze fluide anche con molte interazioni simultanee.

Esempio di lista dinamica

import { createSignal } from "solid-js";

function TodoList() {
  const [todos, setTodos] = createSignal(["Studiare SolidJS"]);

  const addTodo = () => {
    setTodos([...todos(), `Task ${todos().length + 1}`]);
  };

  return (
    <>
      <button>Aggiungi</button>

{todos().map(todo =>
• {todo}

)}

    </>
  );
}

Come si vede, l’aggiornamento della lista è immediato, senza necessità di tecniche di diff complesso.

Esempi pratici

Form con validazione reattiva

import { createSignal, createEffect } from "solid-js";

function LoginForm() {
  const [email, setEmail] = createSignal("");
  const [valid, setValid] = createSignal(false);

  createEffect(() => {
    setValid(/^[^@]+@[^@]+\.[^@]+$/.test(email()));
  });

  return (

  );
}

Applicazione con stili dinamici

.active {
  background: #4caf50;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
}

import { createSignal } from "solid-js";

function ToggleButton() {
  const [active, setActive] = createSignal(false);
  return (
    <button class="{active()"> setActive(!active())}
    >
      {active() ? "Attivo" : "Disattivo"}
    </button>
  );
}

Questo approccio ricorda alcune microinterazioni viste in design con CSS e JavaScript, ma sfrutta la reattività nativa di SolidJS.

Widget reattivo

import { createSignal } from "solid-js";

function Rating() {
  const [rating, setRating] = createSignal(0);

  return (

  );
}

Con poche righe di codice otteniamo un sistema simile a quello trattato in questa guida su rating con JavaScript e HTML, ma con una gestione dello stato più pulita e reattiva.

Conclusione e risorse utili

SolidJS rappresenta una delle alternative più interessanti nel panorama dei framework frontend moderni. La sua reattività fine-grained unita alle performance lo rendono adatto sia a piccoli progetti sperimentali che a grandi applicazioni enterprise. Per sviluppatori già esperti in librerie come React o Vue, l’apprendimento è rapido e l’impatto sulle performance si nota immediatamente.

Per approfondire, consulta la documentazione ufficiale di SolidJS o esplora altre guide su argomenti correlati come gestione degli eventi in JavaScript o sviluppo di widget interattivi con Web Components.

In sintesi: se cerchi massima dinamicità, componenti realmente reattivi e ottimizzazione delle performance in ambito frontend, SolidJS è una scelta da prendere seriamente in considerazione.