Průvodce Svelte.js

Už jste někdy použili knihovnu nebo framework a pomysleli jste si:"Páni, tento framework se mi opravdu líbí. Odteď ho budu používat na všech svých projektech!" Pokud ano, pak si budete chtít přečíst o Svelte.js.

Svelte dělá vlny za poslední rok. Ve skutečnosti je to podle průzkumu Stack Overflow nejoblíbenější a pátý nejoblíbenější framework. Obvykle nejsem nadšený z nových nástrojů, ale Svelte je jiný. Poskytuje jedinečný úhel pohledu a má funkce, díky nimž se odlišuje od ostatních.

Například Svelte automaticky sbalí váš kód, aby dosáhl rychlejšího načítání, takže je ideální pro projekty založené na SEO a mobilní zařízení.

V této příručce se budeme zabývat:

• Co je Svelte
• Rozdíl mezi Svelte a ostatními frameworky
• Kdy byste měli Svelte používat
• Jak pomocí aplikace Svelte vytvořit aplikaci se seznamem úkolů

Co je Svelte?

Svelte.js je open-source JavaScript framework, který zjednodušuje vytváření rychlých, statických webových aplikací přeměnou surového kódu na elegantní a interaktivní uživatelská rozhraní. Jedním z klíčových rozdílů tohoto rámce je to, že kompiluje a poskytuje kód v době sestavování, nikoli za běhu, takže je rychlejší než React nebo Vue.

Rychlost Svelte vychází z jeho architektury. Rámec kompiluje kód do malých, nezávislých modulů JavaScriptu, což zajišťuje, že prohlížeč odvádí co nejméně práce, což vede k vyšší rychlosti načítání

Extrémně rychlé rychlosti a solidní vývojářské zkušenosti Svelte mají tři hlavní důvody:

• Žádný virtuální DOM: Svelte dosahuje téměř stejné funkce jako React a Vue bez virtuálního DOM. To znamená, že jej můžete používat, aniž byste se spoléhali na virtuální prvky, a na oplátku získáte ještě lepší výkon. Jinými slovy, Svelte pracuje přímo na kódu bez DOM a přesouvá většinu zpracování kódu do fáze kompilace.

• Méně kódu: Ve Svelte dosáhnete stejných výsledků jako s Reactem, ale s menším počtem řádků kódu. Tento experiment například ukazuje, že k vytvoření stejné komponenty je zapotřebí 442 znaků v Reactu, 263 ve Vue a 145 ve Svelte.

• Reaktivita: Svelte, stejně jako React, reaguje na změny dat sám o sobě. Nevyžaduje, aby prohlížeč prováděl další práci při převodu komponent na operace DOM, které vykreslují změny dat tak, jak jsou, jako kód JavaScript.

Štíhlí uživatelé, kteří chtějí používat framework, mohou využít SvelteKit bez výrazné křivky učení. Rámec rozšiřuje nativní schopnosti Svelte a umožňuje webovým vývojářům vytvářet webové aplikace všech velikostí, přičemž návštěvníkům zachovává solidní vývojářské prostředí a rychlý výkon.

Nyní, když víme o Svelte více, pojďme se ponořit hlouběji a porovnat jej s jinými frameworky JavaScriptu.

Svelte vs. React a Vue.js

Zde je praktický graf, ve kterém můžete na první pohled vidět rozdíly mezi jednotlivými frameworky.

Jednoduše řečeno, Svelte vám umožňuje být efektivnější. Tím, že vám umožní používat jazyky a notaci, které znáte (HTML, CSS a JavaScript), mohou rychle začít i začátečníci. Na druhou stranu React a Vue vyžadují dovednosti TypeScript a JSX.

Kromě toho se Svelte nespoléhá na složité knihovny načtené za běhu. Místo toho zkompiluje váš kód a načte malý balíček, který je menší než React. Tento hmotnostní rozdíl se pro návštěvníky promítá do rychlejšího načítání.

Na rozdíl od Vue a React nevyžaduje Svelte téměř žádný standardní kód, protože je napsán pomocí základních HTML, CSS a JavaScriptu. Výsledkem je, že skripty Svelte vypadají podobně jako vanilla JS, protože používají standardní HTML tagy.

Výhody používání Svelte.js

Nyní, když jsme se blíže podívali na Svelte vs. jeho alternativy, pojďme si promluvit o důvodech, které z něj dělají nejoblíbenější framework:

• Lepší vývojářské prostředí: Svelte je nejoblíbenější framework, protože se snadno nastavuje a zaměřuje se na vytvoření prostředí, kde mohou vývojáři psát méně kódu a dělat více.

