Porównanie wydajności: SolidJS vs Svelte

Framework webowy to zestaw bibliotek, narzędzi i konwencji, które pozwalają programistom szybko i łatwo budować aplikacje webowe, w tym usługi webowe, zasoby i webowe API. Frameworki webowe dają programistom front-endu wspólną strukturę, dzięki której szybciej budują aplikacje webowe, wykorzystując gotowy kod zamiast pisać go od zera.

Dwa popularne frameworki webowe to SolidJS i Svelte. Oba oferują szereg funkcji, które czynią tworzenie stron prostszym, szybszym i wydajniejszym. Choć wielu programistów wybiera je za skalowalność i elastyczność, mają pewne różnice, które je od siebie odróżniają.

Rozumiejąc te różnice, menedżerowie lepiej ocenią kierunek wymagań technicznych projektu i sprawniej podejmą decyzje przy zatrudnianiu specjalistów IT.

Ten artykuł ma pomóc menedżerom zrozumieć różne aspekty wydajności SolidJS i Svelte, żeby z przekonaniem wybrali właściwą platformę i wiedzieli, jak zatrudnić odpowiednich specjalistów IT do optymalizacji lub budowy aplikacji webowych.

Przegląd frameworków: SolidJS vs Svelte

SolidJS i Svelte to reaktywne frameworki webowe do interfejsów, które używają kompilatora do zamiany deklaratywnego kodu na zoptymalizowany i wydajny nowoczesny JavaScript. Mówiąc prościej, biorą kod napisany przez programistów i zamieniają go w coś, co da się wyświetlić na stronie albo na froncie aplikacji.

Choć SolidJS i Svelte pomagają programistom osiągnąć ten sam efekt, wyraźnie różni je sposób działania prowadzący do celu. Łatwym sposobem na zrozumienie głównej różnicy między Svelte a SolidJS jest porównanie tych frameworków do gotowania tradycyjnego makaronu i zupek błyskawicznych. 

SolidJS: „tradycyjny makaron” dla kompozycyjności i kontroli

SolidJS jest jak tradycyjne gotowanie makaronu, w którym kucharz ma większą kontrolę nad tym, jakie składniki dodać - albo pominąć - żeby stworzyć wymarzone danie.

SolidJS skupia się na kompozycyjności komponentów, dając programistom elastyczne podejście do budowania funkcji szytych na miarę. Ale SolidJS przykłada też ogromną wagę do wydajnej reaktywności interfejsów, co widać w tym, jak konsekwentnie wygrywa uznane benchmarki szybkości UI i zużycia pamięci. 

Skoro funkcjonalność jest rozbita na drobne części, programiści mogą wybierać komponenty i składać z nich rozwiązania do swoich zadań. Dzięki temu unikają przeinżynierowania i budują aplikacje z mniejszą ilością kodu.

Svelte: „zupka błyskawiczna” dla płynnego Developer Experience

Svelte jest z kolei jak zupka błyskawiczna, w której wszystkie składniki i smaki są z góry ustalone. Wystarczy wybrać saszetkę smakową i postępować zgodnie z instrukcją. 

Główne podejście Svelte to dostarczenie frameworka z wbudowaną funkcjonalnością na tyle bogatą, żeby praca programisty była płynna. Sam reklamuje się jako radykalnie nowe podejście do budowania angażujących i dynamicznych interfejsów.

To podejście „z bateriami w zestawie”, skupione na poprawie Developer Experience (DX), zdobyło serca wielu programistów. W tym badaniu Stack Overflow z 2022 roku Svelte zostało wybrane drugim najbardziej lubianym frameworkiem frontendowym, zaraz po Phoenixie.

Frameworki opinionated i non-opinionated

Mówiąc bardziej technicznie, to podejście „tradycyjne” kontra „błyskawiczne” opisuje się jako non-opinionated albo opinionated. Frameworki webowe mogą leżeć w dowolnym miejscu tego spektrum. 

SolidJS, który porównujemy do tradycyjnego gotowania makaronu, jest bardziej non-opinionated i działa podobnie do Reacta. Oznacza to, że SolidJS:

• daje klocki do zaprojektowania własnej architektury i struktury
• jest bardziej elastyczny i mniej skrępowany ograniczeniami frameworka
• ma mniejszy i lżejszy ślad, bo zawiera tylko podstawowe pakiety
• wymaga wysokich umiejętności
• jest idealny dla programistów, którzy chcą mieć większą kontrolę nad kodem i budować aplikacje w sposób sensowny dla ich konkretnego przypadku

