{"id":34791,"date":"2019-10-31T22:00:25","date_gmt":"2019-10-31T19:00:25","guid":{"rendered":"https:\/\/prohoster.info\/blog\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki\/"},"modified":"2019-10-31T22:00:25","modified_gmt":"2019-10-31T19:00:25","slug":"zhivye-gajdlajny-mdx-i-drugie-frejmvorki","status":"publish","type":"post","link":"https:\/\/prohoster.info\/de\/blog\/administrirovanie\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki","title":{"rendered":"Aktuelle Richtlinien \u2013 MDX und andere Frameworks","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Sie k\u00f6nnen das beste Open-Source-Projekt haben, aber ohne gute Dokumentation wird es wahrscheinlich nie richtig durchstarten. Gute Dokumentation im B\u00fcro hilft Ihnen, nicht st\u00e4ndig die gleichen Fragen beantworten zu m\u00fcssen. Sie stellt auch sicher, dass Mitarbeiter, die das Unternehmen verlassen oder die Rolle \u00e4ndern, sich im Projekt zurechtfinden k\u00f6nnen. Lebensnahe Richtlinien helfen, die Integrit\u00e4t der Daten zu gew\u00e4hrleisten. <\/p>\n

<\/a><\/noindex><\/p>\n

Wenn Sie l\u00e4ngere Texte schreiben m\u00fcssen, ist Markdown eine hervorragende Alternative zu HTML. Manchmal reicht die Syntax von Markdown nicht aus. In diesem Fall k\u00f6nnen wir HTML innerhalb von Markdown verwenden, z. B. f\u00fcr benutzerdefinierte Elemente. Wenn Sie also ein Design-System mit nativen Webkomponenten erstellen, lassen sich diese einfach in die Textdokumentation integrieren. Wenn Sie React (oder ein anderes JSX-Framework wie Preact oder Vue) verwenden, k\u00f6nnen Sie dasselbe auch mit MDX tun. <\/p>\n

<\/p>\n

Dieser Artikel ist ein umfassender \u00dcberblick \u00fcber Werkzeuge zur Erstellung von Dokumentationen und zur Erstellung von Richtlinien. Nicht alle hier aufgef\u00fchrten Werkzeuge verwenden MDX, doch es wird zunehmend in Dokumentationswerkzeuge integriert.<\/p>\n

<\/p>\n

Was ist MDX?<\/h2>\n

<\/p>\n

Die Datei .mdx<\/code> hat die gleiche Syntax wie Markdown, erlaubt jedoch das Importieren interaktiver JSX-Komponenten und deren Einbettung in Ihren Inhalt. Die Unterst\u00fctzung f\u00fcr Vue-Komponenten befindet sich in der Alpha-Phase. Um mit MDX zu beginnen, reicht es aus, \u201eCreate React App\u201c zu installieren. Es gibt Plugins f\u00fcr Next.js und Gatsby. Die n\u00e4chste Version von Docusaurus (Version 2) wird ebenfalls eine integrierte Unterst\u00fctzung bieten.<\/p>\n

<\/p>\n

Dokumentation mit Docusaurus erstellen<\/h2>\n

<\/p>\n

Docusaurus wurde von Facebook entwickelt. Sie nutzen es in jedem ihrer Open-Source-Projekte, au\u00dfer React. Au\u00dferhalb des Unternehmens wird es auch von Redux, Prettier, Gulp und Babel verwendet.<\/p>\n

<\/p>\n

\"AktuelleProjekte, die Docusaurus verwenden.<\/em><\/p>\n

<\/p>\n

Docusaurus kann verwendet werden, um jede<\/em> Dokumentation zu schreiben, nicht nur zur Beschreibung von Frontend. Es basiert auf React, aber um es zu nutzen, m\u00fcssen Sie nicht mit React vertraut sein. Es nimmt Ihre Markdown-Dateien, f\u00fcgt eine Prise Magie hinzu, und schon ist die gut strukturierte, formatierte und lesbare Dokumentation mit ansprechendem Design fertig. <\/p>\n

<\/p>\n

\"Aktuelle
\nAuf der Website von Redux kann man sich die Standardvorlage von Docusaurus anschauen.<\/em><\/p>\n

<\/p>\n

Mit Docusaurus erstellte Websites k\u00f6nnen auch einen Markdown-basierten Blog enthalten. Die Syntaxhervorhebung erfolgt sofort durch Prism.js. Obwohl Docusaurus erst vor relativ kurzer Zeit auf den Markt kam, wurde er 2018 von StackShare als das beste Tool ausgezeichnet. <\/p>\n

<\/p>\n

Weitere Optionen zur Erstellung von Inhalten<\/h2>\n

<\/p>\n

Docusaurus wurde speziell zur Erstellung von Dokumentationen entwickelt. Nat\u00fcrlich gibt es unz\u00e4hlige M\u00f6glichkeiten, eine Website zu erstellen \u2014 Sie k\u00f6nnen Ihre eigene L\u00f6sung in jeder Sprache oder CMS bereitstellen oder einen statischen Website-Generator verwenden.<\/p>\n

<\/p>\n

Zum Beispiel nutzen die Dokumentation f\u00fcr React, das Designsystem von IBM, Apollo und Ghost CMS Gatsby \u2014 einen statischen Website-Generator, der h\u00e4ufig f\u00fcr Blogs verwendet wird. Wenn Sie mit Vue arbeiten, ist VuePress eine gute Option f\u00fcr Sie. Eine weitere M\u00f6glichkeit ist die Verwendung eines mit Python geschriebenen Generators \u2014 MkDocs. Dieser ist Open Source und wird \u00fcber eine YAML-Datei konfiguriert. GitBook ist ebenfalls eine gute Wahl, aber kostenlos nur f\u00fcr \u00f6ffentliche und nicht-kommerzielle Teams. Au\u00dferdem k\u00f6nnen Sie einfach Markdown-Dateien hochladen, indem Sie Git verwenden und mit ihnen in GitHub arbeiten. <\/p>\n

<\/p>\n

Dokumentation von Komponenten: Docz, Storybook und Styleguidist<\/h2>\n

<\/p>\n

Richtlinien, Designsysteme, Komponentenbibliotheken \u2013 ganz gleich, wie Sie es nennen, dieses Konzept hat in letzter Zeit stark an Popularit\u00e4t gewonnen. Das Aufkommen von Komponentenframeworks wie React und der hier erw\u00e4hnten Tools hat sie von blo\u00dfen Eitelkeitsprojekten in n\u00fctzliche Werkzeuge verwandelt. <\/p>\n

<\/p>\n

Storybook, Docz und Styleguidist erf\u00fcllen alle denselben Zweck: Sie stellen interaktive Elemente dar und dokumentieren deren APIs. Ein Projekt kann Dutzende oder sogar Hunderte von Komponenten umfassen \u2013 jede mit unterschiedlichen Zust\u00e4nden und Stilen. Damit Komponenten wiederverwendet werden, m\u00fcssen die Anwender wissen, dass sie existieren. Dazu reicht es aus, die Komponenten zu katalogisieren. Richtlinien bieten eine durchsuchbare \u00dcbersicht \u00fcber all Ihre Komponenten. Das hilft, visuelle Konsistenz zu gew\u00e4hrleisten und Doppelarbeit zu vermeiden.<\/p>\n

<\/p>\n

Diese Werkzeuge bieten eine einfache M\u00f6glichkeit, verschiedene Zust\u00e4nde anzuzeigen. Es kann schwierig sein, jeden Zustand einer Komponente im Kontext einer realen Anwendung zu reproduzieren. Anstatt in der realen Anwendung herumzuklicken, ist es sinnvoll, eine separate Komponente zu entwickeln. Seltene Zust\u00e4nde (wie z.B. den Ladezustand) k\u00f6nnen modelliert werden. <\/p>\n

<\/p>\n

Neben der visuellen Darstellung verschiedener Zust\u00e4nde und einer Liste von Eigenschaften ist es oft notwendig, eine allgemeine Beschreibung des Inhalts zu schreiben \u2013 Designbegr\u00fcndungen, Anwendungsf\u00e4lle oder Beschreibungen der Ergebnisse von Benutzertests. Markdown ist sehr einfach zu erlernen \u2013 idealerweise sollten die Richtlinien eine gemeinsame Ressource f\u00fcr Designer und Entwickler sein. Docz, Styleguidist und Storybook bieten eine M\u00f6glichkeit, Markdown nahtlos mit Komponenten zu kombinieren.<\/p>\n

<\/p>\n

Docz<\/h2>\n

<\/p>\n

Momentan funktioniert Docz nur mit React, jedoch wird aktiv an der Unterst\u00fctzung von Preact, Vue und Web-Komponenten gearbeitet. Docz ist das neueste der drei Werkzeuge, hat jedoch auf Github bereits \u00fcber 14.000 Sterne gesammelt. Docz pr\u00e4sentiert zwei Komponenten \u2013 <Playground><\/code> und < Props ><\/code>. Sie werden in den Dateien importiert und verwendet. .mdx<\/code>. <\/p>\n

<\/p>\n

import { Playground, Props } from \"docz\";\nimport Button from \"..\/src\/Button\";\n\n## Sie k\u00f6nnen _Markdown_ **schreiben**\n### Sie k\u00f6nnen Komponenten importieren und verwenden\n\n