Doplněk HTML: Proč kopírování základních funkcí prohlížeče dávalo smysl

(10. prosince 2020)

The Doplněk HTML pro příběh dělá to, co moderní prohlížeče dělají roky. Přesto je překvapivě užitečný a blíží se ke 100 tis. Stažení. Vedoucí vývojář Whitespace Fredrik Johansson vysvětluje proč.

Animovaný náhled doplňku HTML v akci

Myšlenka vznikla v klientském projektu, který jsme dělali pro švédského dodavatele webové platformy Episerver. Náš tým budoval knihovnu komponent, kterou by jejich vlastní tým vývojářů .Net devs implementoval na episerver.com. Byli by psát komponenty v templatovacím jazyce specifickém pro Episerver a chtěli snadnější přístup k HTML kódu – bez zápasů s Reactem.

Psaní doplňku pro Storybook se ukázalo být celkem jednoduché a existuje krátký průvodce , jak na to. Za méně než jeden den byla připravena první verze doplňku HTML. Z rozmaru jsem ho přidal do GitHubu Whitespace, mimo jiné, že to ostatním může také připadat užitečné. A zatím jsme v roce 2020 zaznamenali téměř 100 000 stažení.

Co dělá doplněk HTML?

Přidá panel, který zobrazuje HTML kód komponenty, na kterou se díváte v pohádkové knize. Je to tak jednoduché.

Z technického hlediska doplněk používá API prohlížeče (konkrétně innerHTML) k načtení výsledného HTML komponent napsaných v různých rámcích. To se provádí automaticky při aktualizaci modelu DOM, ať už při přepínání mezi články nebo při změně výstupu aktuálního pomocí ovládacích prvků nebo knoflíků. Značka je poté zpracována prostřednictvím Prettier, aby byla čitelná.

Screenshot panelu doplňků HTML

Proč používáme doplněk?

Nejprve jsem neviděl výhodu vytvoření doplňku, který pouze zobrazuje HTML. Značky pro jednotlivé komponenty jsou již roky viditelné pomocí nástrojů pro vývojáře v moderních prohlížečích, tak proč objevovat nové kolo? Upřímně řečeno, vytvoření doplňku bylo spíše otázkou humouringu našeho účtu.

Čas mi však (pro jednou) ukázal, že se mýlím.

Doplněk zjednodušuje tři běžné úkoly na mezerách:

  1. Předání. Často pracujeme pro technologické společnosti s interními backendovými vývojáři. Získání přímého přístupu k HTML bez nutnosti nastavování projektu šetří čas. Kromě toho je naše dodávka zcela nezávislá na výběru šablonového jazyka našich klientů.
  2. Audity kvality. Když provádíme testování přístupnosti, naši specialisté na přístupnost získají přímý přístup k značkám HTML.
  3. Odstraňování problémů. Okamžitý přístup k HTML značně usnadňuje hledání chyb. Není nutné otevírat nástroje pro vývoj v prohlížeči, což odstraňuje malé tření. A pokud si kódujete na živobytí, mít menší tření je rozhodně dobrá věc.

Spadá to do skutečnosti, že více vývojářů uživatelského rozhraní ve Whitespace (a jinde) zná HTML než React. A dokonce i pro vášnivého vývojáře React, jako jsem já, je HTML často přímočařejší. Doplněk HTML destiluje kód do podstaty a usnadňuje práci mnoha lidem.

Jak jej nainstaluji?

Přidejte doplněk HTML do svého pohádkového příběhu pomocí npm :

npm i --save-dev @whitespace/storybook-addon-html

Zaregistrujte doplněk v .storybook / main.js :

module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};

V readme na GitHubu je více informací.

Jaký bude plán vpřed?

Jsem překvapen a spokojen s pozitivním přijetím addonu. Pravidelně dostávám zpětnou vazbu prostřednictvím Githubu a každý měsíc trávím několik hodin opravováním chyb. Také jsme viděli příspěvky od jiných lidí, které nám pomohly udržet ho v aktuálním stavu s novými verzemi jádra Storybooku.

Pokud chcete přidat funkce, neváhejte a zatáhněte žádost – nebo mě zasáhnout na Githubu nebo prostřednictvím Twitteru Whitespace .

Zapojte se

Podívejte se na Addon Catalog pro další způsoby, jak si přizpůsobit svůj příběh. Chcete-li získat nejnovější doplňky a novinky ze Storybooku, zaregistrujte se do seznamu adresářů Storybook. Podívejte se na Storybook na GitHub a připojte se k chatu Discord .

Původně publikováno na https : //whitespace.se 10. prosince 2020.