Co je Slate.js a nahradí Quill a Draft.js?

Napsal Ekekenta Odionyenfe✏️

Slate.js je vysoce přizpůsobitelná platforma pro vytváření textových editorů, známých také jako WYSIWYG editory. Umožňuje vám vytvářet výkonné a intuitivní editory podobné těm, které jste pravděpodobně používali v Medium, Dropbox Paper nebo Google Docs. Tyto se rychle stávají standardními funkcemi pro mnoho webových aplikací a nástroje jako Slate usnadňují jejich implementaci a zajišťují, že váš program neuvízne ve složitosti.

Ačkoli je Slate v době psaní článku stále ve verzi beta, je přirozené se ptát, zda má potenciál nahradit vyspělejší platformy, jako je Quill a Draft.js. Krátká odpověď je, že je příliš brzy na to říkat, ale zde je několik faktů na podporu toho, proč by to mohlo být.

Co je nového v Slate.js?

Vybudování textového editoru pro vaši aplikaci React nebylo snadné. S rostoucí velikostí aplikací je nezbytný produktivnější nástroj s bohatou podporou. S frameworky, jako je Quill, musí vývojáři projít zásadními hacky, aby opravili problémy s výkonem. Ale Slate.js byl navržen tak, aby věci usnadnil pomocí následujících funkcí:

Prvotřídní pluginy

Jiné editory bohatého textu založené na Reactu, jako je Quill a Draft, nabízejí pluginy, které uživatelům poskytují další možnosti. Slate na druhou stranu uznává pluginy jako prvotřídní entity; základní funkce úprav je dokonce navržena jako samostatný plugin. To znamená, že můžete zcela změnit prostředí úprav, což vám umožní vyvíjet složité editory, jako je Medium nebo Dropbox, aniž byste se museli potýkat se standardními předpoklady knihovny.

Paralelně s DOM

DOM slouží jako základ pro datový model Slate. Dokument je hierarchický strom, který využívá výběry a rozsahy a zpřístupňuje všechny obvyklé manipulátory událostí. To znamená, že jsou možné sofistikované funkce, jako jsou tabulky a vnořené blokové nabídky. Slate může provádět téměř vše, co můžete dělat v DOM.

Model vnořeného dokumentu

Model dokumentu Slate, stejně jako samotný DOM, je vrstvený, rekurzivní strom. V závislosti na vašem případu použití můžete začlenit komplikované komponenty, jako jsou tabulky a vnořené blokové nabídky, jak jsme uvedli výše, nebo můžete věci zjednodušit pouhým použitím jediné úrovně hierarchie.

Bezstavové pohledy a neměnná data

Editor Slate je bezstavový a využívá neměnné datové struktury prostřednictvím React a Immutable.js, takže je mnohem snazší uvažovat o kódu a psát pluginy. Pro srovnání například Quill zpracovává své vlastní změny a neumožňuje uživatelům bránit úpravám. Quill nemůže zabránit změně, ale přepíše obsah, kdykoli se hodnota liší od stávajícího stavu.

Jádro bez schématu

Základní logika Slate nevytváří žádné předpoklady o struktuře dat, která budete měnit, takže v knihovně nejsou žádné předpoklady, které by vás zaskočily, když se potřebujete posunout za hranice nejzákladnějších případů použití. To může způsobit vážné problémy s výkonem při práci s Quill a Draft.js.

Jasné základní hranice

Díky designu založenému na zásuvných modulech a jádru bez schématu je hranice mezi „jádrem“ a „vlastním“ mnohem zřetelnější, což znamená, že základní prostředí se nezasekne v okrajových případech.

Intuitivní změny

Břidlicové texty jsou upravovány pomocí „změn“, které mají být na vysoké úrovni a jsou jednoduché na vytvoření a pochopení, což umožňuje, aby vlastní funkce byly co nejvýraznější. To výrazně zlepšuje vaši schopnost uvažovat o vašem kódu.

Datový model připravený pro spolupráci

Datový formát Slate je navržen tak, aby umožňoval společné úpravy, takže vývojáři nemusí vše přehodnocovat, pokud se rozhodnete, že váš editor bude spolupracovat.

Slate.js v akci

Nyní se podívejme na Slate v akci vytvořením jednoduchého textového editoru. Abychom mohli začít, musíme vytvořit nový projekt React; k tomu použijeme aplikaci Create React. Spusťte níže uvedený příkaz:

>npx create-react-app rich-text-editor

Zatímco jsou nainstalovány potřebné balíčky, můžete si připravit šálek kávy. Po dokončení instalace nainstalujte tři požadované balíčky pro naši implementaci Slate pomocí příkazu níže:

npm i --save slate slate-react slate-history

Poté spusťte aplikaci:

npm start

Dále otevřete App.js komponentu a importujte naše nainstalované balíčky:

