Svelte – co to jest?

Svelte – definicja

Framework Svelte to kompilator front-end. Jest on darmowy i funkcjonuje w charakterze open source, a jego kod jest dostępny w ramach licencji MIT na GitHub. Stosuje się go do tworzenia interfejsów graficznych aplikacji internetowych.

Twórcą Svelte.js jest Rich Harris. Poprzednik omawianego frameworka funkcjonował pod nazwą Ractive.js. Pierwsza wersja Svelte została wydana w 2016 roku i powstała jeszcze przy pomocy JavaScript. Najnowszy standard wersji (3.0) został wprowadzony w 2019 roku – napisano ją w TypeScript.

Svelte – podstawowe informacje

• Rodzaj technologii – framework/kompilator
• Twórca – Rich Harris
• Technologia wykorzystana do stworzenia – początkowo JavaScript, obecnie TypeScript
• Rok wydania – 2016
• Oficjalna strona internetowa – svelte.dev
• Profil na GitHub – Svelte

Popularność Svelte – co go wyróżnia?

Celem frameworków jak React czy Vue jest zapewnianie komponentów, narzędzi i reguł stosowanych przy tworzeniu stron internetowych oraz aplikacji przy pomocy JavaScript. Pomaga to przyspieszyć i usprawnić pracę.

React i Vue korzystają z wirtualnego DOM-u (Document Object Model – obiektowy model dokumentu) w przeglądarce. Jest to interfejs API, który pozwala programom odczytywać i zmieniać zawartość oraz strukturę stron. Można powiedzieć, że chwilowo przechowuje on zmiany wprowadzane do interfejsu. Funkcja ta jest bardzo przydatna, jednak prowadzi do spadków wydajności.

Framework Svelte stosuje jednak inne podejście w celu wspierania pracy developerów. Nie korzysta on z wirtualnego DOM-u. Zamiast tego kompiluje kod do „czystego” JavaScript, który zajmuje znacznie mniej miejsca (to właśnie z tego powodu omawianą technologię określa się także jako kompilator). Użytkownik nie musi także załadowywać biblioteki do przeglądarki, aby uruchomić kod Svelte.

W rezultacie kod działa znacznie szybciej, co pozwala tworzyć sprawniejsze aplikacje. To właśnie z racji tego oryginalnego i skutecznego podejścia Svelte jest godny uwagi.

Svelte – zalety i wady

Oto inne powody, dla których warto zwrócić uwagę na Svelte:

• Mniej kodu – mniej linii kodu potrzebnych na zaprojektowanie danej funkcji oznacza oszczędność czasu, zredukowaną liczbę potencjalnych błędów i lepszą przejrzystość. Według niektórych szacunków Svelte pozwala skrócić kod nawet o 30-40% w porównaniu do podobnych frameworków jak React lub Vue.
• Programowanie reaktywne – Svelte aktualizuje DOM w trakcie tworzenia aplikacji, co pozwala tworzyć je zgodnie z wymaganiami bez przejmowania się o narzut czasu (overhead). Same reaktywne zmienne mogą być łatwo tworzone poprzez dodawanie oznaczenia „$:” na początku deklaracji.
• Lepsze tworzenie arkuszy stylów – zamiast CSS-a, developerzy mogą korzystać ze stylów z atrybutem „scoped”, co pozwala umieszczać style w środku dokumentu, koncentrując się na konkretnym elemencie.

Oto wady, o jakich istnieniu warto pamiętać w przypadku Svelte:

• Mała społeczność – choć Svelte to bardzo przydatny kompilator, dalej pozostaje stosunkowo niszowym rozwiązaniem. W rezultacie jego społeczność jest mniejsza, przez co trudniej o znalezienie wsparcia.
• Ekosystem open-source jest mały – Svelte funkcjonuje w charakterze open-source, jednak jego możliwości są ograniczone.
• Skomplikowane stosowanie dynamicznych tagów HTML – wprowadzenie funkcji, która przykładowo sprawia, że tag HTML dynamicznie zmienia się w reakcji na określone instrukcje, wymaga stworzenia rozbudowanego kodu.

SvelteKit – co to jest?

SvelteKit to zestaw narzędzi do tworzenia aplikacji internetowych opartych na Svelte. Jest on następcą Sappera i spełnia podobną funkcję jak Next.js w przypadku React.

Podstawową ideą SvelteKit jest sprowadzenie całego stacku aplikacji w jeden ustandaryzowany, oparty na plikach układ. Następnie jest on wykorzystywany do wdrożenia spójnego systemu developerskiego dla wielu środowisk produkcyjnych.

SvelteKit oferuje renderowanie po stronie serwera, dzielenie kodu, komponenty dla platform bez serwerów, routing i wiele innych przydatnych funkcji. Jest łatwy do nauczenia się, ma świetną dokumentację i jest chwalony przez wielu developerów.

Svelte – do czego go zastosować?

Svelte można wykorzystać do tworzenia całych aplikacji, jak i ich małych fragmentów. Omawiany framework najlepiej mieć na uwadze, jeśli chcesz zbudować szybkie aplikacje internetowe, które wyróżniają się świetnym interfejsem.

Svelte sprawdzi się także świetnie w tworzeniu aplikacji reaktywnych, czyli takich, które od razu uwzględniają w DOM-ie zmiany w wartościach, które zostały wprowadzone w aplikacji (np. w ramach działania użytkownika).

Korzystanie ze Svelte wymaga podstawowej znajomości HTML, CSS i JavaScript, dzięki czemu jest to technologia z niskim progiem wejścia. Dostępne samouczki pozwolą z kolei developerom dopiero nabywającym doświadczenie szybko nabrać wprawy.