Czy kiedykolwiek używałeś jakiejś biblioteki lub frameworka i pomyślałeś sobie: "Wow, naprawdę podoba mi się ten framework. Od teraz będę go używał we wszystkich moich projektach!". Jeśli tak, to z pewnością będziesz chciał przeczytać o Svelte.js.

Co to jest Svelte

Svelte tak samo jak React, Vue.Js czy Angular jest aplikacją typu front-end. Pod wieloma innymi względami jest wyjątkowy. Svelte to zaawansowana platforma JavaScript używana do tworzenia szybkich, oszczędnych i przyjaznych dla programistów statycznych aplikacji internetowych. Możesz używać Svelte do tworzenia pojedynczych komponentów wielokrotnego użytku dla dowolnego projektu, takiego jak Angular, React, Vue lub dowolnych innych frameworków, w tym większych aplikacji. Lub za jego pomocą możesz tworzyć całe aplikacje internetowe. To niesamowita metoda tworzenia lekkich aplikacji z wysokimi wynikami. Cel Svelte jest taki sam, jak innych platform JavaScript dla aplikacji, takich jak React i Vue. Svelte nie jest frameworkiem, ponieważ dodatkowy kod/pakiety ramki nie muszą być dostarczane, jak w większości innych frameworków, możemy tylko założyć, że jest to kompilator, ponieważ kompiluje kod w czasie budowy.

Jest to projekt open-source z kodem źródłowym na GitHubie i licencją MIT. Jest to stosunkowo nowy system podobny do takich systemów jak Angular i React. Został stworzony w 2016 roku przez Richa Harrisa, programistę i dziennikarza wizualnego. Latem 2018 roku, kiedy Harris przedstawił go na JSConf EU, Svelte został po raz pierwszy odkryty przez szerszą społeczność programistów JavaScript.  Wydanie wersji 3 w kwietniu 2019 roku było ważnym momentem dla Svelte (jest to wciąż najnowsza gałąź w chwili pisania tego tekstu), ponieważ była to kompletna przeróbka, która wprowadziła nową, prostszą składnię do pisania komponentów Svelte. Wraz z trzecim wydaniem Svelte nastąpił również prawdziwy wzrost w akceptacji frameworka. Obecnie jest on zarządzany przez zaangażowaną grupę skupioną wokół repozytorium projektu na GitHubie, która okresowo publikuje nowe aktualizacje z poprawkami błędów i funkcjami.

Po co nam Svelte?

Svelte to inne nowe podejście do budowania interfejsów użytkownika. Podczas gdy tradycyjne frameworki, takie jak React i Vue, wykonują większość swojej pracy w przeglądarce , Svelte przenosi to na etap kompilacji , który ma miejsce podczas tworzenia aplikacji.

Svelte kontra inne frameworki

Celem Svelte jest ułatwienie programistom pisania mniejszej ilości kodu, pozwalając im budować komponenty przy użyciu znanych im języków HTML, CSS i JavaScript. Podobnie jak React, aplikacje Svelte są prawdziwie reaktywne, więc nie trzeba bezpośrednio manipulować DOM (tak jak na przykład przy użyciu jQuery): widok jest automatycznie aktualizowany przy każdej zmianie stanu.

Jednak główną intuicją Svelte i jego największą różnicą w stosunku do wszystkich innych popularnych frameworków JavaScript jest to, że przenosi on większość przetwarzania do etapu kompilacji. Oznacza to, że zamiast polegać na dużych i złożonych bibliotekach ładowanych w czasie uruchamiania, Svelte jest zbudowany wokół kompilatora, który przetwarza kod aplikacji przed wyemitowaniem małej, szybkiej i zoptymalizowanej paczki kodu.

Kolejną istotną różnicą w stosunku do innych popularnych frameworków jest to, że Svelte nie wymaga prawie żadnego kodu szablonowego: Komponenty Svelte są pisane za pomocą bloków HTML, CSS i JavaScript. Skrypty są bardzo zbliżone do "waniliowego JavaScriptu", a znaczniki są definiowane za pomocą standardowych znaczników HTML. Svelte nie wprowadza też nowej składni JavaScript, w przeciwieństwie do JSX w React.

