Svelte – darmowy, otwarty front-endowy kompilator, wykorzystywany do tworzenia interfejsów graficznych aplikacji internetowych. Został stworzony przez Richa Harrisa.

Aplikacje skompilowane przy pomocy Svelte nie zawierają w sobie bibliotek, tylko wygenerowany kod JavaScript – skutkuje to w zredukowaniu ich rozmiaru, jak i zwiększeniu ich wydajności. W przeciwieństwie do popularnych frameworków JavaScript, Svelte nie wykorzystuje pośrednich rozwiązań, takich jak wirtualny obiektowy model dokumentu, co przyczynia się do mniejszych wymagań aplikacji internetowych stworzonych przy pomocy tego rozwiązania. Sam kompilator napisany jest w języku JavaScript, a jego kod źródłowy dostępny jest na licencji MIT na serwisie GitHub.

Historia Poprzednikiem Svelte jest Ractive.js, poprzedni projekt Richa Harrisa. Pierwsza wersja Svelte napisana została w języku JavaScript, a do publicznego użytku trafiła 29 listopada 2016. 19 kwietnia 2018 wydana została druga wersja kompilatora, która wprowadziła nowy syntaks szablonów, nowy sposób aktualizowania stanu strony i zgodność z ES2015. Trzecią aktualizację kompilator otrzymał w kwietniu 2019, a w lipcu 2020 został przepisany w języku TypeScript .

Wersja Svelte 5 została wydana w październiku 2024 . Stanowi ona gruntowne przepisanie frameworka, wprowadzając istotne zmiany w zakresie reaktywności i ponownego użycia kodu. Najważniejszą nowością tej wersji jest wprowadzenie run (ang. runes) - uniwersalnego mechanizmu reaktywności. Runy to prymitywy umożliwiające jawne deklarowanie reaktywnego stanu i interakcję z nim.

let count = 0; // było let count = $state(0); // stało się

Wraz z wydaniem Svelte 5 wprowadzono również nowy interfejs wiersza poleceń (CLI) dostępny pod nazwą pakietu sv w repozytorium npm . Służy on do tworzenia, rozszerzania i aktualizowania projektów Svelte. Przykład Aplikacje i komponenty zdefiniowane są w plikach „.svelte”, które rozszerzone są o składnię szablonów podobną do JSX. Svelte wykorzystuje natywną składnię instrukcji JavaScript z etykietą $:, aby oznaczyć zmienne reaktywne. Zmienne najwyższego poziomu stają się stanem komponentu, a wyeksportowane zmienne stają się właściwościami, które otrzymuje komponent. <script> let a = 1; $: b = a * 2; </script>

<p>{a} * 2 = {b}</p>

<button on:click={() => a = a + 1}>Licz</button>

Powiązane projekty i wpływy Vue.js swoją składnie bazuje na tej z Ractive.js, który jest poprzednikiem Svelte.

Na potrzeby budowania aplikacji Svelte stworzony został framework SvelteKit.

Osoby zajmujące się rozwojem Svelte opracowały liczne projekty integrujące rozwiązania takie jak Vite, Rollup, Webpack, TypeScript, VS Code i więcej.

Odbiór publiczny Svelte cieszy się największym uznaniem swoich użytkowników spośród wszystkich front-endowych technologii, jednak przegrywa w popularności z frameworkami takimi jak React, Vue czy Angular.

Svelte został przyjęty przez wiele znanych firm, w tym The New York Times, Apple, Spotify, Bloomberg, Reuters, IKEA i Facebookhttps://yourhome.fb.com/.

Przypisy

Kategoria:Biblioteki JavaScript Kategoria:Oprogramowanie na licencji MIT