logo

Být reaktivní – řekněte NE virtuálnímu DOM, seznamte se se Svelte

Zní to divně? Vítejte v Druhém příspěvku ze série s názvem „Being Reactive '.

Pokud jste ještě nečetli první příspěvek o virtuálním DOM a rozdílech DOM, přečtěte si ho. V minulém příspěvku jsem mluvil o virtuálním DOM, DOM Diffingu a nákladech s tím spojených.

Mnoho moderních frameworků a knihoven využívá mechanismus Virtual DOM k získání toho, co se změnilo a nechte aplikaci reagovat (nebo aktualizovat) k tomu.

Virtuální DOM je skvělý koncept. Náklady na porovnání a sladění jsou však vysoké pro prohlížeče a cyklus sběru odpadu. Při provádění porovnání změn DOM a aktualizace DOM za běhu se rámec skutečně spustí v prohlížeči. To vede k problémům s výkonem a dalším režijním nákladům.

Jiný způsob myšlení

  • Co když se rámec ve skutečnosti v prohlížeči nespustil?
  • Co kdyby framework převedl vaši aplikaci na čistý vanilkový JavaScript, stejně jako Babel převádí ES2016+ na ES5?
  • Co když vaši uživatelé nebudou platit náklady na doručení obrovského množství runtime?
  • Co kdyby, vaše aplikace by byla šíleně rychlá, protože by mezi aplikací a prohlížečem nebyly žádné vrstvy abstrakce?
  • Co když se vaše aplikace stále řídí Reactive Programming koncepty a implementace asynchronního toku dat byla postaráno v době sestavování, než aby bylo ponecháno na běh?

Jak to zní? Fascinující?

Obrázek s laskavým svolením:GIphy.com

Seznamte se se Sveltem:Přehodnocení reaktivity

Svelte je nový člověk na bloku s radikálně novým přístupem k vytváření uživatelských rozhraní. Zatímco tradiční rámce jako React a Vue vykonávají většinu své práce v prohlížeči, Svelte posuny, které se zapracují do kroku kompilace, ke kterému dojde při sestavování aplikace. Není to skvělé?

Podle https://svelte.dev/:

Štíhlý s jasnými výhodami

S Svelte , své komponenty píšete pomocí HTML, CSS a JavaScriptu. Během procesu sestavování Svelte zkompiluje je do malých samostatných modulů JavaScriptu. Proces sestavení se postará o vše, co by mohlo detekovat změny a provést správnou aktualizaci stavu. Vy jako vývojář a uživatelé vaší aplikace zde máte velké výhody. Proč?

  • Prohlížeč udělá tu malou práci. Už žádné běhové prostředí v prohlížeči nedělá těžkou práci.
  • S aplikací nedodáváte žádné runtime, framework ani knihovnu. V prohlížeči běží pouze vanilla JS.
  • Vaše aplikace je vážně rychlejší. Podle tohoto benchmarku JS Framework, Svelte aplikace je mnohem rychlejší než aplikace vytvořené pomocí React, Angular, Vue atd. Jednoduše proto, že to není nic jiného než vanilla JS.
  • Jak je to s interoperabilitou ? Cítili jste se někdy špatně, že jste napsali komponentu v Angularu a máte potíže s jejím použitím v projektu React? Opět Svelte je vanilkový JS na konci dne. Komponenta napsaná v Svelte lze použít s jakýmkoli projektem napsaným v jakémkoli jiném webovém rozhraní nebo knihovně.

Čas vidět nějaký kód.

Zde je příklad převzatý z https://svelte.dev/, kde ukazuje jednoduchost vývoje komponenty.

<script>
    let a = 1;
    let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

Jak jste správně uhodli, tato jednoduchá komponenta spojuje dvě hodnoty se dvěma textovými poli. Při aktualizaci hodnot textového pole aplikace zareaguje a změní výstupní hodnotu v prvku odstavce (p). Zde je výstup:

Zajímá vás, jak by vypadal ekvivalent ReactJs? Jen má mnohem více řádků:

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Byl by to podobný případ s Angular, Vue atd.

Zde je můj první pokus o vytvoření Svelte Component a stále to zkoumám a méně soudím:

https://github.com/atapas/svelte-think/tree/master/post-it

Máte zájem připojit se k Cestě? Zde je několik důležitých odkazů, které vám pomohou při prozkoumávání Svelte :

  • Svelte na GITHUBU
  • REPL k vyzkoušení Svelte
  • Rozhovor Richa Harrise o reaktivitě přehodnocení

Zatím nejobtížnější část s Svelte je správně vyslovovat 😃. V případě, že máte stejný problém, zde je nápověda pro vás:

https://www.youtube.com/watch?v=PaOzcDCaSu0

Doufám, že se vám příspěvek líbil. Klikněte prosím na Sledovat tlačítko níže pro čtení mých budoucích článků. Šťastné objevování!