L'auteur d'Ant Design annonce l'histoire derrière la mise à jour de la version !

Ant Design est un langage de conception d'interface utilisateur au niveau de l'entreprise et une bibliothèque de composants React lancés par Ant Financial. Il a reçu une attention et une utilisation généralisées depuis son lancement en 2015 et compte actuellement plus de 57 000 étoiles sur GitHub. Récemment, Ant Design a publié la version 4.0, qui apporte des mises à jour majeures. Nous avons interviewé Jiang Jilin, l'un des principaux auteurs de l'équipe Ant Design, et parlé de certaines des histoires derrière la mise à jour de la version 4.0.

Ant Design 4.0 est sorti, quelles mises à jour majeures apporte-t-il cette fois-ci ?

De grosses mises à jour ont été publiées cette fois. Par exemple, nous avons ajouté un thème sombre, des composants sans bordure, la prise en charge de l'internationalisation RTL et des composants refaits tels que Table, Form, Select, etc. pour améliorer considérablement les performances. Comme il y a beaucoup de contenu, évitez d’en faire directement un document publié. Bienvenue sur Yuque pour voir la mise à jour complète : "La version officielle d'Ant Design est ici !" 》

Après des années de développement, Ant Design est devenu un écosystème. Veuillez présenter les membres importants de cet écosystème. Quelle est la direction de l'évolution future de l'écosystème ?

Ant Design (ci-après dénommé antd) en tant que système de conception comprend plus qu'une simple bibliothèque de composants. En plus du familier Ant Design React, il existe également des versions angulaires de NG-ZORRO, Ant Desin Mobile, Ant Design Landing, HiTu React et Ant Design Vue provenant de bénévoles de la communauté. Solution frontale/de conception verticale prête à l'emploi Ant Design Pro et le marché de blocs correspondant, ainsi que les bibliothèques de composants dérivés Pro Layout et Pro Table. La conception fournit également de nombreux documents de spécifications et éléments de conception associés.

Ant Design est comme un arbre, et les branches et les feuilles qui y sont sont très imaginatives. À l'avenir, nous continuerons d'abord à mener des recherches approfondies basées sur le système de conception, et deuxièmement, nous progresserons avec les cadres pertinents. Dans le même temps, Ant Design enrichira également des produits écologiques basés sur des besoins réels des entreprises.

Dans le processus de 3.0 à 4.0, quel est le plus gros problème que l'équipe antd a surmonté ? De quelle nouvelle fonctionnalité êtes-vous le plus fier ? La version

v4 et les camarades de classe de la communauté ont reconstruit un grand nombre de composants sous-jacents, améliorant ainsi considérablement les performances de rendu des composants. Par exemple, les mises à jour des champs du composant Form dans la version v3 entraîneront un nouveau rendu de l'intégralité du formulaire, ce qui entraînera de sérieux problèmes de performances dans les formulaires volumineux. Dans la v4, Form mettra à jour uniquement les composants de champ pertinents, réduisant ainsi considérablement le temps de rendu. Le défilement virtuel est intégré à des composants tels que Tree, Select et TreeSelect, réduisant ainsi considérablement les éléments réellement rendus.

En parlant de la partie la plus difficile, cette reconstruction nécessite des solutions de contraction et d'expansion d'animation basées sur le défilement virtuel car elle prend en charge le défilement virtuel. Par exemple, dans la version v3 du composant Tree, la mise à l'échelle peut être réalisée via une transition et une hauteur natives pour obtenir des effets de rétrécissement et d'étirement. Cependant, dans le défilement virtuel, chaque élément est en fait un élément indépendant, donc si vous souhaitez obtenir le même effet d'animation que la v3 lors de la mise à l'échelle, vous devez implémenter vous-même les algorithmes associés. Par conséquent, nous l'avons divisé en plusieurs étapes et avons traité différentes logiques en différentes étapes pour combiner une implémentation d'animation prenant en charge le défilement virtuel. La logique d'implémentation spécifique est relativement compliquée. Si vous êtes intéressé, vous pouvez consulter le code correspondant de rc-virtual-list.

Comment antd équilibre-t-il l'efficacité, la performance/expérience et la qualité dans la conception ?

D'un point de vue personnel, ces trois derniers ne sont en réalité pas contradictoires. Le développement des composants d'Ant Design comprend généralement les étapes suivantes :

• Les concepteurs conçoivent des ébauches visuelles et interactives.

• Les ingénieurs développent

• Révision du code et révision du concepteur ;

Chaque lien sera complété avec sérieux et responsabilité, et la partie Révision du Code est également l'étape la plus longue. Le processus de révision du code révisera à plusieurs reprises l'API et la mise en œuvre du code, et les concepteurs et les développeurs participeront ensemble pour obtenir l'effet 1 + 1 > Le développement de composants ne peut pas rechercher aveuglément l’efficacité. Il doit être peaufiné lentement, de la conception à la mise en œuvre. Par exemple, le composant Typographie semble très simple en tant que composant de composition, mais il a fallu un mois entre la conception et le développement. L'API a été ajustée à plusieurs reprises pour simplifier les coûts de mémoire des développeurs de la manière la plus rationalisée possible. pris en considération. L’aspect design est également pris en compte à plusieurs reprises pour obtenir de bons effets visuels dans les contextes chinois et anglais.

Dans la version v3, les problèmes de performances des composants proviennent principalement des exigences de compatibilité des anciennes versions d'IE. Par conséquent, de nombreuses implémentations ne peuvent utiliser que des méthodes relativement hacky. Les problèmes suivants seront mentionnés, je ne les mentionnerai donc pas à nouveau. Depuis que la version minimale compatible d'IE v4 a été remplacée par IE 11, il ne s'agit plus de restrictions, ce qui nous donne la possibilité de mettre à jour progressivement pour mieux améliorer les performances.

Nous avons fait quelques compromis en termes de compatibilité avec IE. Quelles en sont les raisons ? Quelles sont les difficultés pour être compatible avec IE ?

La version v3 a dû faire quelques compromis afin d'être compatible avec les anciennes versions d'IE. Par exemple, si la disposition flexible ne peut pas être utilisée, nous utilisons float et table ; sticky ne peut pas être utilisé, et Table doit restituer une table supplémentaire pour obtenir l'effet de colonnes fixes. Ces dernières années, avec la mise à niveau des systèmes Windows, la proportion d'anciennes versions d'IE est devenue de plus en plus petite. C'est aussi l'occasion pour nous d'abandonner la version obsolète d'IE dans la version v4 et de voyager léger.

La difficulté d'être compatible avec IE est que de nombreux comportements sont inattendus. Souvent, il n'y a aucun problème avec le code, mais le rendu de la page est anormal. Pour cette situation, il faut faire beaucoup de technologie noire. Par exemple, forcer l'actualisation des composants, utiliser des hacks CSS uniquement pour IE, etc. De plus, bon nombre des nouvelles fonctionnalités HTML mentionnées précédemment ne peuvent pas être utilisées dans l'environnement IE et ne peuvent être simulées que par vous-même, ce qui entraîne de graves pertes de performances.

Pensez-vous que la prise en charge actuelle d'antd pour TypeScript est en place ? Si des lacunes subsistent, où se situent-elles principalement et comment seront-elles résolues ?

Dans la version v3, un grand nombre de nos composants sous-jacents sont écrits en js, donc la définition du type de ts est également effectuée sur antd. L'inconvénient est qu'elle ne correspond pas complètement aux composants sous-jacents. Dans la version v4, nous avons également converti un grand nombre de composants sous-jacents dans la version ts et utilisé ces définitions directement du côté antd, évitant ainsi l'inadéquation des définitions dans le passé. Bien sûr, ce processus ne se fait pas du jour au lendemain. Il existe encore certains composants sous-jacents qui n'ont pas encore été convertis. Les étudiants de la communauté sont invités à contribuer à améliorer la définition.

De plus, nous avons également rencontré des problèmes intéressants et ennuyeux - c'est-à-dire qu'en raison de la mise à niveau de TypeScript et de l'ontologie @types/react, la définition ts originale est devenue invalide. Il fut un temps où antd's Button mettait à jour sa définition ts chaque semaine pour s'adapter aux derniers @types/react. Cette situation est inévitable, restez simplement informé.

La contribution de deux étudiants de la communauté @saeedrahimi @shaodahong a été spécifiquement mentionnée dans l'annonce de la sortie. Pouvez-vous nous raconter l'histoire en détail ?

@saeedrahimi camarade de classe Il a contribué aux capacités d'internationalisation RTL de tous les composants de la v4 et a modifié des milliers de lignes de code. Cette fonction est très puissante et vous serez ébloui après un seul PR. De cette façon, nous avons révisé et mis à jour encore et encore, et nous nous en sommes finalement rendu compte, ce qui n'était pas facile au milieu.

