React VS Svelte

React VS Svelte

Okršaj JavaScript biblioteka

U svijetu JavaScript biblioteka, to jest na teritoriju u kojem zadnjih godina vlada React, izgleda da se konačno pojavio prilično „neugodan“ izazivač s tendencijom zauzimanja postojećeg teritorija. Naziv mu je Svelte, a u ovom tekstu probat ćemo napisati poneku rečenicu o tijeku i mogućim raspletima ove uzbudljive bitke.
U slučaju da je ovo prvi put da se susrećete s nekim ili s oba spomenuta alata, slijedi osnovni uvod o tome o čemu je zapravo riječ. Kasnije ćemo se posvetiti najvažnijim razlikama koje bi mogle dovesti do pobjede jedne ili druge strane.

Kako drugačije napisati uvodne rečenice u trenucima globalne krize u kojoj stalno čitamo slične izraze?

1. Sličnosti

U oba slučaja riječ je o posebnim JavaScript bibliotekama prije svega namijenjenih razvoju korisničkog sučelja web aplikacija bez obzira na stupanj njihove složenosti. Što ne znači da se ne mogu koristiti i za neku drugu namjenu.

React je dijete Facebooka (ili ako vam je draži novi naziv kompanije – to je sadašnji Meta). U razvojnim pogonima prva se verzija biblioteke pojavila sad već prilično davne 2011. godine kao rezultat rada vlastitog softverskog stručnjaka (Jordan Walke). Dvije godine kasnije biblioteka je postala javno dostupna i drugim programerima, nakon čega počinje njezino intenzivno širenje web svijetom. Danas u svojim rješenjima React, osim matičnog poduzeća, koriste poznate kompanije kao što su: Netflix, Uber, Yahoo, Airbnb, Atlassian, Dropbox itd.

Svelte na prvi pogled predstavlja vrlo sličan uradak Richa Harrisa, ali se  pojavio nekoliko godina kasnije (prva verzija 2016. godine). Od samog početka je u javnom vlasništvu, što znači da iz njega ne stoji neka velika kompanija, kao što je Meta. Popis postojećih korisnika je trenutno nešto manje impozantan, premda se i tu mogu pronaći vrlo poznata imena. Na primjer: The New York Times, Avast, Philips, Decathlon, itd.

Iako se obje biblioteke za izradu vlastitih rješenja mogu koristiti bez dodatnih biblioteka, React se vrlo često koristi u kombinaciji s vrlo popularnom JavaScript bibliotekom/frameworkom Node.js (pogotovo na strani servera). Slična biblioteka namijenjena za korištenje na serveru za Svelte naziva se SvelteKit. U suradnji s poduzećem Vertel spomenutu serversku komponentu razvija isti autor kao i osnovnu biblioteku Svelte (Rich Harris). Naravno u ovom trenutku je Node.js mnogo popularniji među programerima nego Sveltekit.

 

reactVsvelteNodeReq

Biblioteka Node.JS: Preduvjet za korištenje obje biblioteke, iako se React teoretski može koristiti i bez nje

 

Još jedna sličnost prisutna kod obje biblioteke je mogućnost interaktivnog izvođenja, dakle bez potrebe za početnom instalacijom na vlastito računalo. To je odlično rješenje za upoznavanje s alatom i učenje prvih koraka u programiranju. Interaktivno okruženje za React dostupno je na više web adresa, kao što je na primjer https://codepen.io/pen?&editors=0010&layout=left.
Za Svelte je nešto slično dostupno na adresi https://svelte.dev/examples/hello-world.
Naravno, za ozbiljnije korištenje potrebno je instalirati oba paketa na razvojno računalo.

 

2. Razlike u programskom kodu

