Styling Reagieren Sie Anwendungen mit Ant.Design

Ant (GitHub) ist weit mehr als ein React UI-Kit mit minimalistischer Designästhetik und jeder Komponente unter der Sonne. Es ist ein Kaninchenbau, der zu einem riesigen Labyrinth miteinander verbundener Bibliotheken führt, die von einem ernsthaften Ökosystem umgeben sind. Es gibt ein benutzerdefiniertes Build-Tool, das auf Webpack basiert und als Ant-Tool bezeichnet wird, mehrere CLI-Apps, Community-Scaffolds und ein vollständiges Framework (dva, das auch eine eigene CLI hat). Und die UI-Komponenten sind Miniprojekte für sich - Informationen zu den einzelnen Komponenten finden Sie in diesem Repo.

Viele dieser Bibliotheken, einschließlich der gesamten React-Animationsbibliothek, scheinen sehr aufpoliert zu sein. Und ich würde gerne mehr über sie erfahren, aber Ant hat eine Herausforderung: Der Großteil der Dokumentation ist auf Chinesisch.

Wie geht es deinem Chinesisch?

Lassen Sie mich vorab darauf hinweisen, dass die Komponentenbibliothek und ihr hervorragender Styleguide von großzügigen Freiwilligen ins Englische übersetzt wurden, sodass das UI-Kit vollständig verwendet werden kann. Und die Übersetzungsbemühungen zeigen die Absichten des Projekts, Ant einem breiteren Publikum zugänglich zu machen, und sind ein gutes Zeichen für Unternehmen, die eine Übernahme in Betracht ziehen.

Es gibt jedoch noch einige Sprachprobleme. Das Englisch ist manchmal verwirrend oder undurchsichtig. Der Betreuer der Bibliothek hat hier kommentiert, dass sie PRs zur Verbesserung der Dokumentation begrüßen, so dass dies eine großartige Möglichkeit sein könnte, sich an diesem großartigen Projekt zu beteiligen.

Viel Glück bei der Suche nach Problemen!

Ein weiteres Problem ist, dass Probleme in Ant.Design meist auf GitHub in Chinesisch abgelegt und diskutiert werden. Dies könnte ein Deal Breaker für Unternehmensanwendungen sein, aber ich bin mir nicht sicher, ob es einer für frühe Starts sein sollte, da Ant nur minimal verwendet werden kann, ohne intelligentere Funktionen wie die integrierte Formularvalidierung zu nutzen. Wenn Sie dennoch ein Problem oder einen Fehler in der Bibliothek finden, ist es schwierig, frühere Lösungen für Ihr Problem zu finden. Aus diesem Grund empfehle ich, das umgebende Ökosystem in dieser Phase nur minimal zu nutzen.

Schlacht getestet

Zu den gängigen UI-Bibliotheken für React gehören Material-UI, Semantic-UI, Foundation und Bootstrap (dies und das). Sie sind alle ziemlich ausgereift. Die Material-UI sollte hervorgehoben werden, da sie mit über 22.000 Sternenguckern und über 600 offenen Fragen die anderen massiv in den Schatten stellt. Aber es stellt sich heraus, dass Ant.Design auch ein überraschend würdiger Kandidat ist. Es wurde von einigen der am häufigsten genutzten Websites im Internet (Alibaba, Baidu) getestet und verfügt über einen brillanten Style-Guide, benutzerdefinierte Tools und natürlich einen umfassenden Katalog an Komponenten. Es sind zum Zeitpunkt des Schreibens nur 85 Fragen offen, was angesichts seiner Popularität eine gute Sache ist.

Machen wir also einen Rundgang durch die Bibliothek, um zu sehen, was sie zu bieten hat und wie Sie damit anfangen können.

Ameisen-Komponenten