@shaodahong était en fait un bénévole enthousiaste pendant la v3. Il a également contribué à beaucoup de travail lors de la sortie de la v4, parmi lesquels le développement du package de compatibilité a été principalement réalisé par lui. Grâce au package de compatibilité, les développeurs peuvent mettre à niveau antd de la v3 vers la v4 au coût le plus bas possible.

Bien sûr, en plus de ces deux étudiants, il y a de nombreux bénévoles impliqués dans le développement de la v4. J'aimerais profiter de cette occasion pour exprimer à nouveau ma gratitude à tous les bénévoles !

Certains utilisateurs ont signalé que les commentaires de la communauté sont difficiles. Le code source est implémenté à l'aide des packages rc-*, ce qui fait hésiter les développeurs à aider à corriger les bugs. Avez-vous réfléchi à la manière de résoudre ce problème ? Comment l'équipe antd perçoit-elle la connexion et l'interaction avec les développeurs de la communauté ? Le composant

rc est conçu pour être simple et flexible, il ne dépend donc pas fortement du style. En plus des fonctions des composants, antd dispose également de son propre système de conception, il sera donc plus lourd en matière de conception d'interface utilisateur. Cette division permet aux utilisateurs d'encapsuler directement en fonction du composant rc s'ils souhaitent uniquement utiliser la fonction du composant mais n'ont pas besoin de son style. Par exemple, le composant sous-jacent de Form rc-field-form lui-même n'a aucun style, alors que dans antd, il encapsule le Form et Form.Item stylisés sans exposer le composant Field sous-jacent. En fait, avant la sortie de la v4, de nombreux étudiants de la communauté avaient déjà encapsulé leurs propres composants basés sur rc-field-form. Les deux sont différents en termes d’idées de conception et ne seront pas fusionnés à l’avenir.

Du point de vue de l'envoi de relations publiques, il n'est en fait pas nécessaire d'avoir trop de fardeau psychologique. Les composants remplissent leurs propres tâches et vous ne serez pas dissuadé par la présence d'une bibliothèque de composants rc supplémentaire en bas. En fait, à en juger par la maintenance quotidienne, les bénévoles ont le même enthousiasme pour envoyer des PR à antd et rc. Il n'existe pas de bug qui ne puisse être corrigé dans le composant rc. Même parfois, d'un autre côté, certains utilisateurs n'utilisent que le composant rc, ils envoient donc beaucoup de PR au composant rc pour aider à l'améliorer, ce qui entraîne également le renvoi de ces PR à antd.

Quel est le plan de la version ultérieure ? Quelles nouvelles fonctionnalités méritent d’être attendues à l’avenir ?

Après la sortie de la version v4, en raison de la reconstruction d'un grand nombre de composants, l'accent sera pour le moment principalement mis sur les corrections de bugs. Une fois stable, nous serons prêts pour le futur mode Concurrent de React. En outre, il est également prévu de mener des recherches sur les CSS dans js pour prendre en charge la possibilité de changer de thème de manière dynamique. Bien entendu, comme je viens de le dire, la priorité actuelle reste axée sur les corrections de bugs.

En tant que projet open source front-end star largement utilisé, quelle est, selon vous, la raison du succès d'antd jusqu'à présent ? Quels sont les plus grands gains et leçons tirés de l’open source au cours des dernières années ?

La popularité d’Ant Design est indissociable du soutien des étudiants de la communauté. C’est la reconnaissance de tous qui fait d’Ant Design ce qu’elle est aujourd’hui. La survie d'un projet open source nécessite la puissance de la communauté en plus du maintien des mises à jour par les mainteneurs. Dans le monde open source, vous verrez beaucoup d’excellents projets. Mais au fur et à mesure du temps, il n’est plus entretenu. Par conséquent, la manière de maintenir la vitalité du projet est une priorité absolue.

Ant Design a parcouru un long chemin depuis l'écriture de la première ligne de code en 2015. Le plus grand gain est l'aide des camarades de classe de la communauté, qui se réunissent pour faire d'Ant Design une bibliothèque de composants frontaux de première classe. Dans le même temps, en tant que projet open source, il doit également être maintenu de manière ouverte et transparente. Afin d'être à la hauteur de la confiance des camarades de classe de la communauté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!