Thomas Allmer, Entwickler von mdjs, im Interview

„mdjs ist ein mächtige Idee, die vermutlich überall, wo derzeit Markdown verwendet wird, eingebaut werden kann“
Keine Kommentare

Ausführbares JavaScript in Markdown integrieren: Das macht mdjs möglich! Das neue Projekt wurde von Thomas Allmer ins Leben gerufen. Im Interview erklärt der Entwickler, was unter der Haube von mdjs steckt und wo man damit bereits arbeiten kann.

Entwickler: Hallo Thomas und danke, dass du dir die Zeit für dieses Interview genommen hast. mdjs ist ja noch ein recht neues Projekt: Wie bist du denn eigentlich auf die Idee zu mdjs gekommen?

Thomas Allmer: Ich schreibe schon seit vielen Jahren Dokumentationen für die unterschiedlichsten Systeme und habe hier verschiedene Formate verwendet (HTML, MD, Storybook StoriesOf, MDX, …). Alle haben sich nicht wirklich „gut und einfach“ angefühlt. Entweder waren sie zu aufwendig beim schreiben, zu eingeschränkt in den Möglichkeiten oder zu komplex in der Umsetzung. Markdown selbst hat sich als beste Option erwiesen, weil es wirklich fast allgegenwärtig ist – nur die Möglichkeit, JavaScript kontrolliert auszuführen, fehlte.

Wir wollten ein Format haben das…:

  • technisch „einfach“ ist
  • dem Prinzip des „Progressive Enhancements“ folgt
  • gültige Markdown-Syntax verwendet
  • Code-Highlighting in allen Editoren ohne zusätzliche Tools unterstützt
  • gut auf GitHub/GitLab/… aussieht

Entwickler: Was steckt unter der Haube von mdjs?

Allmer: mdjs basiert auf einer Idee, die fast zu einfach klingt, um wahr zu sein. Alles was man braucht, ist ein Markdown-„Code Fence Block“, den man mit der Extra-Information „js script“ versieht. Der Code innerhalb diese Blocks wird ausgeführt und kann verwendet werden, um z. B. eine Web Component zu laden, die dann direkt im Markdown-Code verwendet werden kann. Man beachte dabei, dass HTML von Markdown direkt unterstützt wird.

Das Ganze schaut dann so aus:

 
```js script
import './my-component.js';
```

# This is my component
<my-component></my-component>

Weiter gibt es eine spezielles Demo-Format, das den Code nicht nur ausführt, sondern auch mit einem Rahmen und einem „Show Code“-Button versehen kann.

 
```js script
import './my-component.js';
```
# This is my component
```js preview-story
export const demo = () => `<my-component header="from attribute"></my-component>`
```

Technisch gesehen ist mdjs ein Plug-in von Remark, einem sehr bekannten Markdown-Parser. Das unterstreicht nochmal, dass es kein komplett eigenständiges Format ist, sondern Markdown erweitert. In dem oberen Beispiel würde mdjs das HTML und das JavaScript separat bereitstellen und kann so dann von weiteren Tools zu einer wirklichen Web- oder Dokumentationsseite umgewandelt werden.

Entwickler: Mit welchen Frameworks oder Tools kann man mdjs bereits verwenden?

Allmer: Man kann lokale Markdown-Dateien und mdjs via es-dev-server darstellen. Auch kann man mehrere Dateien in einem Storybook zusammenfassen. Online kann man es über webcomponents.dev verwenden. Über eine Chrome Extension ist es außerdem möglich, mdjs direkt auf GitHub einzusetzen, um interaktive Demos in Read-Mes zu sehen oder in Issues darzustellen.

mdjs ist ein mächtige Idee, die technisch nicht aufwendig ist und kann so vermutlich überall, wo derzeit Markdown verwendet wird, auch eingebaut werden.

Entwickler: Für welche Anwendungsfälle würdest du die Verwendung empfehlen – gibt es noch Grenzen?

Allmer: Der aktuelle Hauptanwendungsfall liegt in der Dokumentation von visuellen Elementen mit interaktiven Demos.

Jedoch ist mdjs auch sehr gut dazu geeignet, Bug-Reports mit Beispielen reproduzierbar zu machen. Selbst komplette Webseiten, die ihre Inhalte in Markdown schreiben wollen, können von der Möglichkeit profitieren, JavaScript auszuführen oder Web Components laden zu können. Ich denke wir werden noch viele weiter Anwendungsfälle dafür finden.

Entwickler: Was fehlt mdjs noch, das du gern in Zukunft einbauen würdest?

Allmer: Das Demo-Format sieht derzeit noch etwas „einfach“ aus. Das kann man sicher optisch und funktionell noch verbessern. Auch ist es derzeit nicht ganz einfach, komplette Webseiten via mdjs zu erstellen. Das möchten wir möglich machen. mdjs verwendet derzeit auch immer lit-html im Demo-Format als Renderer. Hier könnte man das Format noch erweitern, um eigene Renderer zu erlauben.

Ansonsten sind wir sehr offen für Feedback. Sollte jemand Ideen oder Probleme haben, bitte her damit: https://github.com/open-wc/open-wc

Entwickler: Vielen Dank für das Interview!

Thomas Allmer ist Softwareentwickler und Gründer von Open Web Components. Er ist ein Verfächter von „buildless development“ und arbeitet gerne so eng wie Möglich mit „the Platform“ (Browser). Er genießt open source und ist außerdem ein core contributor für ING’s Lion web components.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -