Ukratko

Najvažnije iz članka

  • SolidJS je frontend framework koji koristi kompajler i *fine-grained* reaktivnost temeljenu na Signalsima, eliminirajući virtualni DOM za iznimne performanse.
  • Komponente u SolidJS-u izvršavaju se samo jednom, a reaktivnost se postiže izravnim ažuriranjem DOM-a putem Signalsa, `createEffect` i `createMemo` primitiva.
  • Glavne prednosti uključuju vrhunske performanse, manji *bundle size* i poboljšano razvojno iskustvo (DX) bez potrebe za ručnim optimizacijama.
  • Učenje SolidJS-a zahtijeva prilagodbu mentalnog modela zbog drugačijeg pristupa reaktivnosti i životnom ciklusu komponenti u usporedbi s Reactom ili Vueom.
Sadržaj članka
  1. Što je SolidJS i zašto je drugačiji?
  2. Kompilacija umjesto runtime diffinga
  3. Koncept reaktivnosti: Signals
  4. createEffect i createMemo
  5. Komponente u SolidJS-u: Funkcije koje se pozivaju jednom
  6. Prednosti SolidJS-a s Signalsima
  7. Izazovi i razmatranja
  8. Kako započeti sa SolidJS-om?
  9. Zaključak

U posljednjih nekoliko godina, frontend ekosustav doživio je rapidnu evoluciju. Dok su okviri poput Reacta, Angulara i Vuea dominirali scenom, neprestano traženje optimalnih performansi, manje kompleksnosti i bolje DX (Developer Experience) dovelo je do pojave novih rješenja. Jedno od takvih rješenja koje privlači značajnu pažnju je SolidJS. SolidJS se pozicionira kao framework koji nudi reaktivnost na razini fine-grained detalja, inspiriran starijim, ali i dalje relevantnim pristupima kao što su Knockout.js i S.js, ali s modernim pristupom izgradnje komponenti i iskorištavanjem Web platforme. Ključna inovacija SolidJS-a leži u njegovom reaktivnom modelu temeljenom na Signalsima, koji mu omogućava postizanje impresivnih performansi bez virtualnog DOM-a i uz minimalan runtime overhead.

Što je SolidJS i zašto je drugačiji?

SolidJS je deklarativni JavaScript framework za izgradnju korisničkih sučelja. Na prvi pogled, sintaksa SolidJS komponenti može podsjećati na React, posebno zbog korištenja JSX-a (ili TSX-a) za definiranje strukture. Međutim, ispod površine, SolidJS funkcionira na temeljno drugačiji način. Dok React i slični okviri koriste virtualni DOM diffing algoritam za ažuriranje stvarnog DOM-a (što može biti skup proces), SolidJS izbjegava virtualni DOM u potpunosti.

Kompilacija umjesto runtime diffinga

Srž razlike leži u pristupu kompilaciji. SolidJS komponente se kompilira. To znači da se JSX kod ne interpretira u runtimeu za stvaranje virtualnog DOM stabla, već se prevodi direktno u imperativne DOM operacije koje se izvršavaju samo kada se podaci mijenjaju. Kada se stanje (signal) ažurira, SolidJS točno zna koje dijelove DOM-a treba ažurirati, i to radi direktno, bez potrebe za usporedbom cijelih stabala. Ovaj pristup osigurava surgical preciznost ažuriranja, što rezultira izuzetno brzim i efikasnim renderiranjem.

Koncept reaktivnosti: Signals

Centralni koncept SolidJS-a su Signals. Signal je u osnovi funkcija koja drži vrijednost i obavještava ovisne funkcije (tzv. computations ili effects) kada se ta vrijednost promijeni. SolidJS koristi fine-grained reaktivnost, što znači da prati promjene na pojedinačnim vrijednostima, a ne na cijelim objektima ili komponentama. Ovo omogućuje ažuriranje samo onih dijelova UI-ja koji su stvarno pogođeni promjenom stanja, što je ključno za njegove performanse.