• Vestavěné lemování usnadnění přístupu: Svelte's accessibility linter je velkým pomocníkem, aby aplikace byly bez chyb. Svelte automaticky zkontroluje zkompilovaný kód před spuštěním a nahlásí jakékoli porušení, jako je chybějící alternativní text nebo příliš málo bodů kontrastního poměru.

• Modulární CSS: Styly Svelte mají ve výchozím nastavení rozsah, což znamená, že když své soubory Svelte zkompilujete do prostředků, vygenerují jedinečné názvy tříd pro každý prvek. To zajišťuje konzistenci designu napříč stránkami nebo aplikacemi.

• Vestavěné animace: Práce s animacemi ve Svelte je fantastický zážitek. Dodává se vestavěný s výkonnými a příjemnými interakcemi bez potřeby dalších balíčků.

Kdy byste měli použít Svelte.js?

Upřímně řečeno, vše se scvrkává na to, co s tím hodláte postavit. Jen proto, že poskytuje rychlý výkon, nedělá z něj kouzelné kladivo, které vyřeší všechny vaše problémy. Obecně bych Svelte doporučil používat, když:

• Vytváření rychlých a responzivních webových stránek: Malá velikost svazku Svelte zajišťuje, že cokoli vytvoříte, poběží rychle. Díky tomu je ideální pro zákazníky, kteří chtějí rychlé weby založené na SEO a vynikající zážitek z webu.

• Vytváření webových aplikací pro zařízení se špatnou konektivitou: Vzhledem k tomu, že Svelte používá méně kódu, znamená to méně kb ke stažení a spouštění, takže je ideální pro vytváření aplikací určených pro zařízení s omezeným přístupem k internetu a omezeným výkonem procesu.

• Návrh interaktivních stránek: Animace a přechody jsou ve Svelte integrovány. Vývojáři mohou vytvářet interaktivní obsah pomocí modulu svelte/animate, což je skvělý způsob, jak udržet návštěvníky v kontaktu s vaším obsahem, aniž by to ovlivnilo rychlost načítání a SEO.

Má Svelte.js velkou křivku učení?

Svelte je perfektní platforma pro začátečníky, kteří začínají s kódováním. S pouhými znalostmi HTML/CSS a JavaScriptu můžete začít budovat svůj první web od nuly, aniž byste potřebovali další znalosti.

Díky tomu je na rozdíl od většiny jeho alternativ velmi malá křivka učení. Kromě toho Svelte nabízí solidní výukové zdroje, které zajistí, že pochopíte specifika během pouhých dnů – ne týdnů nebo měsíců, jako byste to udělali s React, Vue nebo Angular.

Začínáme s Svelte.js

Teď jsem si jistý, že si chcete ušpinit ruce a začít si hrát se Sveltem.

Tentokrát jsem připravil výukový program pro začátečníky, který vám ukáže, jak vytvořit seznam úkolů pomocí komponent Svelte. Vytvoříme interaktivní formulář, kde můžete své úkoly označit jako dokončené nebo je vymazat, pokud jste udělali chybu.

Úplné odhalení, nejsem nejorganizovanější člověk a buduji to s nadějí, že mi to pomůže stát se jím.

Připojte se ke mně na této duchovní cestě a pojďme společně vybudovat tuto aplikaci.

Předpoklady

Toto je to, co potřebujete, abyste mohli začít s Storybook:

• Základní znalost HTML, CSS a JavaScript
• Editor kódu jako Visual Studio Code
• Node.js nainstalovaný ve vašem počítači
• npm nainstalovaný ve vašem počítači
• Git a degit

Abychom mohli začít s tímto tutoriálem, musíme nainstalovat dvě věci:git a degit. Git nám umožňuje prohledávat balíčky přímo v GitHubu bez registru a degit nám umožňuje vytvářet kopie git repozitářů a používat je v našich vlastních projektech.

Protože pro náš seznam úkolů budeme používat šablonu Svelte, potřebujeme obě, než začneme.

Chcete-li nainstalovat Git, spusťte:

npm install -g git-install

Chcete-li nainstalovat degit, spusťte v CLI následující příkaz:

npm install -g degit

1. Vytvoření aplikace Svelte.js

S nainstalovaným git a degit vytvoříme klon šablony aplikace projektu Svelte a spustíme jej. Tento standardní kód vytvořený týmem Svelte nám poslouží k rychlému začátku. Chcete-li to provést, zadejte na svém CLI následující příkaz.

npx degit sveltejs/template svelte-app Pojmenoval jsem ji štíhlá aplikace, ale můžete ji nazývat, jak chcete.

Po naklonování projektu byste měli mít nový adresář 'svelte-app'. Tento adresář obsahuje soubory šablon, které budeme potřebovat k vytvoření našeho seznamu úkolů.

