Der Autor von Ant Design gibt die Geschichte hinter dem Versionsupdate bekannt!

Ant Design ist eine von Ant Financial eingeführte UI-Designsprache und React-Komponentenbibliothek. Sie hat seit ihrer Einführung im Jahr 2015 große Aufmerksamkeit und Verwendung gefunden und hat derzeit mehr als 57.000 Sterne auf GitHub. Kürzlich hat Ant Design die Version 4.0 veröffentlicht, die einige wichtige Updates mit sich bringt. Wir haben Jiang Jilin, einen der Hauptautoren des Ant Design-Teams, interviewt und über einige der Geschichten hinter dem Versionsupdate 4.0 gesprochen.

Ant Design 4.0 ist veröffentlicht. Welche wichtigen Updates bringt es dieses Mal?

Dieses Mal wurden einige große Updates veröffentlicht. Beispielsweise haben wir ein dunkles Design, randlose Komponenten, RTL-Internationalisierungsunterstützung hinzugefügt und Komponenten wie Tabelle, Formular, Auswahl usw. überarbeitet, um die Leistung erheblich zu verbessern. Da es sich um viele Inhalte handelt, vermeiden Sie es, diese direkt in ein veröffentlichtes Dokument umzuwandeln. Willkommen bei Yuque, um das vollständige Update anzusehen: „Die offizielle Version von Ant Design ist da!“ 》

Nach Jahren der Entwicklung hat sich Ant Design zu einem Ökosystem entwickelt. Bitte stellen Sie die wichtigen Mitglieder dieses Ökosystems vor.

Ant Design (im Folgenden als antd bezeichnet) als Designsystem umfasst mehr als nur eine Komponentenbibliothek. Neben dem bekannten Ant Design React gibt es auch Angular-Versionen von NG-ZORRO, Ant Desin Mobile, Ant Design Landing, HiTu React und Ant Design Vue von Freiwilligen aus der Community. Vertikal sofort einsatzbereite Mid-End-Frontend-/Designlösung Ant Design Pro und der entsprechende Blockmarkt sowie abgeleitete Komponentenbibliotheken Pro Layout und Pro Table. Der Entwurf stellt außerdem zahlreiche Spezifikationsdokumente und zugehörige Entwurfsressourcen bereit.

Ant Design ist wie ein Baum und die Zweige und Blätter darauf sind sehr einfallsreich. Wir werden in Zukunft erstens weiterhin vertiefte Forschung auf Basis des Designsystems betreiben und zweitens gemeinsam mit relevanten Frameworks Fortschritte machen. Gleichzeitig wird Ant Design auch ökologische Produkte auf der Grundlage realer Geschäftsanforderungen bereichern.

Was ist im Prozess von 3.0 bis 4.0 das größte Problem, das das antd-Team überwunden hat? Auf welche neue Funktion sind Sie am meisten stolz?

v4-Version und Community-Klassenkameraden haben eine große Anzahl zugrunde liegender Komponenten rekonstruiert und so die Leistung beim Rendern von Komponenten erheblich verbessert. Feldaktualisierungen in der Formularkomponente in Version v3 führen beispielsweise dazu, dass das gesamte Formular neu gerendert wird, was bei großen Formularen zu schwerwiegenden Leistungsproblemen führen kann. In v4 aktualisiert Form nur relevante Feldkomponenten, wodurch die Renderzeit erheblich verkürzt wird. Virtuelles Scrollen ist in Komponenten wie Tree, Select und TreeSelect integriert, wodurch die tatsächlich gerenderten Elemente erheblich reduziert werden.

Apropos schwierigerer Teil: Diese Rekonstruktion erfordert auf virtuellem Scrollen basierende Lösungen zum Verkleinern und Strecken von Animationen, da sie virtuelles Scrollen unterstützt. Beispielsweise kann in der v3-Version der Tree-Komponente die Skalierung durch native Übergänge und Höhen erreicht werden, um Verkleinerungs- und Streckungseffekte zu erzielen. Beim virtuellen Scrollen ist jedoch jedes Element tatsächlich ein unabhängiges Element. Wenn Sie also beim Skalieren den gleichen Animationseffekt wie in Version 3 erzielen möchten, müssen Sie die entsprechenden Algorithmen selbst implementieren. Daher haben wir es in mehrere Phasen unterteilt und unterschiedliche Logik in verschiedenen Phasen verarbeitet, um eine Animationsimplementierung zu kombinieren, die virtuelles Scrollen unterstützt. Die spezifische Implementierungslogik ist relativ kompliziert. Wenn Sie interessiert sind, können Sie sich den entsprechenden Code von rc-virtual-list ansehen.

Wie bringt andd Effizienz, Leistung/Erfahrung und Qualität im Design in Einklang?

Aus persönlicher Sicht sind die letzten drei eigentlich kein Widerspruch. Die Komponentenentwicklung von Ant Design umfasst im Allgemeinen die folgenden Schritte:

• Designer entwerfen visuelle und interaktive Entwürfe

• Ingenieure entwickeln

• Codeüberprüfung und Designerüberprüfung.

Jeder Link wird ernsthaft und verantwortungsvoll ausgefüllt, und der Codeüberprüfungsteil ist auch die längste Phase. Beim Codeüberprüfungsprozess werden die API und die Codeimplementierung wiederholt überarbeitet, und Designer und Entwickler werden gemeinsam daran teilnehmen, den Effekt von 1 + 1 > zu erzielen. Die Entwicklung von Komponenten kann nicht blindlings nach Effizienz streben. Sie muss vom Entwurf bis zur Implementierung langsam verfeinert werden. Beispielsweise sieht die Typografie-Komponente als Satzkomponente sehr einfach aus, aber es dauerte einen Monat vom Entwurf bis zur Entwicklung. Die API wurde wiederholt angepasst, um die Speicherkosten der Entwickler auf möglichst effiziente Weise zu vereinfachen berücksichtigt. Auch der gestalterische Aspekt wird immer wieder berücksichtigt, um sowohl im chinesischen als auch im englischen Kontext gute visuelle Effekte zu erzielen.

In der v3-Version ergeben sich die Leistungsprobleme der Komponenten hauptsächlich aus den Kompatibilitätsanforderungen für ältere IE-Versionen. Daher können viele Implementierungen nur relativ hackige Methoden verwenden. Die folgenden Probleme werden erwähnt, daher werde ich sie nicht noch einmal erwähnen. Da die kompatible Mindestversion von IE v4 auf IE 11 geändert wurde, handelt es sich hierbei nicht mehr um Einschränkungen, sodass wir schrittweise Aktualisierungen vornehmen können, um die Leistung zu verbessern.

Wir haben hinsichtlich der Kompatibilität mit dem IE einige Kompromisse eingegangen. Was sind die Gründe? Welche Schwierigkeiten gibt es bei der Kompatibilität mit dem IE?

Die v3-Version musste einige Kompromisse eingehen, um mit älteren IE-Versionen kompatibel zu sein. Wenn beispielsweise das Flex-Layout nicht verwendet werden kann, verwenden wir Float und Table. Sticky kann nicht verwendet werden, und Table muss eine zusätzliche Tabelle rendern, um den Effekt fester Spalten zu erzielen. In den letzten Jahren ist mit der Aktualisierung von Windows-Systemen der Anteil alter IE-Versionen immer kleiner geworden. Dies ist auch eine Gelegenheit für uns, die veraltete IE-Version in der v4-Version aufzugeben und mit leichtem Gepäck zu reisen.

Die Schwierigkeit bei der Kompatibilität mit dem IE besteht darin, dass viele Verhaltensweisen unerwartet sind. Oft liegt kein Problem mit dem Code vor, aber die Seitendarstellung ist abnormal. Für diese Situation muss viel schwarze Technologie eingesetzt werden. Zum Beispiel das Erzwingen der Aktualisierung von Komponenten, die Verwendung von Nur-IE-CSS-Hacks usw. Darüber hinaus können viele der zuvor erwähnten neuen HTML-Funktionen nicht in der IE-Umgebung verwendet werden und können nur von Ihnen selbst simuliert werden, was zu erheblichen Leistungseinbußen führt.

Glauben Sie, dass die aktuelle Unterstützung von antd für TypeScript vorhanden ist? Falls weiterhin Mängel bestehen, wo liegen diese hauptsächlich vor und wie werden sie behoben?

In der v3-Version sind viele unserer zugrunde liegenden Komponenten in js geschrieben, sodass die Typdefinition von ts zusätzlich auf antd erfolgt. Der Nachteil besteht darin, dass sie nicht vollständig mit den zugrunde liegenden Komponenten übereinstimmt. In der v4-Version haben wir auch eine große Anzahl zugrunde liegender Komponenten in die ts-Version konvertiert und diese Definitionen direkt auf der Antd-Seite verwendet, um so die Nichtübereinstimmung der Definitionen in der Vergangenheit zu vermeiden. Natürlich geschieht dieser Prozess nicht über Nacht. Es gibt immer noch einige zugrunde liegende Komponenten, die noch nicht umgesetzt wurden. Studenten in der Community sind herzlich willkommen, dabei zu helfen, die Definition zu verbessern.

Darüber hinaus sind wir auch auf einige interessante und ärgerliche Probleme gestoßen – das heißt, aufgrund der Aktualisierung von Typescript und @types/react-Ontologie wurde die ursprüngliche ts-Definition ungültig. Es gab eine Zeit in der Vergangenheit, in der der Button von antd seine ts-Definition jede Woche aktualisierte, um sie an die neuesten @types/react anzupassen. Diese Situation ist unvermeidlich, bleiben Sie einfach auf dem Laufenden.

In der Veröffentlichungsankündigung wurden die Beiträge von zwei Community-Studenten @saeedrahimi @shaodahong ausdrücklich erwähnt. Können Sie uns die Geschichte im Detail erzählen?