Svelte, który porównujemy do zupek błyskawicznych, jest bardziej opinionated. Oznacza to, że Svelte:

• daje dużo wbudowanej struktury
• zawiera funkcje dostępne od razu po instalacji
• ma dobre praktyki zdefiniowane z góry i zwykle sprawdzone w boju
• daje programistom mniej kontroli, bo narzuca swoje „opinie”
• jest idealny dla programistów, którzy dopiero zaczynają z tworzeniem stron albo chcą budować aplikacje szybko.

Krzywa uczenia się i skalowanie

Jako framework non-opinionated SolidJS bywa trudniejszy do nauki dla nowych programistów, bo daje mniej struktury. Najlepiej sprawdza się w organizacjach, które chcąc korzystać z SolidJS, mogą zatrudnić programistów front-endu o solidnych umiejętnościach inżynierskich.

Svelte ma dużo łagodniejszą krzywą uczenia się, bo jest frameworkiem opinionated z „happy path” - ścieżką zaprojektowaną przez twórców frameworka, żeby nauka i praca ze Svelte były łatwiejsze i szybsze.

Wybierając między tymi frameworkami, warto też wziąć pod uwagę, o ile łatwiej skalować SolidJS niż Svelte. Wynika to z tego, że Svelte rośnie w złożoność przy bardziej całościowych aplikacjach. 

Firmy, które chcą oferować złożone aplikacje webowe albo szybko skalować, powinny rozważyć inwestycję w bardziej doświadczony zespół IT, biegły w obsłudze frameworków non-opinionated, takich jak SolidJS.

Społeczność i ekosystem

Kolejnym ważnym czynnikiem przy wyborze między frameworkami opinionated i non-opinionated, takimi jak SolidJS i Svelte, jest społeczność i ekosystem.

Dostęp do dużej społeczności programistów pomaga rozwiązywać problemy i odpowiadać na pytania. Będziesz mieć też dostęp do wielu zewnętrznych bibliotek i narzędzi, które przyspieszą budowę aplikacji webowej.

Przy mniej popularnym frameworku trudniej o pomoc, gdy jej potrzebujesz. Dostępnych bibliotek i narzędzi zewnętrznych też może być mniej, przez co będziesz bardziej zależny od umiejętności swoich programistów front-endu.

Spośród SolidJS i Svelte to Svelte ma większą społeczność. To jednak nie powinno Cię zniechęcać do SolidJS. Svelte ma po prostu przewagę startu jako dojrzalsza społeczność z większą liczbą pobrań w NPM. Warto pamiętać, że ekosystemy i popularność obu frameworków rosną.

Skoro omówiliśmy już te wszystkie różnice, przyjrzyjmy się technicznej wydajności SolidJS i Svelte.

Wydajność po stronie klienta i serwera

Na sukces aplikacji webowej czy strony, która utrzymuje zadowolenie klientów, składa się wiele czynników. Dwa kluczowe to wydajność po stronie klienta i po stronie serwera. 

1. Strona klienta to urządzenia użytkowników końcowych, takie jak smartfony i laptopy, z których korzysta się z aplikacji webowej lub strony.
   
   Wydajność po stronie klienta to sposób, w jaki aplikacja webowa lub strona działa na urządzeniu użytkownika końcowego. Optymalna wydajność jest kluczowa, żeby zapewnić płynne doświadczenie: szybkie ładowanie, stabilność i poprawne formatowanie.
   
   
2. Strona serwera to wszystkie procesy na serwerze hostującym aplikację webową lub stronę.
   
   Wydajność po stronie serwera - czy to własnego, czy u zewnętrznego dostawcy chmury - musi być optymalnie utrzymywana, żeby przetwarzać dane, dostarczać je i szybko odpowiadać na żądania użytkowników.

Porównując wydajność po stronie klienta i serwera dla SolidJS i Svelte, ten pierwszy wyraźnie wygrywa w obu kategoriach. 

Oto porównanie kluczowych benchmarków wydajności po stronie klienta i serwera dla SolidJS vs Svelte, w podsumowaniu z raportu Ryana Carniato, twórcy SolidJS:

Z tej tabeli widać, że SolidJS wyprzedza Svelte w niemal każdym benchmarku wydajności o co najmniej 19%, a nawet o 60%. Nic dziwnego, że Carniato nazywa swoje dzieło „Teslą wśród frameworków UI dla JavaScriptu”. 