import React, { useMemo, useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

Dalším krokem je vytvoření nového Editor objekt. Použijeme useEditor háček, aby byl náš editor stabilní napříč rendery. Poté vytvoříme stav pro zpracování vstupu v našem editoru s odstavcem a nějakým fiktivním textem:

const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
    {
      type: 'paragraph',
      children: [{ text: 'I am a Slate rich editor.' }],
    },
  ])

Pojďme nyní sledovat náš editor Slate, jeho pluginy, jeho hodnotu, jeho výběr a všechny změny provedené v editoru vykreslením poskytovatele kontextu Slate. Poté vykreslete <Editable> komponent v našem kontextu React.

<Editable> komponenta se chová podobně jako contentEditable komponent v Reactu. Vykreslí upravitelný textový dokument pro nejbližší editor kontextu, kdykoli je vykreslen. Upravte metodu vykreslování pomocí kódu níže:

return (
    <Slate
      editor={editor}
      value={value}
      onChange={newValue => setValue(newValue)}
    >
      <Editable />
    </Slate>
  )

Nyní, když máte svůj textový editor, otestujte aplikaci na localhost:3000 ve vašem oblíbeném prohlížeči.

Proč Slate.js?

Slate byl vytvořen, aby řešil problémy, s nimiž se mohou vývojáři setkat při vytváření rozsáhlých aplikací pomocí Quill a Draft.js. Byl navržen tak, aby transformoval tvorbu dokumentu provedením úprav, které jsou nezbytné pro vývoj pokročilého chování. To se u Quill nebo Draft často ukázalo jako příliš složité.

Quill je nepochybně redaktorem; můžete začít, aniž byste cokoliv změnili. Pokud se však dostanete nad rámec nejzákladnějších případů použití, můžete narazit na určité problémy s výkonem, které se staly uznanou vadou.

Na druhé straně Slate byl navržen tak, aby usnadnil skutečnou produktivitu tím, že vám poskytuje flexibilitu, abyste mohli dělat, co si vyberete. Slate nabízí sofistikované integrace s Markdown, Dokumenty Google a Medium, které umožňují bezproblémovou spolupráci se spoluhráči.

Umožňuje provádět složité operace, jako je přidávání tabulek a vkládání obrázků a seznamů s odrážkami do těchto tabulek. Slate.js umožňuje serializaci do HTML, Markdown a dalších formátů. Jednoduché úkoly, jako je převod dokumentu do HTML nebo Markdown, jsou mnohem snazší s méně standardním kódem.

Se vším, co bylo řečeno, rozhodně stojí za to vyzkoušet Slate.js.

Nahradí Slate Quill a Draft.js?

Abych byl upřímný, nemusí tomu tak být. Slate.js je stále v beta verzi, což znamená, že stabilní verze ještě nebyla vydána. Vaše aplikace může selhat nebo některé funkce nemusí fungovat správně.

I přes jejich nedokonalosti jsou Quill a Draft.js ve výrobě již dlouhou dobu. A jakkoli bychom si jinak přáli, v programovacích jazycích neexistuje nic takového jako dokonalost. Navíc pro organizaci není snadné změnit svůj systém na něco zcela nového během krátké doby.

Nakonec Slate nebyl důsledně používán pro produkční aplikace a nebylo prokázáno, že zvládá nejednoznačné úkoly, které ukazují, že Quill a Draft jsou neefektivní.

Možná za rok nebo tak nějak začneme od společností a vývojářů slyšet o jejich zkušenostech s Slate – jak překonali známé nedostatky v Quill and Draft. Možná to komunita za tím upraví do bodu, kdy to bude skutečně životaschopné řešení. Nahradí Quill and Draft? Zatím to nemůžeme říct.

Přidáváte nové knihovny JS pro zlepšení výkonu nebo vytváření nových funkcí? Co když dělají opak?

Není pochyb o tom, že frontendy jsou stále složitější. Při přidávání nových knihoven JavaScriptu a dalších závislostí do své aplikace budete potřebovat větší přehled, abyste zajistili, že vaši uživatelé nenarazí na neznámé problémy.

LogRocket je řešení pro monitorování frontendových aplikací, které vám umožní přehrát chyby JavaScriptu, jako by se staly ve vašem vlastním prohlížeči, takže můžete na chyby reagovat efektivněji.

LogRocket funguje perfektně s jakoukoli aplikací, bez ohledu na rámec, a má pluginy pro přihlášení dalšího kontextu z Redux, Vuex a @ngrx/store. Namísto hádání, proč k problémům dochází, můžete agregovat a hlásit, v jakém stavu byla vaše aplikace, když k problému došlo. LogRocket také monitoruje výkon vaší aplikace a hlásí metriky, jako je zatížení procesoru klienta, využití paměti klienta a další.

Budujte sebevědomě — Začněte sledovat zdarma.