@saeedrahimi classmate Er hat die RTL-Internationalisierungsfunktionen aller Komponenten in Version 4 eingebracht und Tausende von Codezeilen geändert. Diese Funktion ist sehr leistungsstark und Sie werden nach nur einem PR begeistert sein. Auf diese Weise haben wir es immer wieder überprüft und aktualisiert und schließlich festgestellt, dass es in der Mitte nicht einfach war.

@shaodahong war tatsächlich ein begeisterter Freiwilliger während der Version 3. Er half auch bei der Veröffentlichung von Version 4, wobei er hauptsächlich die Entwicklung des Kompatibilitätspakets erledigte. Durch das Kompatibilitätspaket können Entwickler andd zu möglichst geringen Kosten von v3 auf v4 aktualisieren.

Natürlich sind neben diesen beiden Studenten auch viele Freiwillige an der Entwicklung von v4 beteiligt. An dieser Stelle möchte ich mich noch einmal bei allen ehrenamtlichen Helfern bedanken!

Einige Benutzer haben berichtet, dass der Quellcode mithilfe der rc-*-Kapselung implementiert ist, was dazu führt, dass Entwickler zögern, bei der Behebung von Fehlern zu helfen. Wie sieht das andd-Team die Verbindung und Interaktion mit Community-Entwicklern? Die

rc-Komponente ist so konzipiert, dass sie einfach und flexibel ist, sodass keine starke Abhängigkeit vom Stil besteht. Zusätzlich zu den Komponentenfunktionen verfügt antd auch über ein eigenes Designsystem, sodass der Schwerpunkt stärker auf dem UI-Design liegt. Diese Aufteilung ermöglicht es Benutzern, direkt basierend auf der RC-Komponente zu kapseln, wenn sie nur die Funktion der Komponente verwenden möchten, aber ihren Stil nicht benötigen. Beispielsweise hat die zugrunde liegende Komponente von Form rc-field-form selbst überhaupt keinen Stil, während sie in antd das formatierte Form und Form.Item kapselt, ohne die zugrunde liegende Feldkomponente verfügbar zu machen. Tatsächlich hatten viele Community-Studenten vor der Veröffentlichung von Version 4 bereits ihre eigenen Komponenten basierend auf rc-field-form gekapselt. Die beiden unterscheiden sich hinsichtlich der Designideen und werden in Zukunft nicht zusammengeführt.

Aus Sicht des PR-Versands besteht eigentlich keine Notwendigkeit, zu viel psychische Belastung zu haben. Die Komponenten erfüllen ihre eigenen Aufgaben, und Sie werden nicht davon abgeschreckt, unten eine zusätzliche RC-Komponentenbibliothek zu haben. Der täglichen Wartung nach zu urteilen, senden Freiwillige mit derselben Begeisterung PRs an antd und rc. Es gibt keinen Fehler, der in der RC-Komponente nicht behoben werden kann. Manchmal verwenden einige Benutzer jedoch nur die RC-Komponente und senden daher viele PRs an die RC-Komponente, um sie zu verbessern, was auch dazu führt, dass diese PRs an antd zurückgemeldet werden.

Was ist der Folgeversionsplan? Auf welche neuen Funktionen kann man sich in Zukunft freuen?

Nach der Veröffentlichung der v4-Version wird das Hauptaugenmerk aufgrund des Umbaus einer Vielzahl von Komponenten vorerst auf der Fehlerbehebung liegen. Sobald es stabil ist, sind wir bereit für den zukünftigen Concurrent-Modus von React. Darüber hinaus ist geplant, CSS in JS zu erforschen, um die Fähigkeit zum dynamischen Wechseln von Themen zu unterstützen. Natürlich liegt, wie ich gerade sagte, die aktuelle Priorität immer noch auf der Fehlerbehebung.

Was ist Ihrer Meinung nach der Grund für den bisherigen Erfolg von antd als weit verbreitetes Front-End-Star-Open-Source-Projekt? Was sind die größten Fortschritte und Lehren aus Open Source in den letzten Jahren?

Die Popularität von Ant Design ist untrennbar mit der Unterstützung der Studenten in der Community verbunden. Es ist die Anerkennung aller, die Ant Design zu dem macht, was es heute ist. Das Überleben eines Open-Source-Projekts erfordert neben der Aufrechterhaltung von Updates durch die Betreuer auch die Kraft der Community. In der Open-Source-Welt werden Sie viele hervorragende Projekte sehen. Doch mit der Zeit wurde es nach und nach nicht mehr aufrechterhalten. Daher hat die Aufrechterhaltung der Vitalität des Projekts oberste Priorität.

Ant Design hat seit dem Schreiben der ersten Codezeile im Jahr 2015 einen langen Weg zurückgelegt. Der größte Gewinn ist die Hilfe von Klassenkameraden in der Community, die zusammenkommen, um Ant Design in eine erstklassige Front-End-Komponentenbibliothek zu integrieren. Gleichzeitig muss es als Open-Source-Projekt auch offen und transparent im Open-Source-Stil gepflegt werden. Um dem Vertrauen der Klassenkameraden in der Gemeinschaft gerecht zu werden.

Das obige ist der detaillierte Inhalt vonDer Autor von Ant Design gibt die Geschichte hinter dem Versionsupdate bekannt!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!