Proč mám zájem učit se SvelteJS
V těchto dnech, mluvím o roce - 2022, vidím všude, kde lidé začali mluvit o štíhlém JS, front-endovém frameworku pro vývoj komponent, jako jsou jiné frameworky, které máme, jako Reag, Angular a Vue JS.
Během své vývojové cesty jsem pracoval na téměř všech různých rámcích včetně
hranatý, reagovat a Vue JS. Teď vidím něco nového, co se jmenuje Svelte JS, není to nic nového, ale ano pro mě je to nové a otázka pro mě je "mám se naučit tento jiný rámec??"
Takže jsem provedl nějaký průzkum a prozkoumal vše o štíhlém JS a zjistil jsem, že „Ano, musím se naučit tento rámec a měl bych ho začít používat v různých aplikacích.
Jen sem dávám nějaký příklad, abych mohl přesvědčit ostatní vývojáře, aby prozkoumali více o Svelte JS
Svelte je čistý html a javascript
Tím se na obrazovku vytiskne Hello World, jeho čistý html a javascript.
Nevidíme žádný render nebo nějaký složitý bootstrap proces pro tuto komponentu, nemáme žádný druh renderovací funkce vracející HTML/JSX
// App.svelte file
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
Další jednoduchý příklad s počítadlem
<script>
// declaring a variable
let count = 0;
// declaring your function
function handleClick() {
count += 1;
}
</script>
// Calling your button and setting the onClick behavior similar to // Vue.js just no "v-" in front of it
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Tento příklad ukazuje reaktivitu, pokud uvažujete o stejném příkladu v jakémkoli jiném rámci, musíte udělat mnoho věcí, abyste aktualizovali stav a znovu vykreslili stejnou komponentu pro změnu události DOM
Zde počet je proměnná, ke které lze přistupovat pomocí šablony HTML, a když se změní, komponenta aktualizuje zobrazení, aby zobrazovalo aktualizovanou hodnotu v uživatelském rozhraní
Když se podíváme na zkompilovaný JS pro tento příklad kódu, po každé události znehodnocuje počet.
https://svelte.dev/repl/2c55788d8ffd4458bfe9bcb5f58956db?version=3.46.6
function instance($$self, $$props, $$invalidate) {
let count = 0;
// declaring your function
function handleClick() {
$$invalidate(0, count += 1);
}
return [count, handleClick];
}
Pokud se dozvíme více o reaktivitě, pak bychom mohli vidět další podobný příklad
V tomto příkladu se výraz $$ spustí při každém zrušení platnosti počtu a znovu tento výraz zkontroluje a znovu vyhodnotí.
<script>
let count = 0;
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Svelte je reaktivní bez virtuálního DOM
Druhou nejzajímavější věcí na Svelte je skutečnost, že uvádí, že je reaktivní, což znamená, že když dojde ke změně po načtení DOM, aktualizuje se bez opětovného vykreslení celé stránky. Odtud dostal React svůj název, ale React vytvořil tuto věc zvanou virtuální DOM, která je pouze kopií skutečného DOM a je schopna jej aktualizovat, jak si vývojář přeje. Přečtěte si o tom více zde.
"Populární rčení, je to rychlé, protože DOM je pomalý"
Virtuální DOM je čistá režie (https://svelte.dev/blog/virtual-dom-is-pure-overhead)
můžete strávit čas strávením všech těchto faktů (https://svelte.dev/blog/virtual-dom-is-pure-overhead)
Pojďme jednou provždy odstranit mýtus „virtuální DOM je rychlý“
Pokud jste v posledních několika letech používali frameworky JavaScript, pravděpodobně jste slyšeli frázi „virtuální DOM je rychlý“, což často znamená, že je rychlejší než skutečný DOM. Je to překvapivě odolný meme – lidé se například ptali, jak může být Svelte rychlý, když nepoužívá virtuální DOM.
příklad z reakce --
function HelloMessage(props) {
return React.createElement(
'div',
{ className: 'greeting' },
'Hello ',
props.name
);
}
...ale výsledek je stejný — objekt představující, jak má stránka nyní vypadat. Tím objektem je virtuální DOM. Pokaždé, když se stav vaší aplikace aktualizuje (například když se změní název podpěry), vytvoříte nový. Úkolem frameworku je sladit nový se starým, zjistit, jaké změny jsou nutné, a aplikovat je na skutečný DOM.
pro více informací se můžete podívat na https://svelte.dev/blog/virtual-dom-is-pure-overhead
Usnadnění je integrováno
Upozornění týkající se dostupnosti Svelte (často zkrácená na „a11y“) jsou jednou z výjimečných funkcí rámce. Podle Riche Harrise je Svelte „první rámec pro 11 let“, který vám „umožní psát nepřístupné značky, ale nebude vás za to respektovat“. Varování o usnadnění v kompilátoru byla součástí rámce
Křivka učení
Když přijde na to se to naučit, jsou k dispozici jednoduché a dostatečné dokumenty, abyste se to snadno naučili, takže složité koncepty a věci ve Svelte JS
Kdokoli se může začít učit přímo zde https://svelte.dev/tutorial/basics
Velikost balíčku a rychlejší kompilace
Chcete-li začít s nějakou základní aplikací, můžete si ji vytvořit pomocí jednoduchých příkazů
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js
npm install
npm run dev
Svelte implementace TodoMVC váží 3,6 kb zip. (https://svelte.dev/blog/frameworks-without-the-framework) Pro srovnání, React plus ReactDOM bez kódu aplikace váží asi 45 kb zip. Vyhodnocení Reactu trvá prohlížeči asi 10x déle než spuštění Svelte s interaktivním TodoMVC.
A jakmile bude vaše aplikace spuštěna, je podle js-framework-benchmark Svelte rychlý. Je to rychlejší než React. Je rychlejší než Vue. Je to rychlejší než Angular, nebo Ember, nebo Ractive, nebo Preact, nebo Riot, nebo Mithril. Konkuruje Inferno, což je prozatím pravděpodobně nejrychlejší UI framework na světě,
Závěr
- Jak se učím svelte, brzy zveřejním více o Svelte JS
- Každý vývojář by se měl podívat na to, co štíhlý JS poskytuje našim komponentám uživatelského rozhraní a jak se liší od všech ostatních frameworků.
Reference
- https://svelte.dev/blog/frameworks-without-the-framework
- https://svelte.dev
- https://svelte.dev/blog/virtual-dom-is-pure-overhead
- https://svelte.dev/examples/hello-world