Budući da se obje biblioteke zasnivaju na istom programskom jeziku JavaScript, sasvim očekivano mora postojati dosta velika sličnost kod pisanja programskog koda. Kao i uvijek, najjednostavnije je to demonstrirati na primjerima. Evo jednog vrlo jednostavnog primjera napisanog pomoću obje biblioteke (izvor: https://blog.logrocket.com/).

 

reactVsvelteInteractive

Interaktivni React se može isprobavati izravno na web adresama codepen.io, codesandbox.io ili stackblitz.com.


React kod:

import React, { useState } from ‹react›;

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }
  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type=»number» value={a} on-Change={handleChangeA}/>
      <input type=»number» value={b} on-Change={handleChangeB}/>
      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

 

Svelte kod:

<script>
  let a = 1;
  let b = 2;
</script>

<input type=»number» bind:value={a}>
<input type=»number» bind:value={b}>

<p>{a} + {b} = {a + b}</p>

 

Iako je u ovom slučaju riječ o zbilja vrlo jednostavnom primjeru, već je i tu vidljivo da je Svelte kod dosta kraći te jednostavniji za pisanje. Nema potrebe za pripremom posebnih funkcija, izvozom vrijednosti i drugim sličnim „komplikacijama“. Sve je nekako jednostavnije, kraće, a samim tim i razumljivije. Također, dio mogućnosti potrebnih za pripremu modernog korisničkog sučelja (npr. različiti grafički efekti i animacija) ugrađen je izravno u Svelte pa nema potrebe za uključivanjem dodatnih biblioteka, kao što je to slučaj kod Reacta.

 

reactVsvelteInstall

Instalacija React biblioteke: Primjer instalacije na vlastito Windows računalo.

 

Evo još jednog Svelte primjera koji demonstrira kako bi mogao izgledati programski kod za izmjenu slika na vlastitoj stranici. Ponovo, prilično kratko i jednostavno, zar ne?

<script>
  import { fade, blur, fly, slide, scale } from «svelte/transition»;
  import { quintOut } from «svelte/easing»;

  let books = [
    //array of links to books
  ];

  setInterval(() => {
   //logic goes here
  }, 1000);
