HTML-add-on: waarom het kopiëren van standaard browserfuncties volkomen logisch was

(10 dec.2020)

De HTML-add-on voor Storybook doet wat moderne browsers al jaren doen. Toch is het verrassend handig en nadert het 100K downloads. Whitespaces hoofdontwikkelaar Fredrik Johansson legt uit waarom.

Animatievoorbeeld van de HTML-add-on in actie

Het idee is ontstaan ​​in een klantproject dat we deden voor de Zweedse webplatformverkoper Episerver. Ons team was bezig met het bouwen van een componentenbibliotheek die hun interne team van .Net-ontwikkelaars zou implementeren op episerver.com. Ze zouden de componenten schrijven in een sjabloontaal die specifiek is voor Episerver en wilden gemakkelijkere toegang tot de HTML-code – zonder te worstelen met React.

Het schrijven van een add-on voor Storybook bleek vrij eenvoudig te zijn, en er is een korte handleiding over hoe u dit moet doen. In minder dan een dag was de eerste versie van de HTML-add-on klaar. In een opwelling heb ik het toegevoegd aan Whitespaces Github, voor de kans dat anderen het ook nuttig zouden vinden. En tot nu toe hebben we in 2020 bijna 100.000 downloads gehad.

Wat doet HTML Add-on?

Het voegt een paneel toe dat de HTML-code toont van de component die u bekijkt in Storybook. Zo simpel is het.

Technisch gezien gebruikt de add-on de browser-API (met name innerHTML) om de resulterende HTML op te halen van componenten die in verschillende frameworks zijn geschreven. Dit gebeurt automatisch wanneer de DOM wordt bijgewerkt, hetzij bij het schakelen tussen verhalen of het wijzigen van de uitvoer van de huidige via bedieningselementen of knoppen. De opmaak wordt vervolgens verwerkt via Prettier om het leesbaar te maken.

Screenshot van het HTML-add-onpaneel

Waarom gebruiken we de add-on?

In eerste instantie zag ik het voordeel niet in van het maken van een add-on die alleen HTML laat zien. Al jaren is markup voor individuele componenten zichtbaar via de dev-tools in moderne browsers, dus waarom zou je het wiel opnieuw uitvinden? Om eerlijk te zijn, het bouwen van de add-on was meer een kwestie van onze accountmanager op de hoogte houden.

De tijd heeft me echter (voor een keer) ongelijk bewezen.

De add-on vereenvoudigt drie veelvoorkomende taken bij Whitespace:

  1. Overdrachten. We werken vaak voor technologiebedrijven met inhouse backend-ontwikkelaars. Directe toegang krijgen tot HTML zonder het project op te zetten, bespaart tijd. Bovendien maakt het onze levering volledig onafhankelijk van de keuze van de sjabloontaal van onze klanten.
  2. Kwaliteitsaudits. Wanneer we toegankelijkheidstests uitvoeren, krijgen onze toegankelijkheidsspecialisten direct toegang tot de HTML-opmaak.
  3. Probleemoplossing. Directe toegang tot de HTML maakt het opsporen van bugs veel gemakkelijker. Als u de ontwikkelaarstools van de browser niet hoeft te openen, wordt een klein beetje wrijving verwijderd. En als je codeert voor de kost, is het hebben van minder frictie zeker een goede zaak.

Het komt erop neer dat meer UI-ontwikkelaars bij Whitespace (en elders) HTML kennen dan React. En zelfs voor een enthousiaste React-ontwikkelaar zoals ik, is HTML vaak eenvoudiger. De HTML-add-on distilleert de code tot de essentie, en maakt het werk voor verschillende mensen gemakkelijker.

Hoe installeer ik het?

Voeg de HTML-add-on toe aan je Storybook met npm :

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

Registreer de add-on in .storybook / main.js :

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

Er staat meer informatie in het leesmij-bestand op GitHub .

Wat is het plan doorsturen?

Ik ben verrast en blij met de positieve ontvangst van de add-on. Ik krijg regelmatig feedback via Github en besteed elke maand een paar uur aan het oplossen van bugs. We hebben ook bijdragen van andere mensen gezien die een grote hulp zijn geweest om het up-to-date te houden met nieuwe versies van Storybook core.

Als je functies wilt toevoegen, aarzel dan niet om een ​​pull uit te voeren verzoek – of stuur me een bericht op Github of via Whitespaces Twitter .

Doe mee

Bekijk de Addon Catalog voor meer manieren om uw Storybook aan te passen. Om de laatste add-ons en Storybook-nieuws te ontvangen, meldt u zich aan voor de Storybook-mailinglijst. Bekijk Storybook op GitHub en neem deel aan de Discord -chat.

Oorspronkelijk gepubliceerd op https : //whitespace.se op 10 december 2020.