Kako funkcioniraju Signals?

Signals se kreiraju pomoću createSignal funkcije. Ona vraća tuple koji sadrži funkciju za čitanje vrijednosti i funkciju za postavljanje nove vrijednosti.

import { createSignal } from "solid-js";

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

console.log(count()); // Čitanje vrijednosti: 0

setCount(5);
console.log(count()); // Nova vrijednost: 5

Kada koristite count() unutar neke druge funkcije (npr. unutar JSX-a ili createEffect-a), SolidJS automatski uspostavlja vezu. Kada se setCount pozove, SolidJS obavještava sve funkcije koje su čitale count() da se trebaju ponovno izvršiti.

createEffect i createMemo

Osim createSignal, SolidJS nudi još dva ključna primitiva za reaktivnost:

  • createEffect: Služi za pokretanje side effects kada se promijeni neka reaktivna vrijednost. To može biti ažuriranje DOM-a, pozivanje API-ja, logiranje ili bilo koja druga akcija koja ne rezultira direktno generiranjem UI-ja.

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

const [name, setName] = createSignal("Bajter");

createEffect(() => {
  document.title = `Pozdrav, ${name()}!`;
});

setName("Nova Bajtuska"); // document.title će se automatski promijeniti

  • createMemo: Koristi se za keširane računske vrijednosti. Kada se vrijednost koju createMemo ovisi promijeni, memoizirana funkcija će se ponovno izvršiti i izračunati novu vrijednost. Ako se ovisnosti ne promijene, createMemo će vratiti prethodno izračunatu vrijednost bez ponovnog izvršavanja funkcije. Ovo je ključno za optimizaciju performansi, pogotovo kod skupih izračuna.

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

const [firstName, setFirstName] = createSignal("Ivan");
const [lastName, setLastName] = createSignal("Horvat");

const fullName = createMemo(() => `${firstName()} ${lastName()}`);

console.log(fullName()); // "Ivan Horvat"

setFirstName("Petar");
console.log(fullName()); // "Petar Horvat" (re-evaluated)

Komponente u SolidJS-u: Funkcije koje se pozivaju jednom

Jedna od najvažnijih razlika između SolidJS-a i Reacta leži u načinu na koji se komponente izvršavaju. U Reactu, komponente su funkcije koje se ponovno izvršavaju pri svakom renderu (odnosno, kada se promijeni stanje ili props). U SolidJS-u, funkcija komponente se izvršava samo jednom – na početku njenog životnog ciklusa. To je ključno za razumijevanje njegovog reaktivnog modela.

Kada se SolidJS komponenta prvi put renderira, njena funkcija se izvršava i konstruiraju se DOM elementi. Sve reaktivne ovisnosti (poput createEffect ili createMemo poziva unutar komponente) uspostavljaju se tom prilikom. Nakon toga, funkcija komponente se više ne poziva. Umjesto toga, SolidJS se oslanja na fine-grained reaktivnost: samo će se specifični dijelovi DOM-a (ili efekti) ažurirati kada se signali na koje ovise promijene.

// MyCounter.jsx
import { createSignal } from "solid-js";

function MyCounter() {
  console.log("Komponenta MyCounter se izvršila!"); // Izvršit će se samo jednom
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <p>Broj: {count()}</p> {/* count() se pretplaćuje na signal */}
      <button => setCount(c => c + 1)}>Povećaj</button>
    </div>
  );
}

export default MyCounter;

Ovaj pristup eliminira potrebu za useMemo, useCallback i ostalim optimizacijama performansi koje su često potrebne u Reactu. U SolidJS-u, optimizacija je ugrađena u sam framework.