</script>
<section style=»display:flex;justify-content:center»>
  {#each books as book, i}
    {#if activeIndex === i}
      <img
        transition:scale={{ delay: 250, duration: 300, easing: quintOut }}
        style=»position:absolute»
        src={book}
        width=»500»
        height=»300»
        alt=»»
      />
    {/if}
  {/each}
</section>

 

reactVsvelteExamples

Velik broj primjera dostupan je na web adresi: https//svelte.dev/examples.

 

3. I razlike „ispod haube“

Na ovom mjestu će dio čitatelja (s iskustvom korištenja nekih drugih programskih jezika) sasvim sigurno primijetiti kako jednostavnost pisanja programskog koda nije jedina karakteristika zbog koje će se neki alat biti izabran (ili odbačen) za korištenje u praksi. I potpuno su pravu. Treba li bolji argument za prethodnu tvrdnju od toga da se uz mnogo jednostavnije programiranje u Pythonu u brojnim situacijama i dalje koristi C ili C++ s brojnim nepreglednim i teško razumljivim pointerima, samo zato da bi se postigla veća brzina izvođenja koda?

 

reactVsvelteReact

 

Pogledajmo zato kako u tim „dodatnim detaljima“ stoji Svelte u odnosu na React. Tu moramo prvo malo zaviriti pod haubu (kako bi se to slikovito reklo u automehaničarskom žargonu). A upravo se tu nalazi ključna razlika Sveltea u odnosu na React i druge slične pakete (Vue i ostali).

Da bi se JavaScript kod povezao s HTML elementima koji se nalaze na web stranici, koristi se DOM (Document Object Model). Čisto kao mali podsjetnik – osnovni sastavni dijelovi HTML dokumenata su elementi <head> i <body>, a svaki od njih može sadržavati čitav niz dodatnih podelemenata kao što su <h1>, <h2>, <p>, <table>, <tr>, <td> i ostali. Da bi se pomoću JavaScript koda moglo pristupiti točno određenom elementu u okviru HTML dokumenta, potrebno je prvo napraviti analizu i interpretaciju svih elemenata. Očito je da kod vrlo složenih dokumenata to nikako ne može biti baš superbrz postupak.

 

reactVsvelteSvelte

Izvođenje Svelte aplikacije: Primjer izvođenja u lokalnom pregledniku.

 

Zato u igru ulazi VDOM (Virtual DOM) koji, kao što mu i samo ime govori, predstavlja virtualnu reprezentaciju standardnog DOM modela u memoriji. Korištenjem VDOM-a mogu se primijeniti različite optimizacijske tehnike kod obnavljanja sadržaja dokumenta.

Umjesto da se odmah izvodi svaka zahtijevana promjena u JavaScriptu kodu, proces obnavljanja sadržaja izvodi se tek nakon pronalaženja optimalnog načina za konkretnu situaciju.

 

reactVsvelteSvelteInst

Instalacija Svelte biblioteke: Primjer instalacije na vlastito Windows računalo.

 

Naravno, tu optimizaciju ne mora navoditi programer u svojem JavaScript kodu, nego se ona provodi automatski od strane korištene biblioteke. To je način na koji djeluje React, ali i druge slične biblioteke.

Svelte ne koristi VDOM, nego se više ponaša kao program prevoditelj (compiler) kod drugih programskih jezika. Brojni optimizacijski detalji pripremaju se „unaprijed“ (a ne tek za vrijeme korištenja HTML dokumenta), čime u brzini izvođenja uspijevaju nadmašiti rješenja zasnovana na VDOM tehnologiji.
Da bi čitava stvar bila još ljepša, takav „prevedeni“ Svelte kod ujedno je prilično kraći nego istovrsno React rješenje. A to opet između ostalog pozitivno utječe na brzinu njegovog učitavanja i izvođenja.

Razlike u brzini i veličini koda najlakše je demonstrirati na konkretno provedenim mjerenjima između različitih JavaScript biblioteka. Primjer takvih mjerenja dostupan je na web adresi: https://j-avascript.plainenglish.io/angular-vs-vue-js-vs-react-vs-svelte-in-2022-what-do-the-numbers-say-7ae38a549d8d.
Naravno, uz ovakva „revolucionarno drugačija“ rješenja kao što je Svelte, obično se pojavljuju i problemi, pa u tome ni Svelte nije izuzetak. Jedan od glavnih problema unaprijed pripremljenog koda za izvođenje najčešće su različite „mutirajuće“ tehnike u pisanju programskog koda, koje neki programeri možda koriste u kombinaciji s Reactom i drugim sličnim bibliotekama. Ali to nije nešto što se ne bi moglo izbjeći uz malo samodiscipline u pisanju koda.

 

A što je zaključak?

Ovdje je situacija zapravo vrlo slična situaciji kakva se vrlo često susreće na području baza podataka. Iako su brojnim slučajevima mnogo bolji izbor za rješavanje problema baze dokumenata ili graf baze, zbog velikih ulaganja u postojeće sustave (ali često i čiste inercije) i dalje se u praksi većinom koriste relacijske baze podataka.

Trenutno je prilično slična situacija i sa Svelte bibliotekom. Znatno veći broj programera širom svijeta bolje poznaje React (i druge slične alternative) zbog čega je jednostavnije pronaći dodatne članove razvojnog tima, ako vam zatrebaju. Pogotovo ako su postojeća rješenja već napravljena na takav način pa ih samo treba nadograđivati.

Međutim, nema nikakvog objektivnog razloga da kao neki startup koji počinje ispočetka ne izaberete Svelte kao svoj osnovni razvojni alat. Nećete pogriješiti.

Ocijeni sadržaj
(0 glasova)

// možda će vas zanimati

Newsletter prijava


Kako izgleda naš posljednji newsletter pogledajte na ovom linku.

Copyright © by: VIDI-TO d.o.o. Sva prava pridržana.