アントデザイン作者がバージョンアップ裏話を発表！

Ant Design は、Ant Financial によって発売されたエンタープライズ レベルの UI デザイン言語および React コンポーネント ライブラリです。2015 年の発売以来、広く注目され使用されており、現在 GitHub で 57,000 個以上のスターを獲得しています。最近、Ant Design はバージョン 4.0 をリリースし、いくつかのメジャー アップデートを提供しました。私たちは、Ant Design チームの中心執筆者の 1 人である Jiang Jilin 氏にインタビューし、4.0 バージョン アップデートの背後にある物語について話しました。

Ant Design 4.0 がリリースされました。今回はどのようなメジャー アップデートが行われますか?

今回はメジャーアップデートがいくつかリリースされました。たとえば、ダーク テーマ、ボーダレス コンポーネント、RTL 国際化サポートを追加し、テーブル、フォーム、選択などのコンポーネントをやり直すことで、パフォーマンスを大幅に向上させました。コンテンツが多いため、直接公開ドキュメントにすることは避けてください。完全なアップデートを表示するには、Yuque へようこそ: 「Ant Design の公式バージョンが登場しました!」 》

長年の開発を経て、Ant Design はエコシステムになりました。このエコシステムの重要なメンバーを紹介してください。エコシステムの今後の進化の方向性は何ですか?

設計システムとしての Ant Design (以下、antd) には、コンポーネント ライブラリだけではありません。おなじみの Ant Design React に加えて、コミュニティ ボランティアによる NG-ZORRO、Ant Desin Mobile、Ant Design Landing、HiTu React、Ant Design Vue の Angular バージョンもあります。すぐに使えるミッドエンドのフロントエンド/デザイン ソリューション Ant Design Pro と対応するブロック マーケット、派生コンポーネント ライブラリ Pro Layout および Pro Table。 Design では、多くの仕様書と関連する設計資産も提供します。

Ant Designは木のようなもので、その上に枝や葉を広げる想像力豊かなデザインです。今後とも、デザインシステムに基づく検討をさらに深め、関連する枠組みと合わせて進めてまいります。同時に、アント デザインは、実際のビジネス ニーズに基づいた環境に優しい製品も充実させていきます。

3.0 から 4.0 へのプロセスで、antd チームが克服した最大の問題は何ですか?最も誇りに思う新機能は何ですか?

v4 バージョンとコミュニティのクラスメートは、多数の基礎となるコンポーネントを再構築し、コンポーネントのレンダリング パフォーマンスを大幅に向上させました。たとえば、v3 バージョンでフォーム コンポーネントのフィールドを更新すると、フォーム全体が再レンダリングされ、大きなフォームでは重大なパフォーマンスの問題が発生します。 v4 では、フォームは関連するフィールド コンポーネントのみを更新するため、レンダリング時間が大幅に短縮されます。仮想スクロールは Tree、Select、TreeSelect などのコンポーネントに組み込まれているため、実際にレンダリングされる要素が大幅に削減されます。

さらに難しい部分について言えば、この再構築では、仮想スクロールをサポートしているため、仮想スクロールに基づいたアニメーションの縮小および伸縮スキームに対処する必要があります。たとえば、Tree コンポーネントの v3 バージョンでは、ネイティブのトランジションと高さによってスケーリングを実現し、縮小効果と伸縮効果を実現できます。ただし、仮想スクロールでは実際には各要素が独立した要素であるため、スケーリング時に v3 と同じアニメーション効果を実現したい場合は、関連するアルゴリズムを自分で実装する必要があります。そこで、複数のステージに分割し、ステージごとに異なるロジックを処理して、仮想スクロールをサポートするアニメーション実装を組み合わせました。具体的な実装ロジックは比較的複雑なので、興味があれば rc-virtual-list の関連コードを参照してください。

antd は、設計における効率、パフォーマンス/エクスペリエンス、品質をどのように評価していますか?

個人的な観点から言えば、後の 3 つは実際には矛盾しません。 Ant Design のコンポーネント開発は通常、次の手順で行われます:

• デザイナーはビジュアルおよびインタラクティブなドラフトを設計します;

• エンジニアは開発します;

• コードレビューとデザイナーレビュー。

中間のすべてのリンクは真剣かつ責任を持って完了します。コード レビュー部分も最も長いステージです。コード レビュー プロセスでは API とコード実装を繰り返し修正し、設計者と開発者が一緒に参加して 1 1 > 2 の効果を達成します。コンポーネントの開発はやみくもに効率を追求するものではなく、設計から実装までじっくりと磨きをかける必要があります。たとえば、Typography コンポーネントは、組版コンポーネントとしては非常にシンプルに見えますが、設計から開発までに 1 か月かかりました。API は、開発者のメモリコストを最も合理化された方法で簡素化するために繰り返し調整されています。同時に、スケーラビリティも向上しています。考慮に入れられる。デザイン面でも、中国語と英語の両方の文脈で優れた視覚効果を実現するために繰り返し検討されています。

v3 バージョンでは、コンポーネントのパフォーマンスの問題は、主に古いバージョンの IE との互換性要件が原因です。そのため、多くの実装では、比較的ハッキングな方法しか使用できません。次の問題については言及するため、省略します。もう一度言及します。 IE v4 の互換性のある最小バージョンが IE 11 に変更されたため、これらの制限はなくなり、パフォーマンスを向上させるために段階的に更新できるようになりました。

IE との互換性に関していくつかのトレードオフを行っています。理由は何ですか? IEとの互換性において何が難しいのでしょうか?

v3 バージョンは、IE の古いバージョンと互換性を保つために、いくつかの妥協をする必要がありました。たとえば、フレックス レイアウトが使用できない場合は、float と table を使用しますが、sticky は使用できず、Table は固定列の効果を実現するために追加の Table をレンダリングする必要があります。近年、Windows システムのアップグレードに伴い、IE の古いバージョンの割合はますます少なくなってきています。これは、古い IE バージョンの v4 バージョンを放棄して、身軽に旅行できる機会でもあります。

IE との互換性の難しさは、多くの予期しない動作が発生することであり、多くの場合、コードには問題がないのに、ページのレンダリングが異常になります。この状況のた​​めには、多くのブラックテクノロジーを実行する必要があります。たとえば、コンポーネントを強制的に更新したり、IE 専用の CSS ハックを使用したりするなどです。さらに、前述した HTML の新機能の多くは IE 環境では使用できず、自分でシミュレートするしかないため、パフォーマンスが大幅に低下します。

antd の現在の TypeScript サポートは整っていると思いますか?まだ欠陥がある場合、主にどこに欠陥があり、どのように解決されますか?

v3 バージョンでは、基盤となるコンポーネントの多くが js で記述されているため、ts の型定義が追加で antd 上で行われます。欠点は、基盤となるコンポーネントと完全に一致しないことです。 。 v4 バージョンでは、多数の基盤となるコンポーネントも ts バージョンに変換し、これらの定義を antd 側で直接使用することで、過去の定義の不一致を回避しました。もちろん、このプロセスは一夜にして起こるわけではありません。まだ変換されていない基礎的なコンポーネントがまだいくつかあります。コミュニティの学生は、ts 定義の改善に協力することを歓迎します。

さらに、いくつかの興味深い厄介な問題にも遭遇しました。つまり、typescript と @types/react オントロジーのアップグレードにより、元の ts 定義が無効になりました。最新の @types/react に適応するために、antd の Button が毎週 ts 定義を更新していた時期がありました。この状況は避けられないので、常に最新情報を入手してください。

リリースの発表では、2 人のコミュニティ学生 @saeedrahimi @shaodahong の貢献について具体的に言及されていましたが、そのストーリーを詳しく紹介してもらえますか?

@saeedrahimi クラスメイト 彼は、すべてのコンポーネントの RTL 国際化機能を v4 に提供し、数千行のコードを変更しました。この機能は非常に強力で、たった一度のPRで目がくらんでしまいます。このようにして、何度も見直し＆更新を繰り返し、途中までは大変でしたが、ようやく実現することができました。