Die Liste der Ameisenbestandteile ist schwindelerregend. Klar, es enthält die Grundlagen - Modale, Formulare (inline und vertikal), Navigationsmenüs, ein Rastersystem. Aber es enthält auch eine Menge Extras, wie ein @ mentioning-System, eine Timeline, Abzeichen, ein wirklich nettes Tischsystem und andere kleine ausgefallene Features, wie ein beteiligtes Adressfeld (siehe Habitual Residence-Feld). Schauen Sie sich das an - es bietet alles, was eine moderne Webanwendung mit einer geschmackvollen, minimalistischen Ästhetik tun sollte.

Design-Prinzipien

In der Dokumentation finden Sie einen schönen, übersichtlichen Abschnitt zu den Grundsätzen von Ant.Design. Ich fand es eine großartige Lektüre, da ich viel über UI / UX-Überlegungen nachdachte, insbesondere über den Abschnitt „Eine Einladung bereitstellen“, in dem verschiedene Möglichkeiten besprochen werden, Interaktionen für einen Benutzer sichtbar zu machen. Übrigens, wenn mir jemand ein gutes Buch über UX empfehlen kann, wäre ich dankbar.

Rastersystem

Das Ant-Layout-System besteht aus einem 24-Aliquot-Raster (ein großartiges neues Wort, das ich aus der übersetzten Dokumentation gelernt habe - es bedeutet Teile eines Ganzen) und einer separaten Layout-Komponente, die Sie verwenden können. Das Raster verwendet das bekannte Row / Col-System. Sie können jedoch auch eine Stütze mit dem Namen flex angeben, mit der Sie die Flexbox-Eigenschaften nutzen können, um eine ansprechende Benutzeroberfläche zu definieren. (Weitere Informationen zum Flex-Standard finden Sie in einem früheren Blogbeitrag von mir.)

Flexbox wird jetzt in nahezu jedem Browser vollständig unterstützt (mit teilweiser Unterstützung für IE 11 sowie für einige ältere mobile Browser), daher sollte die Verwendung in Ordnung sein. Wenn Ihr Kundenstamm hauptsächlich aus Internet Explorer-Benutzern besteht, was in einigen Branchen oder Ländern der Fall ist, sollten Sie auf die Verwendung von Flex Rows oder der Layout-Komponente verzichten, da Layout ausschließlich auf Flexbox basiert.

Das Layout enthält Komponenten für einen Sider, eine Kopfzeile, einen Inhalt und eine Fußzeile. Auch diese basieren streng auf Flexbox, daher gibt es hier keine andere Wahl - aber um ehrlich zu sein, ich bin mir nicht sicher, was diese Komponenten Ihnen zusätzlich zur Verwendung des standardmäßigen Row / Col-Rastersystems bieten, abgesehen von ein paar zusätzlichen Requisiten, die Sie herstellen können Verwendung und möglicherweise einige eingebaute Design-Optionen. Alles in allem scheint es mir nicht sehr nützlich zu sein.

Raster Requisiten

Spaltenelemente können mit einer Spannenstütze geliefert werden, um zu definieren, wie viele Aliquots eine Spalte aufnimmt, und mit einer Versatzstütze, um einen optionalen Versatz zu definieren. Row kann eine Rinnenstütze verwenden, um den Abstand zwischen Spalten in einer Zeile zu definieren (in Pixel, nicht in Aliquots).

Hier ist ein UI-Beispiel aus einem Nebenprojekt von mir. Es enthält eine Zeile mit zwei Spalten:

Der Code würde ungefähr so ​​aussehen:

Formen

Ant lässt Sie in Bezug auf Formulare nicht im Stich: Optionen für Inline-, horizontale und vertikale Formulare, erstaunliche Auswahlfelder und klare Überprüfungsmeldungen und -symbole. Tatsächlich geht es hier etwas über Bord. Sie können Ihre gesamte Formularwiedergabekomponente in eine übergeordnete Komponente à la Form.create () () einschließen, um Zugriff auf eine integrierte Validatorsyntax und ein benutzerdefiniertes Zwei-Wege-Bindungssystem (Cue) zu erhalten hörbares Lippenbeißen). Sie können dann Standardregeln wie "Erforderlich" angeben oder benutzerdefinierte Validierungsmethoden angeben. (Was sind Komponenten höherer Ordnung? Sehen Sie sich diesen ausgezeichneten Beitrag von James K. Nelson an.)

Müssen Sie ihre HOC verwenden? Absolut nicht, und ich bin mir nicht sicher, ob Sie das sollten. Wie bereits erwähnt, kann ein solcher Weg zu einem Sprachrisiko für den Fall führen, dass Fehler auftreten. Ich verstehe nicht, warum Sie ohnehin ein benutzerdefiniertes bidirektionales Bindungsdatensystem verwenden möchten. Sie können jedoch problemlos das HOC und nicht die bidirektionale Datenbindung verwenden.

Au Naturel - Einfache Reaktionsformen

Sehen wir uns also an, wie Sie die Ant-Validierungsnachrichten verwenden, ohne deren übergeordnete Komponente zu verwenden.

Ant stellt uns drei Requisiten zur Verfügung, die wir für jede Form.Item-Komponente bereitstellen können, um Überprüfungsmeldungen oder -symbole anzuzeigen:

  1. validateStatus - Bestimmt das Farb- und Symbolschema der Überprüfungsmeldung (siehe Foto oben). Gültige Optionen sind Erfolg, Warnung, Fehler und Überprüfung.
  2. help - Die anzuzeigende Überprüfungsmeldung.
  3. hasFeedback - Dies ist eine der Requisiten, für die kein Wert erforderlich ist. Geben Sie einfach an, ob Sie das zugehörige Symbol anzeigen möchten. Der Standardwert ist true.
Die schönsten Bestätigungen, die ich je gesehen habe.

Hier ist ein Beispiel für ein einfaches Formularelement, das eine Validierungsnachricht anzeigt:

Beachten Sie, dass ich den langen Form.Item-Komponentennamen verwendet habe. Sie können sich wie folgt eine Verknüpfung für diese und alle anderen Ant-Unterkomponenten erstellen:

const FormItem = Form.Item;
// .. erlaubt dir zu benutzen:

Formularüberprüfung mit der Ant-Komponente höherer Ordnung

Was ist nun, wenn wir den Ant Form-Dekorator verwenden möchten? Die Implementierung ist ziemlich einfach. Erstellen Sie Ihre React-Komponentenklasse und übergeben Sie sie dann als Argument an Form.create (). Die Komponente kann dann exportiert werden:

Klasse SomeComponent erweitert React.Component {
  render () {}
}
FancyFormComponent = Form.create () (SomeComponent);
export {FancyFormComponent as default}; // Als SomeComponent importiert

Dekorieren Sie in Ihrem Formular Ihre Eingabefelder mit der Methode getFieldDecorater, mit der eine Menge zusätzlicher Requisiten für Ihre Komponente verfügbar gemacht werden. Sie können jetzt Formularelemente direkt von den Requisiten aus bearbeiten (eek!).

Dieses Beispiel in der Dokumentation zeigt ausführlich die Verwendung der vollständigen Komponente höherer Ordnung.

Interaktive Komponenten - Nachricht (Warnung)

Ant bietet eine Reihe weiterer Komponenten, die Webanwendungen ein hohes Maß an Interaktivität verleihen. Ein gutes Beispiel sind Warnmeldungen - oder Nachrichten, wie sie in Ant aufgerufen werden. Das Hinzufügen einer Warnung ist so einfach wie das Aufrufen von message.success ('Great! Item has been saved.') In Ihrer Komponente. Zu den Nachrichtentypen gehören Erfolg, Warnung oder Fehler. Vergessen Sie einfach nicht, die Nachricht (in Kleinbuchstaben) von "antd" zu importieren.

Minimalismus von seiner besten Seite

Ant.Design installieren