Přejděte do své složky v terminálu pomocí cd your-folder-path/ a nainstalujte všechny závislosti projektu spuštěním:

npm install

Jakmile jsou závislosti nainstalovány, spusťte naši šablonovou aplikaci pomocí následujícího příkazu:

npm run dev

Tento příkaz spustí naše prostředí Svelte dev a připraví naši aplikaci. Jak šablona vypadá, můžete vidět na http://localhost:8080. Pokud jsme udělali věci správně, měli bychom získat stránku, která vypadá takto:

Jsme připraveni vytvořit naši první komponentu a začít zdokonalovat naši aplikaci.

2. Vytvoření kontejneru Svelte

Chcete-li vytvořit kontejner, který bude obsahovat naši aplikaci, musíme přejít na src/App.svelte . Tady se děje kouzlo. Kontejner se obvykle skládá z následujících částí:

<script> :Blok obsahující spustitelný kód JavaScript.

<html tag> :Blok obsahující hlavní funkce aplikace.

<style> :Blok obsahující styly CSS.

Jakmile jsme v souboru, nahraďte stávající kód následujícím:

<script>
</script>
<main>
</main>
<style>
</style>

To by mělo vytvořit kontejner, kde bude naše aplikace pro úkoly fungovat.

Nyní, když máme prázdný kontejner, pojďme vytvořit formulář.

3. Vytvoření formuláře pro odeslání úkolů

Abychom vytvořili formulář, do kterého budeme odesílat naše úkoly, musíme do značky přidat následující řádky kódu:

<!-- Form -->
<form on:submit|preventDefault={add}>
    <input bind:value={newItem} placeholder="Enter to-do" />
    <button class="add-todo" on:click={add}><span>+</span></button>
    </form>

Tento kontejner spustí událost JavaScriptu při odeslání formuláře.

Ještě potřebujeme několik věcí, abychom zajistili, že náš seznam úkolů bude schopen ukládat data a vykreslit úkoly na stránce naší aplikace. Chcete-li tak učinit, přejděte na naši značku a přidejte do ní následující kód:

let newItem = "";
let todoList = [];
function add() {
  if (newItem !== "") {
    todoList = [
      ...todoList,
      {
        task: newItem,
        completed: false,
      },
    ];
    newItem = "";
  }
}

Tato funkce JavaScript se volá pokaždé, když uživatel interaguje s naším tlačítkem pro odeslání formuláře, které spustí událost on:submit, kterou jsme vytvořili dříve. Poté vykreslí obsah pod tlačítkem Odeslat.

4. Stylování formuláře

Nyní, když jsme vytvořili formulář pro odeslání našich úkolů, přidáme do něj nějaký styl. Udělat to tak. Do <style> přidáme následující štítek:

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 5vmin;
    box-sizing: border-box;
    background: antiquewhite;
    }

5. Úprava stylu tlačítka formuláře

Nyní, když máme funkční formu, je čas přidat do ní nějaké styly. Pojďme tedy do <style> přidat následující kód štítek:

