3.03.20229 min

Paulina GajewskaCopywriter

Svelte vs React: Zakończenie debaty

Poznaj 8 powodów, z których Svelte może okazać się poważnym konkurentem dla technologii takich jak React czy Angular.

Svelte vs React: Zakończenie debaty

Czy ty też nie potrafisz rozstrzygnąć tej debaty pomiędzy Svelte a React? Nie tylko Ty.

Wybór najlepszego narzędzia jest już dzisiaj nie lada wyzwaniem, zwłaszcza że co chwilę w Internecie pojawiają się wiele skrajnych głosów. Z każdej strony wyskakują nagłówki, takie jak:

"React jest już na wymarciu."

"Svelte umarł już na dobre, zanim jeszcze zdążył się rozwinąć."

A potem widzimy coś takiego:

"React kształtuje naszą przyszłość."

"Svelte jest przyszłością."

W tym artykule nie chodzi o to, aby opowiadać się za którąś ze stron. Zamiast tego wolałabym pokazać, w jakich sytuacjach te narzędzia mają zastosowanie i jakie okoliczności sprawiają, że błyszczą na salonach.

Pamiętaj jednak, że jak na razie nie ma takich uniwersalnych narzędzi, które rozwiązałyby każdy problem. Nie wybieraj więc pierwszej lepszej modnej technologii: wybierz tę, która rozwiąże najefektywniej Twój problem.


React

React, będący jedną z bardziej lubianych technologii w MPC, był już wielokrotnie omawiany. W pierwszej kolejności wyjaśniliśmy, czym jest React, dlaczego React to dobry wybór i czym się różni od React Native. Pozwólcie mi jednak na małe przypomnienie:

React to biblioteka JavaScriptu przeznaczona do frontend developmentu, a konkretnie do budowania UI złożonego z komponentów wielokrotnego użytku. React został stworzony przez Facebook (oryginalnie przez Jordana Walke’a) w 2011 roku na własny użytek i ta biblioteka jest przez nich utrzymywana do dziś.

Dwa lata później została udostępniona jako open-source i szybko zyskała na popularności. Jest głównie rozpoznawalna z tego, że jest łatwa do nauki, rozwija się w szybkim tempie i posiada ogromną społeczność programistów zawsze gotowych, by pomóc. Jedną z jej najbardziej znanych funkcji jest Virtual DOM, która zwiększa wydajność aplikacji Reacta.


Svelte

Co to jest Svelte?

Svelte to taki nowy dzieciak na podwórku. Został wydany w 2016 roku po przeanalizowaniu swoich poprzedników — szczególnie Reacta i Vue. Jego twórcą był Rich Harris i obecnie jest utrzymywany przez głównych członków Svelte. Korzystają z niego firmy, takie jak: The New York Times, Avast, Spotify, Semrush i Chess.

Na swojej oficjalnej stronie, Svelte jest opisany jako component framework, ale przypomina kompilator. Generuje możliwie jak najmniejszy kod JavaScriptu, aby aplikacje Svelte były proste i szybkie. Zapewnia również właściwą optymalizację.

Jeśli chodzi o popularność, to Svelte również ma się nieźle. W badaniu State of JS 2020, 86% deweloperów wyraziło zadowolenie z pracy ze Svelte. W nowszym badaniu przygotowanym przez Stack Overflow w 2021 r. Svelte został wybrany jako najbardziej lubiany framework przez 71,42% respondentów — wyprzedzając tym samym Reacta (69,28%) i Vue (64,41%). Jednak ogólnie rzecz biorąc Svelte jest używany rzadziej niż inne frameworki, więc należy mieć to na uwadze, patrząc na powyższe liczby.


Dlaczego powstał?

Rich Harris jest twórcą Ractive, biblioteki UI opartej na szablonach, stworzonej z myślą o wysoce interaktywnych aplikacjach. Została ona pierwotnie stworzona dla The Guardian.

