Přednosti

Pište méně kódu

Vytvářejte komponenty bez použití zbytečného kódu v jazycích, které už znáte - HTML, CSS a JavaScript.

Rychlost na prvním místě

Svelte zkompiluje váš kód do kompaktního JS bez zbytečností, takže vaše aplikace bude startovat i běžet rychle.

Opravdová reakčnost

Už žadné komplexní knihovny pro správu stavu komponent. Svelte přináší reakčnost přímo JavaScriptu :)

Strmá křivka učení

Technologie Svelte se dá rychle naučit a tak ji můžete rychle začít používat, ať už jste začátečník nebo zkušený progrmátor. Díky návrhu vede k psaní přehledného kódu aplikace.

Jak rychle začít

K instalaci použijeme správce javascriptových balíčků NPM (Node Package Manager).

npx degit sveltejs/template my-svelte-project
cd my-svelte-project //nainstaluje závislosti
npm install
npm run dev //poté nastartujte aplikaci

K vytvoření nového projektu založeném na technologi Svelte použijte degit. Nezapomeňte, že musíte mít naistalovaný Node.js. Po založení projektu a spuštění přejděte na http://localhost:5000. Měli byste vidět běžící aplikaci. Poté editujte komponentu ve složce src, uložte ji (na pozadí se sám kód překompiluje) a znovu načtete stránku, abyste viděli jak se stránka změnila.

Jednoduchý příklad použití Svelte


<p class="pretty">Tento text o Svelte napsal <strong>{name}</strong>.</p>
<style>
    /* přidáme CSS  */
    .pretty {
        color: orange;
    }
</style>
<script>
    /* ...a pomocí proměnné přistupujeme k označení */
    let name = "Bc. Josef Jebavý";
</script>

Pojďme rozebrat tuto ukázku. Celý tento snippet je v běžném html soubroru s příponou .svelte. Jsou tu vidět tagy <script> a <style>. Psaní stylů a JS kódu uvnitř těchto značkek je nezbytné pro správné sestavení. Umožňuje zvýraznění syntaxe bez dalších rozšíření textového editoru (stačí podpora HTML, CSS a JS). Proměnná v Javascripu name je přístupná z komponenty. Ve Svelte v3 je jakákoli proměnná ve skriptu komponenty přístupná pomocí jména.

Ve Svelte je aplikace složena z jedné nebo více komponent. Komponenta je opakovaně použitelný samostatný blok kódu, který zapouzdřuje HTML, CSS a JavaScript, které patří k sobě, zapsané jsou v souboru s příponou .svelte . Tento příklad kódu je jednoduchá komponenta.

Podrobný popis technologie

Svelte je technologie, konktréně překladač nikoli knihovna, která slouží k vývoji webových aplikací, které následně běží na webovém serveru. Můžete se také setkat s označením SvelteJS, ale oficiální název je pouze "Svelte". Aktuálně (září 2019) je Svelte ve třetí revizi označováno jako Svelte v3. Průkopníkem a autorem této technologie je Rich Harris (naleznete na GitHub). Web psaný v technologii Svelte je rychlý, protože aktualizuje pouze ty části z DOM, které se mění, na rozdíl od již zmíněných React, Vue.js a jiných Virtual DOM frameworků. Je to radikální nová cesta k vývoji přívětivého UI (user interface).

Samotný kompilátor Svelte dokáže odhalit nepoužívané CSS kousky kódu a třeba ve VSCode na ně upozorní v záložce "Problems" a dále obsahuje mechanismy, které při kompilaci upozorňují vývojáře na kód, který není sémanticky v pořádku. Toto je velice dobrá funkce, která dává pozor na použití CSS stylů.

Stejný příklad napsaný ve Svelte v porovnání s React je až o 40% menší, proto ušetříme hodně času psaním kódu oproti technologickým konkurentům.

Na Svelte je i úžasné, jak zjednodušuje zápis atributů HTML elementů - místo <img src={src} /> stačí použít <img {src} />.

Ve Svelte není žádné API složitě zajišťující změnu stavu komponent, používá pouze čistý jazyk JavaScript. Stav je pouze proměnná deklarovaná v komponentě a pro jeho změnu potřebujete pouze použít operátor přiřazení. Svelte umožňuje pomocí příkazu $: jednoduše deklarovat proměnné, které jsou odvozené od jiných proměnných a jsou automaticky přepočítány, když se odkazovaná hodnota změní.

Video návod

Video s popisem technologie Svelte a návodem jak vr Svelte začít programovat:

Díky technologii Svelte můžete rychle vyvíjet software na míru, který bude mít spousty funkcí, bude dobře použitelný a udržitelný.

Propojení technologií

Technologie Svelte je univerzální a ve výsledku standardní Java Script, díky tomu je možno SvelteJS kombinovat s rozličnými frontendovými technologiemi a i backendovými technologiemi.

Propojení Nette a Svelte

Díky SvelteJS můžete dosáhnout větsí interaktivity aplikace. Pokud jako backend například používáte PHP framework Nette, můžete tyto technologie propojit. Celou aplikaci stále budete mít naprogramovanou pomocí PHP frameworku Nette. A části, které potřebují větší interaktivitu, zajistit pomocí SvelteJS.

Zde je použití Nette forms s kombinací SvelteJS: Double range slider using Nette and Svelte JS. Implementace této aplikace je takové, že celá aplikace funguje i bez zapnutého Java Script a pokud je Java Script zapnut, tak zadání hodnot je možno udělat pohodlně pomocí interaktivního posuvníku.

Video ukázka s demo aplikací kompinnující Nette a SvelteJS:

Rozšíření pro Svelte

Svelte plugin pro PhpStorm.

Kontaktní formulář