Wie oben erwähnt, können Sie entweder das Ant-Ökosystem (mit seinem benutzerdefinierten Webpack-Adapter) umfassend nutzen oder sich einfach für das Design-Framework entscheiden. Ich habe mich für Letzteres entschieden und ich vermute auch, dass Sie dies tun, nicht zuletzt, weil die Nutzung anderer Teile des Ökosystems gute Chinesischkenntnisse voraussetzen könnte. Aber ich werde beide Optionen abdecken.

Option 1 - Verwenden Sie die CLI

Ant wird mit antd-init geliefert, einer CLI zum Generieren einer vollständigen React-Anwendung mit installiertem Ant. Ich empfehle diese Route nicht für Nicht-Chinesen, aber wenn Sie es versuchen möchten, ist der Einstieg einfach. Installieren Sie einfach die CLI mit npm, erstellen Sie einen neuen Ordner und führen Sie antd-init aus:

npm installiere antd-init -g; mkdir Demo-App; cd $ _; antd-init;

Sie werden dann von der folgenden Nachricht begrüßt:

antd-init @ 2 ist nur für erfahrene Antd. Wenn Sie Projekte erstellen möchten, ist es besser, mit dva-cli zu initialisieren. dva ist ein auf Redux und React basierendes Anwendungsframework. Ulmenkonzept, Unterstützungsnebenwirkungen, hmr, dynamische Last und so weiter.`

Es ist ein Kaninchenbau. Öffnen Sie Ihre neue Anwendung, und Sie werden feststellen, dass Ihre vertraute Datei webpack.config.js nicht mehr bekannt ist. Die CLI verwendet das oben erwähnte Ant-Tool, ein auf Webpack basierendes Build-Tool. Die Dokumentation ist in chinesischer Sprache, es scheint jedoch, dass für Webpack allgemeine Standardeinstellungen festgelegt werden und Sie dann nur Werte angeben können, die Sie überschreiben möchten. So sieht die Konfigurationsdatei aus:

// Weitere Informationen zur Konfiguration.
// - https://github.com/ant-tool/atool-build# 配置 扩展
module.exports = function (webpackConfig) {
 webpackConfig.babel.plugins.push (‘transform-runtime’);
 webpackConfig.babel.plugins.push ([‘import’, {
 libraryName: "antd",
 Stil: "CSS",
 }]);
 return webpackConfig;
};

Die index.js enthält eine schöne Demoseite, die das dezente Ant-Styling verwendet.

Option 2 - Standard-Webpack verwenden

Dies wäre meine bevorzugte Route, aber es kann komplizierter sein, zuerst Ihre Webpack-Einstellungen richtig vorzunehmen. Die Seite Erste Schritte enthält einige gute Anweisungen. Installieren Sie zuerst Ant in Ihrer React-App:

$ npm installiere antd --save

Ant empfiehlt die Verwendung eines eigenen Babel-Plugin-Imports in Ihrem .babelrc:

"Presets": [
    "reagieren",
    ...
  ],
  "plugins": ["transform-decorators-legacy", ..., ["import", [{libraryName: "antd", style: "css"}]]
  ]
}

Stellen Sie sicher, dass Ihr Webpack Loader für JS- und CSS-Dateien enthält, und Sie sollten bereit sein, loszulegen. Importieren Sie eine Ant-Komponente in die Moduldatei, um sie zu verwenden. Z.B.

{Row, Col, Icon, Button} aus 'antd' importieren;

Fazit

Es besteht kein Zweifel, dass Ant als UI-Framework eine Menge zu bieten hat, mit einem beeindruckenden Katalog an Komponenten und einem seriösen Ökosystem. Es ist jedoch mit einem gewissen Risiko verbunden. Wenn Sie ein Problem mit der Bibliothek haben, können Sie möglicherweise nicht mehr auf Chinesisch kommunizieren. Letztendlich empfehle ich, es auszuprobieren, wenn Sie die minimalistische Ästhetik mögen, während Sie die Nutzung des peripheren Ant-Ökosystems auf ein Minimum beschränken.