@shaodahong は、v3 のときは実際に熱心なボランティアでしたが、v4 のリリース中にも多くの作業を手伝い、その中で互換性パッケージの開発は主に彼によって完了されました。互換性パッケージを使用すると、開発者は可能な限り低コストで antd を v3 から v4 にアップグレードできます。

もちろん、これら 2 人の学生に加えて、v4 の開発には多くのボランティアが関わっています。この場を借りて、ボランティアの皆様に改めて感謝の意を表したいと思います。

一部のユーザーは、コミュニティからのフィードバックが難しいと報告しています。ソース コードは rc-* カプセル化を使用して実装されているため、開発者はバグ修正を手伝うことをためらっています。この問題を解決する方法を検討しましたか? antd チームはコミュニティ開発者とのつながりや交流をどのように見ていますか?

rc コンポーネントはシンプルかつ柔軟になるように設計されているため、スタイルに強く依存しません。 antdはコンポーネント機能に加えて独自のデザインシステムを持っているため、UIデザインの負担が大きくなります。この分割により、コンポーネントの機能のみを使用したいがそのスタイルは必要ない場合、ユーザーは rc コンポーネントに基づいて直接カプセル化することができます。たとえば、Form rc-field-form の基になるコンポーネント自体にはスタイルがまったくありませんが、antd では、基になる Field コンポーネントを公開せずにスタイル付きの Form と Form.Item をカプセル化します。実際、v4 がリリースされる前に、多くのコミュニティの学生がすでに rc-field-form に基づいて独自のコンポーネントをカプセル化していました。両者は設計思想が異なるため、将来的に統合されることはありません。

PRを発信するという観点から見ると、実は心理的な負担はそれほど大きくありません。コンポーネントはそれぞれ独自の役割を果たします。下部に追加の rc コンポーネント ライブラリがあっても心配する必要はありません。実際、日々のメンテナンスを見る限り、有志の方々は antd と rc に同じ熱意を持って PR を送信しており、rc コンポーネントで修正できないバグなど存在しません。逆に、場合によっては、rc コンポーネントのみを使用するユーザーもおり、rc コンポーネントを改善するために大量の PR を rc コンポーネントに送信します。これにより、これらの PR が antd にフィードバックされます。

次期バージョンの計画は何ですか?将来的に期待に値する新機能は何ですか?

v4 バージョンのリリース後は、多数のコンポーネントが再構築されるため、当面はバグ修正が主な焦点となります。安定したら、React の将来の同時モードの準備が整います。さらに、テーマを動的に切り替える機能をサポートするために、js の CSS に関する研究も行われる予定です。もちろん、先ほど述べたように、現在の優先事項は引き続きバグ修正に重点が置かれています。

広く使用されているフロントエンドのスター オープンソース プロジェクトとして、antd がここまで成功した理由は何だと思いますか?過去数年間でオー​​プンソースから得られた最大の成果と教訓は何ですか?

Ant Design の人気は、コミュニティの学生のサポートと切り離すことができず、皆の認識のおかげで Ant Design は今日の姿になっています。オープンソース プロジェクトの存続には、メンテナーによる更新の維持に加えて、コミュニティの力も必要です。オープンソースの世界では、優れたプロジェクトが数多く存在します。しかし、時間が経つにつれて、それは徐々に維持されなくなります。したがって、プロジェクトの活力をいかに維持するかが最優先事項となります。

私が 2015 年にコードの最初の行を書いて以来、Ant Design は長い道のりを歩んできました。最大の成果は、Ant Design を一流のフロントエンド コンポーネント ライブラリに構築するために団結するコミュニティのクラスメートからの支援です。同時に、オープンソース プロジェクトとして、オープンソース的にオープンかつ透過的に維持される必要もあります。地域の同級生の信頼に応えるために。

以上がアントデザイン作者がバージョンアップ裏話を発表！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。