Prednosti SolidJS-a s Signalsima

  1. Izvanredne performanse: Bez virtualnog DOM-a i s fine-grained reaktivnošću, SolidJS redovito zauzima prvo mjesto na benchmark testovima (npr. JS Framework Benchmark) u pogledu brzine i memorije. Njegov runtime je izuzetno malen, što rezultira bržim učitavanjem aplikacija.
  2. Manji bundle size: Zbog efikasnog kompajlera i minimalističkog runtimea, SolidJS aplikacije imaju manji bundle size, što dodatno poboljšava performanse učitavanja.
  3. Bolji DX (Developer Experience): Iako zahtijeva malo prilagodbe za developere navikle na Reactov model, jednom kada se shvati koncept Signalsa i jedinstvenog izvršavanja komponenti, razvoj postaje intuitivniji. Nema potrebe za optimizacijskim hookovima, a reaktivnost je predvidljivija.
  4. Fleksibilnost: SolidJS ne diktira kako trebate upravljati globalnim stanjem. Možete koristiti Signals za lokalno stanje, ali i graditi robustna rješenja za globalno stanje koristeći iste primitive ili integrirati popularne state management biblioteke.
  5. Potpuno iskorištavanje platforme: SolidJS generira kod koji direktno manipulira DOM-om, čime maksimalno iskorištava mogućnosti Web platforme.

Izazovi i razmatranja

  1. Krivulja učenja: Za developere koji dolaze iz Reacta, Angulara ili Vuea, SolidJS-ov reaktivni model može biti početno zbunjujući. Koncept da se komponente izvršavaju samo jednom, a da se reaktivnost odvija unutar closuresa i effects, zahtijeva promjenu mentalnog modela. Razumijevanje kada se koristiti createSignal, createEffect i createMemo je ključno.
  2. Ekosustav: Iako SolidJS ekosustav brzo raste, još uvijek nije toliko zreo i velik kao kod Reacta ili Vuea. To znači da možda nećete pronaći rješenje za svaki problem "iz kutije" ili toliko bogat izbor komponentnih biblioteka.
  3. SSR/SSG: SolidJS podržava Server-Side Rendering (SSR) i Static Site Generation (SSG), ali implementacija može biti malo drugačija od onoga na što su neki developeri navikli. Ipak, prisutnost alata poput SolidStart (SolidJS framework za izgradnju kompletnih aplikacija) olakšava ove zadatke.

Kako započeti sa SolidJS-om?

Najjednostavniji način za početak je korištenje SolidStart-a, koji nudi kompletan scaffolding za aplikacije, uključujući routing, data fetching i podršku za SSR/SSG. Alternativno, možete početi s jednostavnim Vite projektom.

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

Ili za SolidStart:

npx degit solidjs/solidstart/with-ts my-solidstart-app
cd my-solidstart-app
npm install
npm run dev

Nakon toga, istražite službenu dokumentaciju koja je vrlo dobro napisana i pruža dubinski uvid u sve aspekte frameworka.

Zaključak

SolidJS sa svojim reaktivnim modelom temeljenim na Signalsima predstavlja impresivan korak naprijed u frontend razvoju. Njegova sposobnost da isporuči izuzetne performanse uz minimalan runtime i efikasan način ažuriranja DOM-a čini ga iznimno atraktivnom opcijom, posebno za aplikacije gdje su performanse kritične. Iako zahtijeva početnu prilagodbu mentalnog modela, dugoročne prednosti u vidu jednostavnijeg koda bez suvišnih optimizacija, bržeg izvršavanja i manjeg bundle sizea, čine ga vrijednim ulaganja vremena. Ako tražite moderni framework koji gura granice performansi i nudi jedinstven pristup reaktivnosti, SolidJS je definitivno vrijedan vaše pažnje i možda je upravo ono što tražite za svoj sljedeći projekt.

Izvori i dodatno čitanje

  1. SolidJS Official Documentation
  2. SolidJS: The Best There Is?
  3. A Fine-Grained Reactive Web Framework
  4. JavaScript Framework Benchmark
#Frontend#JavaScript Framework#Reaktivnost#Signals#SolidJS
B
Uredništvo portala

BAJT

Službeni autorski profil redakcije portala BAJT. Sadržaj priprema i provjerava uredništvo portala.