Dzięki prekompilacji aplikacje Svelte mają minimalny narzut, zarówno jeśli chodzi o rozmiar kodu w pakiecie, jak i wydajność. Mniejsze pakiety sprawiają, że strony ładują się szybciej, zwłaszcza w przypadku użytkowników korzystających z wolniejszych łączy internetowych. Dodatkowo, wykonując większość pracy na etapie kompilacji, Svelte nie musi stosować technik takich jak wirtualny DOM używany przez React i Vue: zmiany stanu w aplikacjach Svelte są odzwierciedlane bezpośrednio w DOM, bez dodatkowego narzutu.

W pewnym sensie Svelte jest odpowiedzią na eksplozję rozmiaru stron internetowych. Zgodnie z raportami HTTP Archive, w 2015 roku mediana rozmiaru strony internetowej wynosiła 1280 KB, a w 2020 roku wzrosła do 2080 KB. Duże strony internetowe ładują się dłużej, co zwiększa prawdopodobieństwo, że użytkownicy opuszczą Twoją witrynę. Mają one jednak również nieproporcjonalnie duży wpływ na użytkowników na obszarach wiejskich, gdzie przepustowość łącza internetowego jest bardziej ograniczona.

Choć wymóg kompilacji kodu JavaScript może wydawać się zniechęcający, Svelte robi to w bardzo przejrzysty sposób, działając bezpośrednio z pakietami takimi jak Webpack i Rollup. W tym sensie nie różni się zbytnio od innych zadań, które programiści JavaScript wykonują na co dzień, takich jak transpilacja do starszej wersji ECMAScript za pomocą Babel lub konwersja bezpiecznego pod względem typu kodu TypeScript na wykonywalny JavaScript. Etap kompilacji dla Svelte jest naprawdę szybki, dodając niezauważalną ilość pracy do normalnego potoku wiązania.

Ok, a co to jest SvelteKit ?

SvelteKit to pełno-stosowy, działający po stronie serwera framework do wstępnego renderowania dla Svelte, który może wyświetlać kompilacje produkcyjne do różnych środowisk.

SvelteKit jest następcą Sappera , frameworka aplikacji podobnie jak Next.js dla Reacta.

Zapewnia elastyczny routing oparty na systemie plików.

Podstawową ideą SvelteKit jest uproszczenie całego stosu aplikacji w jeden, ustandaryzowany układ oparty na plikach. Ten układ jest następnie używany do zapewnienia spójnego środowiska programistycznego dla wielu środowisk produkcyjnych.

Adaptery SvelteKit

Ponieważ SvelteKit może być używany w wielu środowiskach, pliki zaplecza stanowią rodzaj wyidealizowanego interfejsu API, który można łatwo przekształcić w rzeczywiste, konkretne implementacje w środowiskach hostów.

Odbywa się to za pomocą adapterów, wśród których jest kilka oficjalnych i wiele społecznościowych. Nic (oprócz czasu i chęci) nie stoi na przeszkodzie, abyś zbudował własny adapter.

Można zauważyć, że kilka adapterów jest przeznaczonych dla środowisk bezserwerowych, takich jak Cloudflare Workers i Vercel, a ponadto istnieją dwa "standardowe" adaptery dla Node.js i statycznych stron internetowych. Zauważ, że adapter Static oznacza właśnie to: generuje niedynamiczną stronę internetową.

Renderowanie po stronie serwera i SPA

To jest najbardziej podstawowe pojęcia związane z aplikacją SvelteKit, ale zaledwie zarysowuje obszar możliwości SvelteKit. W szczególności SvelteKit jest frameworkiem SSR (server-side rendering). Oznacza to, że pierwszy element strony po stronie klienta będzie (domyślnie) renderowany na serwerze i dostarczony w pełni do przeglądarki. Następnie strony będą ładowane w stylu SPA (single-page app) jako komponenty renderowane po stronie klienta.

Daje to korzyści dla wydajności i SEO (podobnie jak w Next.js), ale oznacza, że strony muszą być napisane tak, aby działały zarówno na serwerze, jak i na kliencie.

W praktyce oznacza to, że komponenty Svelte nie mogą korzystać z funkcji dostępnych tylko po stronie klienta (takich jak obiekt window). Istnieją jednak sposoby na obejście tego problemu, w tym możliwość wykrywania, kiedy strona jest renderowana w przeglądarce.

Co więcej, oznacza to, że strony mogą uzyskiwać dostęp do zdalnych interfejsów API zarówno z serwera, jak i z klienta (za pośrednictwem funkcji pobierania SvelteKit, która jest bezpośrednim zamiennikiem standardowego interfejsu API pobierania przeglądarki).