Harris nie był jednak do końca zadowolony z tego produktu. Nie rozwiązał jednego, kluczowego problemu — wysokich kosztów wysyłki Javascriptu, co silnie oddziaływało na użytkowników mobilnych. Aby sobie z tym poradzić, Harris wpadł na pomysł kompilatora podobnego do frameworka, który zmniejsza nadmiarowy kod wymagany przez aplikacje Svelte.


React i Svelte — Porównanie


1. Svelte jest bardziej wydajny

Pod tym względem Svelte góruje nie tylko nad Reactem, ale także nad Angularem i Vue. We wszystkich testach — w tym test prędkości, test uruchamiania i test pamięci — Svelte jest zdecydowanym zwycięzcą. Skąd bierze się ta oszałamiająca wydajność?

Tym, co daje Svelte tak znaczącą przewagę nad konkurencją jest fakt, że tłumaczy on kod aplikacji w czasie kompilacji, a nie w runtime’ie. Dodatkowo, ponieważ HTML, CSS i JavaScript są kompilowane do małych, wysoce zoptymalizowanych pakietów, aplikacja Svelte otrzymuje tylko logikę biznesową. Inne frameworki są zmuszone do wysyłania kodu frameworku z narzutem i zmuszają przeglądarkę do wykonywania ciężkiej pracy, co również wszystko spowalnia.

O dziwo tym, co poprawia wydajność, jest korzystanie z Virtual DOM.


2. Svelte nie używa virtual DOM diffing

Virtual DOM to karta przetargowa Reacta i jedna z jego najważniejszych funkcji, odpowiedzialna za poprawę wydajności. Było to tak dobre, że mocno zainspirowało Vue.

Dlatego wyrzucenie tej funkcji ze Svelte było bardzo odważnym posunięciem.

Wyjaśnijmy jednak najpierw, czym jest Virtual DOM.

Jest to wirtualna reprezentacja Document Object Model, która służy jako tymczasowa pamięć dla wszystkich zmian wprowadzonych do UI.

Z prawdziwym DOM, każda zmiana wywołałaby aktualizację, spowalniając aplikacje internetowe. Virtual DOM, z drugiej jednak strony, opóźnia ten proces do czasu, aż znajdzie najbardziej efektywny sposób aktualizacji i renderowania rzeczywistego DOM — co jest również nazywane procesem rekoncyliacji lub diffingiem.

Svelte nie zgadza się, że tylko z Virtual DOM można osiągnąć świetną wydajność i udało mu się to udowodnić. Diffing, choć może być skuteczny, wymaga dalszego nakładu pracy. Svelte postanowił więc całkowicie pominąć tę kwestię.

Kiedy DOM jest uaktualniany za pomocą Svelte? Na przykład za każdym razem, gdy stan aplikacji internetowej zmienia się z powodu danych wprowadzonych przez użytkownika. Jest to zautomatyzowany proces, który sprawia, że Svelte jest naprawdę reaktywny.


3. Svelte jest bardziej reaktywny... a może nie?

React nie jest w pełni reaktywny, choć stara się taki być. Z pewnością jest deklaratywny, co oznacza, że zamiast opisywania każdego kroku, potrzebnego do osiągnięcia określonego rezultatu, programiści muszą jedynie opisać wynik. Resztą zajmuje się React.

Jeśli jednak nastąpią jakieś zmiany wartości, nie zostaną one automatycznie odzwierciedlone w DOM. React aktualizuje komponenty zgodnie z harmonogramem. Bez użycia setState lub hooków, React nie będzie... no cóż, reagował poprawnie.

Rzecz w tym, że Svelte robi coś podobnego. Aktualizuje on DOM, gdy zmieni się etap komponentu, ale tylko wtedy, gdy jest to wywołane przez przypisania. Do tego momentu wszystkie zmiany są łączone. Brzmi znajomo?

Należy też zastanowić się nad reaktywnymi deklaracjami i zmiennymi. Deklaracje reaktywne są odpowiedzialne za automatyczne ponowne przeliczanie logiki podczas każdej aktualizacji. A zmienne reaktywne, raz zadeklarowane i zmienione, wyzwalają inne zmienne do zmiany, jeśli są powiązane. Jest to śmiesznie proste do zrobienia — wystarczy dodać znak dolara.

