HTML-tilføjelse: Hvorfor kopiering af grundlæggende browserfunktioner gav perfekt mening

(10. dec. 2020)

HTML-tilføjelse til historibog gør, hvad moderne browsere har gjort i årevis. Alligevel er det overraskende nyttigt og nærmer sig 100K downloads. Whitespaces hovedudvikler Fredrik Johansson forklarer hvorfor.

Animeret forhåndsvisning af HTML-addon i aktion

Idéen stammer fra et klientprojekt, som vi lavede for den svenske leverandør af webplatform Episerver. Vores team byggede et komponentbibliotek, som deres interne team af .Net-devs ville implementere på episerver.com. De ville skrive komponenterne på et skabelonsprog, der er specifikt for Episerver, og ville have lettere adgang til HTML-koden – uden at kæmpe med React.

At skrive et tilføjelsesprogram til Storybook viste sig at være ret ligetil, og der er en kort vejledning om, hvordan du gør det. På mindre end en dag var den første version af HTML-tilføjelsen klar. På et indfald tilføjede jeg det til Whitespaces Github, hvis andre måske også finder det nyttigt. Og indtil videre i 2020 har vi haft næsten 100.000 downloads.

Hvad gør HTML Addon?

Det tilføjer et panel, der viser HTML-koden for den komponent, du ser på i Storybook. Det er så simpelt som det.

Teknisk set bruger tilføjelsesprogrammet browser-APIen (specifikt innerHTML) til at hente den resulterende HTML af komponenter skrevet i forskellige rammer. Dette gøres automatisk, når DOM opdateres, enten når du skifter mellem historier eller ændrer output for den aktuelle gennem kontrol eller drejeknapper. Markeringen behandles derefter gennem Prettier for at gøre det læsbart.

Skærmbillede af HTML-tilføjelsespanelet

Hvorfor bruger vi addon?

Først så jeg ikke fordelen ved at lave et addon, der kun viser HTML. I årevis har markering af individuelle komponenter været synlig via dev-værktøjerne i moderne browsere, så hvorfor genopfinde hjulet? For at være ærlig var bygning af tilføjelsen mere et spørgsmål om at nedfælde vores kontoudførelse.

Tiden har dog (for en gangs skyld) vist mig forkert.

Tilføjelsen forenkler tre almindelige opgaver. på hvidt mellemrum:

  1. Overdragelser. Vi arbejder ofte for teknologivirksomheder med interne backend-devs. At få direkte adgang til HTML uden at skulle opsætte projektet sparer tid. Derudover gør det vores levering helt uafhængig af vores kunders valg af skabelonsprog.
  2. Kvalitetsrevision. Når vi foretager tilgængelighedstest, får vores tilgængelighedsspecialister direkte adgang til HTML-markeringen.
  3. Fejlfinding. Øjeblikkelig adgang til HTML gør bugjagt så meget lettere. Ikke at skulle åbne browserudviklingsværktøjerne fjerner en lille smule friktion. Og hvis du koder for at leve, er det bestemt en god ting at have mindre friktion.

Det koger ned til det faktum, at flere UI-udviklere på Whitespace (og andre steder) kender HTML end React. Og selv for en ivrig React-dev som mig er HTML ofte mere ligetil. HTML-tilføjelsen destillerer koden til essensen og gør arbejdet lettere for en række mennesker.

Hvordan installerer jeg det?

Føj HTML-tilføjelsen til din historiebog med npm :

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

Registrer tilføjelsen i .storybook / main.js :

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

Der er flere oplysninger i readme over på GitHub .

Hvad planen går fremad?

Jeg er overrasket og glad for den positive modtagelse af addon. Jeg får regelmæssig feedback via Github og bruger et par timer hver måned på at rette fejl. Vi har også set bidrag fra andre mennesker, som har været en stor hjælp til at holde det opdateret med nye versioner af Storybook-kernen.

Hvis du vil tilføje funktioner, tøv ikke med at gøre et træk anmodning – eller slå mig op på Github eller via Whitespaces Twitter .

Bliv involveret

Tjek Addon Catalog for flere måder at tilpasse din historiebog på. For at få de seneste tilføjelser og Storybook-nyheder, tilmeld dig Storybook-postlisten. Tjek Storybook på GitHub og deltag i Discord chat.

Oprindeligt offentliggjort på https : //whitespace.se den 10. december 2020.