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.
Vytvářejte komponenty bez použití zbytečného kódu v jazycích, které už znáte - HTML, CSS a JavaScript.
Svelte zkompiluje váš kód do kompaktního JS bez zbytečností, takže vaše aplikace bude startovat i běžet rychle.
Už žadné komplexní knihovny pro správu stavu komponent. Svelte přináší reakčnost přímo JavaScriptu :)
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.
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.
<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.
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 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ý.
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.
Jednou z mnoha možností je použít jako backend PHP framework Nette. Celou aplikaci můžete udělat pomocí Nette a 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: