HTML-Addon: Warum das Kopieren grundlegender Browserfunktionen Sinn machte

(10. Dezember 2020)

Das HTML-Addon für Storybook macht das, was moderne Browser seit Jahren machen. Trotzdem ist es überraschend nützlich und nähert sich 100.000 Downloads. Der leitende Entwickler von Whitespace Fredrik Johansson erklärt, warum.

Animierte Vorschau des HTML-Addons in Aktion

Die Idee entstand aus einem Kundenprojekt, das wir für den schwedischen Webplattform-Anbieter Episerver durchgeführt haben. Unser Team baute eine Komponentenbibliothek auf, die das interne Team von .NET-Entwicklern auf episerver.com implementieren würde. Sie würden die Komponenten in einer für Episerver spezifischen Vorlagensprache schreiben und wollten einen einfacheren Zugriff auf den HTML-Code – ohne mit React zu ringen.

Das Schreiben eines Addons für Storybook erwies sich als recht unkompliziert, und es gibt eine Kurzanleitung zur Vorgehensweise. In weniger als einem Tag war die erste Version des HTML-Addons fertig. Aus einer Laune heraus habe ich es zu Whitespaces Github hinzugefügt, mit der Möglichkeit, dass andere es auch nützlich finden. Bislang wurden im Jahr 2020 fast 100.000 Downloads durchgeführt.

Was macht das HTML-Addon?

Es wird ein Bereich hinzugefügt, in dem der HTML-Code der Komponente angezeigt wird, die Sie sich ansehen im Märchenbuch. So einfach ist das.

Technisch gesehen verwendet das Addon die Browser-API (insbesondere innerHTML), um den resultierenden HTML-Code von Komponenten abzurufen, die in verschiedenen Frameworks geschrieben wurden. Dies erfolgt automatisch, wenn das DOM aktualisiert wird, entweder beim Wechseln zwischen Storys oder beim Ändern der Ausgabe des aktuellen über Steuerelemente oder Regler. Das Markup wird dann über Prettier verarbeitet, um es lesbar zu machen.

Screenshot des HTML-Addon-Panels

Warum verwenden wir das Addon?

Zuerst sah ich keinen Vorteil darin, ein Addon zu erstellen, das lediglich HTML anzeigt. Seit Jahren ist das Markup für einzelne Komponenten über die Entwicklungswerkzeuge in modernen Browsern sichtbar. Warum also das Rad neu erfinden? Um ehrlich zu sein, war das Erstellen des Addons eher eine Frage der Belustigung unserer Account-Manager.

Die Zeit hat mich jedoch (ausnahmsweise) als falsch erwiesen.

Das Addon vereinfacht drei allgemeine Aufgaben bei Whitespace:

  1. Handovers. Wir arbeiten oft für Technologieunternehmen mit internen Backend-Entwicklern. Der direkte Zugriff auf HTML, ohne das Projekt einrichten zu müssen, spart Zeit. Darüber hinaus ist unsere Lieferung völlig unabhängig von der Wahl der Vorlagensprache durch unsere Kunden.
  2. Qualitätsprüfungen. Wenn wir Eingabehilfen testen, erhalten unsere Eingabehilfen-Spezialisten direkten Zugriff auf das HTML-Markup.
  3. Fehlerbehebung. Der sofortige Zugriff auf HTML erleichtert die Fehlersuche erheblich. Wenn Sie die Entwickler-Tools des Browsers nicht öffnen müssen, wird ein wenig Reibung beseitigt. Und wenn Sie Ihren Lebensunterhalt mit Code verdienen, ist es auf jeden Fall eine gute Sache, weniger Reibung zu haben.

Es läuft darauf hinaus, dass mehr UI-Entwickler bei Whitespace (und anderswo) HTML kennen als React. Und selbst für einen begeisterten React-Entwickler wie mich ist HTML oft einfacher. Das HTML-Addon destilliert den Code auf das Wesentliche und erleichtert die Arbeit für eine Vielzahl von Personen.

Wie installiere ich ihn?

Fügen Sie das HTML-Addon mit npm :

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

Registrieren Sie das Addon in .storybook / main.js :

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

Weitere Informationen finden Sie in der Readme-Datei auf GitHub .

Wie sieht der Plan aus? vorwärts?

Ich bin überrascht und zufrieden mit der positiven Aufnahme des Addons. Ich bekomme regelmäßig Feedback über Github und verbringe jeden Monat ein paar Stunden damit, Fehler zu beheben. Wir haben auch Beiträge von anderen Personen gesehen, die eine große Hilfe bei der Aktualisierung neuer Versionen des Storybook-Kerns waren.

Wenn Sie Funktionen hinzufügen möchten, zögern Sie nicht, einen Pull durchzuführen Anfrage – oder melde dich bei Github oder über Whitespaces Twitter .

Mach mit

Schau dir die Addon-Katalog für weitere Möglichkeiten zum Anpassen Ihres Storybooks. Um die neuesten Addons und Storybook-Nachrichten zu erhalten, melden Sie sich bei der Storybook-Mailingliste an. Schauen Sie sich das Storybook im GitHub an und nehmen Sie am Discord -Chat teil.

Ursprünglich veröffentlicht unter https : //whitespace.se am 10. Dezember 2020.