Rozmiar bundle'a i skalowalność

Rozmiar bundle'a to łączny rozmiar wszystkich zasobów użytych w projekcie, w tym nowoczesnego JavaScriptu, CSS-a, obrazów i innych. Odchudzając bundle, programiści zmniejszają obciążenie procesora i pamięci po stronie klienta i serwera, żeby osiągnąć:

• szybsze ładowanie
• niższy współczynnik odrzuceń
• lepsze doświadczenie użytkownika
• wyższą satysfakcję klientów 
• lepsze pozycje w SEO

Dzięki tym czynnikom programistom front-endu łatwiej budować skalowalne aplikacje webowe, które wytrzymają jednoczesne żądania klientów i obsłużą rosnącą liczbę żądań na minutę (RPM). 

Dobra wiadomość jest taka, że zarówno SolidJS, jak i Svelte uchodzą za jedne z najlepszych frameworków webowych, jeśli chodzi o minimalizowanie rozmiaru bundle'a i obsługę dużych RPM.

Svelte

1. Bundle Svelte jest mniejszy niż w większości frameworków, bo nie ma zależności i nie używa wirtualnego DOM-u ani bibliotek uruchomieniowych.
2. Zamiast tego jego „magia” polega na tym, że kompilator zbiera komponenty w mały, mocno zoptymalizowany kod JavaScript, który aktualizuje prawdziwy DOM bezpośrednio.
3. Efektem jest czystszy, prostszy i mniejszy kod.

SolidJS

1. Kompilator Solida działa inaczej. Pracuje bezpośrednio w JavaScripcie, a jego kompilator zamienia JSX (Javascript Syntax Extensions) w operacje na DOM.
2. Skupienie na wydajności i pisaniu mniejszej ilości kodu ma jednak swoją cenę: SolidJS gorzej redukuje rozmiar bundle'a, co daje Svelte przewagę na tym polu.
3. Sam reconciler list w Solidzie dokłada +3 kB do zminifikowanego bundle'a, nie licząc dodatkowej wagi ekspresyjnej metody setState i rdzenia zarządzania zmianami. Dla porównania cały runtime Svelte waży mniej niż suma tych trzech elementów.

Trzeba jednak dodać, że SolidJS wygrywa ze Svelte w minimalizowaniu rozmiaru bundle'a w aplikacjach webowych mających ponad 20 komponentów. Jak wyjaśnia Carniato, wynika to z odmiennego sposobu działania obu frameworków. Ponieważ  Svelte rośnie w złożoność przy bardziej całościowych aplikacjach, gorzej redukuje rozmiar bundle'a.

Choć więc Svelte wygrywa w cuglach w redukcji rozmiaru bundle'a, SolidJS jest lepiej przygotowany do zastosowań wymagających więcej niż 20 komponentów.

Kompilatory

„Magia” obu frameworków tkwi w ich kompilatorach. Przyjrzyjmy się głębiej porównaniu kompilatorów SolidJS i Svelte. 

Zastosowania

Znasz już ogólne i techniczne różnice między SolidJS a Svelte. Kolejnym krokiem jest zrozumienie, który z nich pasuje do różnych zastosowań i jak go wykorzystać w udanym tworzeniu front-endu i projektowaniu stron. 

Dobra zasada jest taka: wybierz SolidJS do budowy wydajnych, skalowalnych i złożonych aplikacji wymagających dużej personalizacji. Svelte jest z kolei idealny do szybkiego budowania aplikacji lub stron nastawionych na media, które nie potrzebują wysokiego RPM towarzyszącego skalowaniu złożonych aplikacji.

Podsumowanie

SolidJS to framework non-opinionated - potężny, elastyczny i odpowiedni do skalowania złożonych aplikacji. Ma jednak stromą krzywą uczenia się i najlepiej pasuje doświadczonym programistom. 

Svelte to framework opinionated z wbudowanymi funkcjami, strukturą i „happy path”, które nowi programiści szybko przyswoją i zastosują. Świetnie sprawdza się tam, gdzie trzeba wydać szybko i nie zakłada się rozrostu na ogromną skalę.

Podsumowując: zanim wybierzesz między SolidJS a Svelte do kolejnego projektu, upewnij się, że masz jasność co do celów biznesowych, celów aplikacji oraz preferencji i poziomu umiejętności Twojego zespołu programistów front-endu. Następnie wybierz framework o mocnych stronach, które najlepiej wesprą Twój zespół i to, co chcesz osiągnąć.