form {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  input {
    flex-grow: 1;
    width: 0;
    border: none;
    border-bottom: 1px solid black;
    background: transparent;
    box-shadow: none;
    font-size: 1.2rem;
    margin: 0;
    outline: none;
  }

6. Vykreslování a styling úkolů

Nyní by měl být náš formulář nastylovaný a připravený přijímat naše úkoly, ale musíme se ujistit, že se položky objeví na naší stránce, jakmile je přidáme jako úkoly.

K tomu použijeme Svelteovu funkci #each, která nám umožňuje procházet seznamy dat a zobrazovat je v našem seznamu.

Přidejte následující řádek kódu do App.svelte v sekci pod značkou formuláře:

<!-- To-dos -->
<div class="todos">
    {#each todoList as item, index}
        <span class="todo__text">{item.task}</span>
        <div class="todo__buttons"></div>
    {/each}
</div>

Jakmile to uděláme, přidáme do našeho seznamu úkolů nějaký styl. Chcete-li to provést, přejděte do našeho <style> označte a přidejte tento nový styl CSS:

.todos {
    width: 100%;
    max-width: 500px;
}

.todo {
    display: flex;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    background-color: hsla(0, 0%, 100%, 0.2);
    margin-top: 1rem;
    font-size: 1.2rem;
    justify-content: space-between;
    align-items: center;
}

.todo__buttons {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.todo button {
    width: 32px;
    height: 32px;
    padding: 4px;
    margin: 0;
    flex-shrink: 0;
}

7. Přidání záhlaví do seznamu

Nyní, když jsou připraveny základní funkce našeho formuláře, je čas přidat záhlaví a nějaký extra styl, aby náš seznam úkolů vypadal přitažlivěji.

Nejprve do našeho seznamu přidejte záhlaví H1. Umístěte jej přímo pod značku

<!-- Header -->
<h1>My to-do list</h1>
To style the header, let’s add the following code to our <style> tag:

h1 {
    text-align: center;
    font-size: 1.5rem;
    margin: 2em 0;
}

Nyní by váš seznam úkolů měl vypadat takto:

8. Přidání funkcí dokončení a odstranění pomocí ikon

Udělejme to funkčnější přidáním tlačítka smazat a dokončeno.

Chcete-li přidat tlačítka, nejprve vytvoříme komponentu obsahující ikony, které použijeme jako tlačítko. Vytvoříme Icon.svelte soubor v /src adresář a přidejte následující kód:

<script>
  export let name;
  const icons = [
    {
      name: "check-mark",
      path: '<path d="M19.77 4.93l1.4 1.4L8.43 19.07l-5.6-5.6 1.4-1.4 4.2 4.2L19.77 4.93m0-2.83L8.43 13.44l-4.2-4.2L0 13.47l8.43 8.43L24 6.33 19.77 2.1z" fill="currentColor"></path>',
    },
    {
      name: "delete",
      path: '<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z" fill="currentColor"></path>',
    },
  ];
  let icon = icons.find((item) => item.name === name);
</script>

<svg viewBox="0 0 24 24" class={$$props.class}>
  {@html icon.path}
</svg>
This component can receive an icon name and displays the associated SVG so they can be used by other components with the import statement.

Feel free to change the icons if you want something different.

Now, let’s do take advantage of the #each function we created earlier to show the icons in our app. Under the <span class="todo__text">{item.task}</span> tag in the todos class inside the App.svelte file replace the content with the following code just before the closing </div>:

<div class="todo__buttons">
          <button class="complete" on:click={() => complete(index)}>
            <Icon name="check-mark" />
          </button>
          <button class="delete" on:click={() => remove(index)}>
            <Icon name="delete" />
          </button>
        </div>
      </div>
    {/each}

Po dokončení importujme komponentu Icon z /Icon.svelte přidáním následujícího řádku kódu pod <script> v App.svelte soubor:

import Icon from "./Icon.svelte";

Nyní, abychom vytvořili funkci odstranění, přidejte to pod naši funkci přidání:

function remove(index) {
    todoList.splice(index, 1);
    todoList = todoList;
  }
Finally, let’s add some styling to make our buttons look great. To do it, go to the <style> tag in the same file and add the following code:

button.delete,
button.delete:hover {
  color: brown;
  transition: color 100ms ease-out;
}
button.complete,
button.complete:hover {
  color: cadetblue;
  transition: color 100ms ease-out;
}

Nyní by náš seznam úkolů měl vypadat takto. Jak můžete vidět, ikony jsou viditelné a interaktivní.

Štíhlá aplikace úkolů s ikonami na tlačítkách

I když bychom mohli nechat náš seznam úkolů takto, udělejme poslední věc, aby náš seznam úkolů vypadal ještě lépe.

9. Dokončení úkolů

Jako naši poslední věc, příslovečnou třešničku na vrcholu našeho tutoriálu, přidáme do našeho seznamu úkolů volitelnou třídu, která automaticky spustí úkol, když jej dokončíme.

Chcete-li to provést, přidejte novou funkci do <script> živel:

function complete(index) {
  todoList[index].completed = !todoList[index].completed;
}
This function adds a style element to the items in your to-do list, striking them if the item is completed.

Now we need to add some styles to our new element by going to <style> and adding the following code:

.todo.completed {
  color: slategray;
}

.todo.completed .todo__text {
  text-decoration: line-through;
}

.todo.completed button {
  color: silver;
}

Pokud jste postupovali podle kroků, měli byste mít něco takového.

Štíhlá aplikace úkolů s přeškrtnutým úkolem po dokončení

A to je vše. Úspěšně jsme vytvořili seznam úkolů na Svelte.

Pět!

Živé demo a úložiště GitHub

Závěr

Po použití Svelte chápu, proč to vývojáři milují. Je to slibný kompilátor (nebo framework), který i když není ideální pro každý projekt, může vám pomoci vytvořit něco rychlého a interaktivního.

Je méně spletitý než jiné nástroje a umožňuje vám dopadnout na zem během několika minut. Kromě toho na internetu najdete spoustu zdrojů, které vám pomohou, pokud narazíte na překážku, a komunita je přátelská k začátečníkům.

Pokud se chcete naučit nový framework nebo chcete zkusit něco jiného, ​​Svelte rozhodně stojí za bližší prozkoumání.

Už jste použili Svelte? Řekněte mi, co si o tom myslíte v komentářích.