Tak więc czy Svelte jest tak naprawdę reaktywny? Prawdopodobnie tak samo, jak bezserwerowy nie posiada żadnych serwerów. W porównaniu do Reacta reaktywność jest osiągana łatwiej, ale w obu technologiach można wykonać podobne czynności.


4. Komponenty Svelte są traktowane nieco inaczej

Sposób, w jaki Svelte używa komponentów (tworzonych w Svelte poprzez tworzenie plików .svelte) również różni się od Reacta.

Przede wszystkim nie musisz nic robić, aby wyeksportować komponenty — Svelte eksportuje je sam, automatycznie. W przypadku Reacta trzeba to zrobić ręcznie.

Svelte oferuje również elastyczne style, co jest możliwe dzięki temu, że komponenty są skalowane w tagach style. Nie trzeba się męczyć z pisaniem unikalnych klas, ponieważ Svelte generuje je podczas kroku kompilacji i tym samym nie musisz się już martwić o konflikty.

Są też pewne podobieństwa — na przykład przekazywanie danych do komponentów dziedziczących i emitowanie danych z powrotem do komponentów nadrzędnych może wydać się znajome.


5. Svelte nie potrzebuje tak wielu narzędzi zewnętrznych

React, będąc lżejszą biblioteką skupiającą się tylko na warstwie widoku, wymaga narzędzi zewnętrznych do takich rzeczy jak zarządzanie stanem czy tworzenie niesamowitych animacji. I nie jest to koniecznie coś złego — dla małych projektów z niewielką ilością funkcji, może to być wręcz idealne rozwiązanie.

Mimo to warto tutaj zaznaczyć, że Svelte posiada wbudowane efekty, przejścia i animacje, które nie zwiększą rozmiaru Twojej aplikacji — co jest bezpośrednim efektem kompilacji kodu. Svelte ładuje tylko potrzebne elementy.

Svelte posiada również kilka sposobów radzenia sobie z zarządzaniem stanem. Możesz użyć:

  • Context API: kiedy twoje komponenty muszą się komunikować i przekazywać dane,
  • Svelte Stores: kiedy twoje komponenty muszą się komunikować bez przekazywania zbyt dużej ilości danych,
  • Writable Stores: kiedy chcesz, aby twoje obiekty były dostępne dla różnych komponentów,
  • Readable Stores: kiedy nie chcesz, aby użytkownik manipulował danymi.


6. Svelte jest lżejszy

Skompresowana wersja Reacta to 42.2KB (w tym ReactDOM).

Skompresowana wersja Svelte to 1.6KB.

Pod tym względem Svelte jest niezaprzeczalnym zwycięzcą. Ze względu na swój rozmiar, aplikacja internetowa ładuje się szybciej, responsywność jest bez zarzutu, a koszty przepustowości są niższe.


7. Svelte oferuje szybsze tworzenie stron internetowych

Tempo rozwoju Reacta jest szybkie. Naprawdę szybkie. Tak szybkie, że czasami trudno za nim nadążyć, co często jest wymieniane jako jedna z wad.

Proces rozwoju Svelte jest jeszcze szybszy. Jak to możliwe?

Generowany kod jest bardziej czytelny, prostszy i znacznie krótszy niż kod Reacta. Możesz osiągnąć podobne wyniki przy mniejszej ilości kodu, nie martwiąc się o gorszą jakość. To z kolei oznacza, że projekt jest łatwy do utrzymania i jeszcze łatwiejszy do debugowania. A jeśli do projektu Svelte dołączą nowi członkowie zespołu, będą mogli szybko zrozumieć, co się dzieje i natychmiast rozpocząć pracę.


8. Svelte jest (nieco) łatwiejszy do nauki

Krzywa uczenia się obu technologii jest uważana za dość łatwą. Obie wymagają znajomości HTML, CSS i JavaScriptu. Jednak Svelte po raz kolejny udało się prześcignąć Reacta.

W React jedną z przeszkód jest JSX, składnia podobna do XML w JavaScript, przeznaczona do budowania UI. Svelte używa łatwiejszej składni i ma swój własny język szablonów, który jest łatwy do opanowania.


Czy Svelte jest więc lepszy od Reacta?

Może się wydawać, że Svelte jest cudowny — jest prosty i sprawia, że tworzenie aplikacji to bułka z masłem — ale wciąż pozostaje w tyle za Reactem pod względem popularności i użycia. Największe wady Svelte to:


1. Svelte nie posiada tak ogromnej społeczności

Ponieważ React jest tak popularny, czego dowodem jest napływ aplikacji Reacta, posiada on też gigantyczną społeczność zapalonych programistów, którzy tworzą wszelkiego rodzaju tutoriale i przewodniki (często za darmo) i są łatwo dostępni, kiedy trzeba zrobić jakąś burzę mózgów. Istnieje również wiele narzędzi ułatwiających proces tworzenia kodu, takich jak React Developer Tools lub Redux DevTools, które idą w parze z Reduxem.

Svelte nie może liczyć na taki sam poziom wsparcia. Szczególnie dokuczliwy jest brak wtyczek, integracji i wsparcia dla IDE. Istnieje bardzo niewiele utartych najlepszych praktyk, które mogłyby służyć jako przewodnik, a jeśli napotkasz jakiś problem, to mała baza użytkowników może nie być w stanie Ci pomóc.


2. Svelte nie jest wspierany przez firmę

Nie wygląda Ci to na coś poważnego? Może tak być.

React jest wspierany i utrzymywany przez Facebooka, który wykorzystuje go do własnych celów. Mają niezbędne fundusze, aby stale nad nim pracować. Nie ma także obaw, że Facebook przerzuci się nagle na Angulara, który jest wspierany przez Google. To wszystko sprawia, że React jeszcze długo nie wyjdzie z użycia.

Przyszłość Svelte nie prezentuje się jednak tak wyraźnie. Jest on utrzymywany przez społeczność, ale kto wie, jak długo potrwa jeszcze ich entuzjazm. Możliwe, że Svelte zainspiruje inną nową technologię, która zajmie jego miejsce.


3. Svelte nie jest powszechnie używany w sieci na dużą skalę

Dopiero niedawno Svelte dojrzał na tyle, aby zostać zastosowanym w aplikacjach na skalę przedsiębiorstwa.

Oznacza to, że nie ma zbyt wielu przypadków użycia Svelte w naturze. Dopiero niedawno Radio France dodało Svelte do swojego stosu technologicznego, tak jak Scott Tolinski użył go do swojej platformy Level Up Tutorials. Jak na razie najwięksi gracze preferują inne technologie, więc Svelte musi jeszcze chwilę poczekać, zostać sprawdzony w boju. Jego przyszłość, choć pełna nadziei, pozostaje nikomu nieznana.


Wnioski

Svelte oferuje bardzo dużo. Zachwalany za swój rozmiar, wysoce wydajny kod imperatywny, a także oszałamiającą wydajność Svelte może okazać się poważnym konkurentem dla technologii takich jak React czy Angular.

Niestety Svelte ma jeszcze przed sobą długą drogę. Jak na razie najlepiej nadaje się do budowania jednostronicowych aplikacji dla osób o słabszych łączach internetowych lub prostych stron osobistych, takich jak blogi czy portfolia. Z pewnością nie zastąpi innych frameworków w stosie technologicznym większych firm, a jeśli chodzi o programistów Svelte, to jest na nich bardzo małe zapotrzebowanie.

Z racji swoich wszystkich zalet, czas Svelte zdaje się ma jeszcze nadejść. React, miej się na baczności! Ale póki co nie martw się na zapas, korona zostaje dalej na swoim miejscu.


Kluczowe wnioski


Oryginał tekstu w języku angielskim możesz przeczytać tutaj.

<p>Loading...</p>