Bevor wir uns daran machen, Ihre eigene Komponentenbibliothek von Grund auf zu erstellen, werfen wir einen Blick auf die verschiedenen Arten von Komponentenbibliotheken und die Vor- und Nachteile ihrer Verwendung.
? Ein besonderer Dank geht an stephband (Mastodon, Bluesky) für das Korrekturlesen und das Feedback.
Bitte beachten Sie, dass dies ein X-Beitrag von meiner Website ist. Der Inhalt ist weitgehend derselbe, der Originalbeitrag enthält jedoch interaktive Ausschnitte und Videos, die in diesem Artikel weggelassen werden.
Ich bin ein großer Musikfan. Eine meiner Lieblingsbeschäftigungen ist es, eine Schallplatte aufzulegen und sie von vorne bis hinten anzuhören. Ein Musikalbum hat ein einfaches Konzept, es besteht aus einer Reihe aufgenommener Titel eines Künstlers und wird als vollständige und zusammenhängende Sammlung von Liedern betrachtet.
Aber was wäre, wenn es keine aufgenommene Musik gäbe? Anstatt Songs auf Band, CD oder MP3 (oder FLAC, wenn Sie dazu geneigt sind) zu brennen, können Sie sich ein Album nur anhören, wenn der Künstler es live für Sie spielt. Sie müssten zur Band gehen, sie bitten, ihre Ausrüstung aufzubauen und sie dazu zu bringen, das Album von vorne nach hinten abzuspielen. Sie müssten es jedes Mal auf die gleiche Weise spielen, um sicherzustellen, dass jeder das exakt gleiche Erlebnis hat.
Die Risse würden sichtbar werden. Dies ist kein effizienter Weg, um sicherzustellen, dass jeder, der sich für die Musik der Band interessiert, sie hören kann. Wenn Taylor Swift ihren Song „Fortnight“ persönlich für jeden spielen würde, der ihn auf Spotify hört, würde sie dafür 3.179 Jahre brauchen. Und das berücksichtigt keine Flugreisen. Künstler würden sich langweilen, vielleicht sogar nachlässig werden, was zu einem geringeren Erlebnis für ihre Zuhörer führen würde.
Was hat das also mit der Webentwicklung zu tun? Jedes Mal, wenn Sie ein UI-Steuerelement erstellen, müssen Sie sicherstellen, dass es funktioniert, robust und zugänglich ist. Es wird Ihnen langweilig, wenn Sie jedes Mal die gleiche Benutzeroberfläche neu schreiben. Es passieren Fehler, die zu einer schlechteren Erfahrung für Ihre Endbenutzer führen.
Ich bin seit fast 10 Jahren Webentwickler und habe selbst Hunderte von Komponenten geschrieben, oft immer wieder das gleiche UI-Muster. Ich habe Dutzende Komponentenbibliotheken verwendet und Admin-Dashboards, Komponentenbibliotheken, mobile Anwendungen, Blogs, Figma-Plugins, VSCode-Erweiterungen und mehr erstellt. Dieser Artikel wird eine Zusammenfassung dessen sein, wo ich die Rolle von Komponenten und Bibliotheken sehe und ob Entwickler ihre eigenen schreiben sollten.
Beim Erstellen von Benutzeroberflächen schreiben wir nicht jedes Mal das gesamte HTML-Markup von Grund auf neu. Wir schreiben unsere Benutzeroberflächen mithilfe von Komponenten – wiederverwendbaren Bausteinen, die gängige Benutzeroberflächenmuster kapseln. Wenn Sie eine Komponente schreiben, können Sie sie mehrmals in einem einzelnen Projekt oder sogar in unabhängigen Projekten verwenden.
Hier habe ich eine Gegenkomponente geschrieben, ich habe sie einmal geschrieben und an mehreren Stellen auf der Seite verwendet.
Wir Tutorial-Ersteller demonstrieren gerne Zähler, als ob sie aus der Mode kämen, aber eine reale Anwendung enthält Dutzende verschiedener UI-Muster, die als Komponenten geschrieben sind.
In diesem Artikel gruppiere ich CSS-Regeln, die den Stil für bestimmte UI-Muster bereitstellen, unter dem Dach der Komponenten. Die Definition kann unklar sein, je nachdem, wen Sie fragen.
Nicht alle Komponenten sind eigenständig. Es ist sinnvoll, viele Komponenten in einem einzigen Paket, einer sogenannten Komponentenbibliothek, zu gruppieren.
Wenn Sie möchten, dass Ihre Website ein bestimmtes Erscheinungsbild hat, können Sie eineKomponentenbibliothekverwenden. Es gibt Komponentenbibliotheken, die:
Aber es gibt sie in verschiedenen Formen und Größen. Die Definition, die ich beim Definieren einer Komponentenbibliothek verwende, ist die folgende:
Eine Komponentenbibliothek ist eine Reihe wiederverwendbarer Komponenten, die in ihrem Nutzen oder Erscheinungsbild (oder beidem) zusammenhängend sind. Eine großartige Komponentenbibliothek hilft Entwicklern, ihre UI-Anforderungen effizient zu erfüllen und bietet gleichzeitig ein beispielhaftes Erlebnis für den Endbenutzer.
Ich spreche später in diesem Artikel über Richtlinien und Designsysteme, daher nehme ich mir einen Moment Zeit, um sie klarzustellen. Es kann schwierig sein zu erkennen, wo das eine endet, das eine beginnt oder das andere das andere umfasst.
Designsysteme
Ich sehe ein Designsystem als eine Spezifikation dafür, wie Dinge aussehen, sich anfühlen und sich verhalten sollen. Ein Designsystem kann ein Produkt, eine Marke oder ein Unternehmen umfassen, um die Konsistenz aller Erlebnisbereiche sicherzustellen. Ein umfassendes Designsystem bestimmt alles von Schriftfamilien, Schriftgrößen, Abstandsgrößen, UI-Mustern und Kopierrichtlinien.
Einige der bekanntesten Designsysteme sind:
多くのデザイン システムは企業に固有のものですが、マテリアル デザインのようなデザイン システムがあり、世界中のチームが使い慣れた感触の製品を構築する近道として使用しています。おそらくマテリアル デザインの原則を使用したいくつかの製品を使用したことがあるでしょうが、基本的なユーザビリティの問題がまったくないわけではありません。
コンポーネントライブラリ
コンポーネント ライブラリに関しては、デザイン システムのコード実装である場合とそうでない場合があります。デザイン システムを導入している会社で働いている場合は、対応するコンポーネント ライブラリ (存在する場合) がそのシステムと緊密に統合されている可能性があります。
たとえば、Google のマテリアル Web は、マテリアル デザインの Web コンポーネント実装です。 Base Web コンポーネントと Lightning Web コンポーネントもオープンソースです。
UI コンポーネント (またはウィジェット) の概念は長い間存在しています。博物館に匹敵するほどのレトロなユーザー インターフェイスを見たい場合は、ポップコーンを手に取り、1974 年から 1990 年までの「すべてのウィジェット」をまとめた 2 時間以上のビデオをご覧ください。
2000 年代初頭から、開発者が Web 用に構築するのを支援するために作成されたコンポーネント ライブラリが見られるようになりました。当時の Web ブラウザの風景は、今私たちが見ているものからは認識できませんでした。 Internet Explorer のバージョンは仕様から完全に逸脱しており、当時 IE が巨大な市場シェアを持っていたことを考えると、これは特に問題でした。 Internet Explorer 6 は、開発が面倒であることで有名でした。主な原因は、ボックス モデルの実装が間違っていることと、CSS2 サポートが欠如していることです。
？これまで、Internet Explorer は、標準をサポートしていない古いブラウザーを満足させるために、開発者が非標準の HTML と CSS を記述できる「quirks モード」をサポートしていました。
幸いなことに、私が Web 開発を本格的に始めたとき、これらの問題の多くは解決されました。 この時点では、クロスブラウザーをサポートする複雑なインターフェイスの作成を少し簡単にするライブラリがまだいくつかありました。私が最初に使用したコンポーネント ライブラリである jQuery UI は、アコーディオンやその他のウィジェットをサポートしていました。しかし、ブラウザは常に進化しており、詳細要素と概要要素を使用してこのアコーディオン パターンを実装するネイティブな方法が 2020 年にはすべてのブラウザで利用できるようになりました。これらの要素を使用すると、JavaScript を使用せずにインタラクティブなアコーディオンを作成する作業をかなり進めることができます。
これを 2009 年と比較すると、これらの要素はどのブラウザにも実装されていません。動作させるにはかなりの量の JS が必要でした。 15 年前に Web 開発者がどのようにアコーディオンを実装していたのかを知りたい場合は、jQuery UI v1.7 のソース コードと CTRL+F の「アコーディオン」をご覧ください。
その後数十年にわたって、ウェブの機能は成長しました。より強力なデバイスはより強力なブラウザを意味します。ブラウザーが強力になると、Web アプリケーションもより野心的になりました。開発者は、ビルディング ブロック、つまりコンポーネント モデルを使用して UI を作成できるようにすることで、これらのアプリケーションの構築を支援するツールを作成することで対応しました。これらのコンポーネントベースのフレームワークの急増が見られました。私は Angular、React、Vue について話しています。それぞれにコンポーネント ライブラリの豊富なエコシステムがあります。
過剰な修正があり、フロントエンドの状況は、ほとんどの人のニーズに対して強力すぎるツールで飽和状態になっているという合理的な議論がありますが、そこには行きません。
このバージョンは、元の投稿にインタラクティブなスニペットが追加されて拡張されています
コンポーネント ライブラリを構築する際の課題は、それが1 回で完了するものではないということです。最も人気のあるライブラリの多くは何年も前から存在しており、現在の状態に至るまでに膨大な研究、使用上のフィードバック、貢献が行われてきました。
優れたコンポーネント ライブラリには次のような特徴があることがわかりました:
逆に、コンポーネント ライブラリが良くないかどうかを見分ける方法は、アクセシビリティを考慮していない、一貫性のない API がある、プロジェクトの管理がほとんどない、または明確で一貫したドキュメントがない場合です。
コンポーネント ライブラリを使用する利点は何ですか? 私たちは優れたコンポーネント ライブラリがどのようなものかを知っています。それでは、どのようにしてあなたの生活とユーザーの生活をもう少し良くできるかを見てみましょう。期限が厳しいプロジェクトに取り組んでいる場合は、効率的であることが重要です。しかし、堅牢な Web エクスペリエンスを構築することを犠牲にして効率性を実現するべきではありません。コンポーネント ライブラリを使用すると、車輪の再発明に費やす時間が減り、より細かい部分に集中できるようになります。
私たちは反復的な作業によって動機付けられるわけではありません。私たちは技術的な挑戦を楽しんでいますが、同じコンポーネントを何度も書くことは楽しい挑戦ではありません。退屈して間違いを見逃してしまうと何が起こるかについてはすでに話しました。
ダイアログ コンポーネントを最初から実装したい場合は、次のことを行う必要があります:
上記のことを覚えて実装するには手間がかかりますが、間違った方法でフォーカスを処理した場合など、インターフェイスが文字通り使用できなくなる可能性があります。
エンド ユーザーを念頭に置いて構築されたコンポーネント ライブラリを使用することで、同じコンポーネントの再構築にかかる時間を短縮しながら、壊れたエクスペリエンスが導入されるリスクを防ぐことができます。
複数の異なる Web アプリケーションを使用する会社で働いている場合、通常は一連のガイドラインに従います。これらのガイドラインは、使用するカラー パレット、タイポグラフィのサイズ、UI 要素の外観と動作を決定する場合があります。
しかし、コンポーネントを書き直すと、アプリケーションがスタイルガイドから逸脱する可能性が高くなります。コンポーネント ライブラリを用意すると、ブランド ガイドラインに照らしてコンポーネントの UI をより簡単に監査できるため、どこで使用しても見栄えがよくなります。
Uber には、同じユーザー インターフェイス要素を共有するいくつかの異なるアプリがあります。これらのアプリ間で同じコンポーネント ライブラリが使用されているとほぼ確信しています。そうすることで、各新しいアプリがブランドのガイドラインに準拠していることが事実上保証されます。
上で述べた利点は、独自のコンポーネント ライブラリを使用しているかサードパーティを使用しているかに関係ありません。あなたまたはあなたのチームがライブラリを構築せず、代わりにサードパーティに頼ると決めた場合は、次のことを検討する価値があります。
コンポーネント ライブラリを選択することにより、フロントエンド コードの記述方法とインターフェイスの外観と動作に大きな影響を与えるパートナーを選択することになります。
前者はあなたに大きな影響を与え、後者はエンドユーザーに大きな影響を与えます。コンポーネント ライブラリを使用すると、そのコンポーネント ライブラリの標準に拘束されることになります。
このライブラリでは、メジャー バージョンに大規模な破壊的な変更が導入される可能性があり、これには専用の開発時間が必要となる可能性があり、深刻なリグレッションが発生しないことを確認するために多くのテストが必要になる可能性があります。
数年前、私は React Admin を使用して、社内部門向けの複雑な管理ダッシュボードを構築しました。このライブラリは、複雑なデータの取得と表示に特化した一連のコンポーネントを提供しました。当時のアプリケーションは React Admin に大きく依存していたため、特に React Admin で使用されていた内部ツールの多くが他のツールに置き換えられていたため、メジャー バージョン間のアップグレードは困難でした。変更面は非常に大きく、私たちはアップグレードと発見した問題の報告にかなりの時間を費やしました。
独自のソリューションを構築しても長期的には時間を節約できたとは思えませんが、特にツールに全面的に取り組む前に、この種のベンダー ロックインは検討する価値があります。
ショックなことですが、多くのコンポーネントを含むライブラリは、多くのコードを使用して作成される傾向があります。依存関係をインストールするときにダウンロードするコード、およびエンドユーザーに送信するコード。
最新のツールを使用すると、未使用のコードを削除するツリーシェイキングなどのバンドルの最適化を簡単に実行できますが、ユーザーが必要としないコードをすべて削除しているという保証はありません。
使用しているライブラリを深く調べない限り、ライブラリがインポートしている個別のパッケージをすべて認識していない可能性があります。何百もの不要な依存関係が発生する可能性があります。 e18e コミュニティの人々は、この問題を明らかにするとともに、修正するために懸命に取り組んできました。
これらの問題の多くは、独自のコンポーネント ライブラリのローリングに関しても言えます。最大の違いは、コンポーネント ライブラリを管理できることです。特定の問題をどのように解決するかを定義でき、欠点の改善を制御できます。
World Wide Web の最初の提案は、CERN の研究者間のコミュニケーションを改善するツールでした。この提案では、ハイパーテキストを使用してドキュメントを共有し、相互にリンクする方法について概説しました。これはウェブの基本的な基礎であり、私たちは今でも謙虚なを使用しています。タグを使用して、Web 上の他の HTML ドキュメント間をリンクします。
しかし、ここ数十年でウェブの範囲は拡大し、私たちがウェブをナビゲートするために使用するブラウザーは、それ自体が猛獣になりました。今日のブラウザーは、強力な形式の創造的な表現と、ネイティブのようなソフトウェアの実行を可能にします。
そこには、汎用的なものもあれば、超ニッチなものも含め、何百もの異なるソリューションがありますが、次のプロジェクトに適切なツールを見つけるには、次のような複雑な意思決定プロセスが必要です。
これはすべてのユースケースやコンポーネント ライブラリ タイプの包括的なリストではありませんが、次の点でコンポーネント ライブラリがどのように異なるかを示しています。
最も一般的なコンポーネント ライブラリのタイプをいくつか見てみましょう
？簡単な補足: 独自の Web コンポーネント ライブラリを構築することに興味がある場合は、私のコース Component Odyssey をチェックすることを検討してください。あらゆるフロントエンド フレームワークで動作するコンポーネント ライブラリを構築して公開する方法を学びます。
私にとって、最初に思い浮かぶのは Bootstrap です。昔は、サイトにちょっとしたペイントを加えたい場合は、CDN リンクをブートストラップ CSS ファイルにドロップすると、すぐにブートストラップの外観が得られました。 2010 年代半ばにはどこにでもありました。
この種のツールの技術的範囲は次のとおりです
へ
Open Props などの他の多数のツールは、その間のどこかに収まります。
インタラクティブな Web アプリケーションを構築している場合は、見栄えが良く、適切に機能する一連のコンポーネントを入手したいと思うかもしれません。必要なものすべてを提供する既製のコンポーネント ライブラリが多数あります。
アプリを作成するフレームワークに関係なく、使用できる見栄えの良いコンポーネントのセットが存在する可能性があります。
もう 1 つの優れたコンポーネント ライブラリは Shoelace です。これは、完全にインタラクティブで完全にスタイル設定されたコンポーネントを多数提供します。
Shoelace のようなライブラリが特に興味深いのは、ブラウザに組み込まれたコンポーネント作成方法である Web コンポーネントを使用して構築されていることです。 Shoelace などのツールを使用して UI を構築すると、さまざまなフロントエンド フレームワーク間で使用できるという追加の利点が得られます。これについては、以前少し話したことがあります。
これは、Vue と React で使用されている同じ靴ひもコンポーネントです。
プロジェクトの仕様によっては、既製のツールを使用する余裕がない場合があります。あなたの設計仕様は非常に具体的である可能性があります。
摩擦の最初の兆候でコンポーネントを転がすチームを見てきました。また、手動のデータ ピッカーのケースでは、ユーザー エクスペリエンスが大幅に低下しました。振り返ってみると、スタイルのないコンポーネント ライブラリを使用すると、チームは時間を確保しながら外観に柔軟性を与えることができたでしょう
だからこそ、柔軟なスタイリング フックを備えた完全にスタイルの設定されていないコンポーネントを提供するライブラリを利用できるのです。優れたライブラリであれば、これらの複雑なやり取りもすべて処理してくれます。これは両方の利点を生かした状況です。
幅広いデバイスや入力モードでテストしない限り、ブラウザーが提供するスタイル フックを超えたものを押し込みたい場合は、チェックボックスを台無しにするのは簡単です。
元の記事には、スクリーン リーダーを使用してさまざまなチェックボックスの実装を操作する様子を示すビデオが含まれています
Radix はライブラリのよく知られた例ですが、React を使用して構築されています。
このようなコンポーネント ライブラリの他の例としては、Lion や HeadlessUI があります。
一部の開発者は、両方の長所を望むかもしれません。マークアップ、スタイル、機能を完全に制御しながら、信頼できるサードパーティ ライブラリによってコンポーネントが構築されることを望む場合があります。 ShadCN のようなライブラリでは、開発者がコンポーネント定義をコピーして自分のプロジェクトに貼り付けることができるため、この種のワークフローが可能になり、事実上コンポーネントを所有できるようになります。
それらすべてを制御する 1 つのコンポーネント ライブラリがないのはなぜでしょうか?この時点で、そのような単一コンポーネント ライブラリが存在しない理由はおそらく明らかです。コンポーネント ライブラリのさまざまなグループを網羅的に見ていきました。しかし、ブラッド・フロストが主導した概念である「グローバル・デザイン・システム」を導入しようとする動きがある。発表の中で、ブラッドは、これまで参加してきた何百ものプロジェクトにおいて、UI コントロールの多くがこれらのさまざまなプロジェクト間で同様に動作する (または動作するはずである) にもかかわらず、開発者はすべてのプロジェクトで同じものを再実装していると概説しています。これにより、多くの時間と労力が無駄になり、プロジェクト間の不一致が生じています。これは、既存のコンポーネント ライブラリにも拡張されます。 React Aria のコンボボックスのキーボード動作が ShadCN のコンボボックスの動作とは異なることがわかります。
元の記事には、キーボードを使用してさまざまなコンボボックス実装を操作する様子を示すビデオがありますBrad Frost は、HTML でまだ利用できないコントロールの機能のベースラインを確保するために、ほぼすべてのフロントエンド プロジェクトで採用できる Web コンポーネントのセットとしてグローバル デザイン システムを提案しています。
オープン UI 内では、これが今後数年以内にどのように形になり始めるかについて議論が行われています。
独自のコンポーネント ライブラリを構築する必要がありますか?
私の最初の考えは次のとおりです:
ライブラリを構築する必要はないと思います。私は一般的に、実績のあるライブラリを選ぶことを好みます。特に次のようなもの:
何千ものプロジェクトで使用されていますコンボボックスを例に考えてみましょう。検索入力と選択メニューが 1 つになったものです。独自に作成した場合は、見栄えが良く、マウスで操作できるかもしれません。ただし、次のことも考慮する必要があります:
クロスブラウザのサポートスクリーン リーダーのサポートは特に複雑であり、独自の箇条書きリストを作成する価値があります。スクリーン リーダーをサポートするには、以下も処理する必要があります:
ライブリージョンこれは、アクセシビリティを念頭に置いて開発された信頼できるコンポーネント ライブラリを選択するのも開発者次第であることを意味します。このため、強力なコミュニティを持つコンポーネント ライブラリを選択することも重要です。次のことができることが重要です:
特定のライブラリに関して他の人が報告したバグや問題を確認しますコンポーネント ライブラリの構築を怖がらせていないのであれば、自分自身に反論して、独自のライブラリを構築することがなぜ本当に良いことなのかを説明させてください。
コンポーネント ライブラリの構築に注意と注意を払うと、ブラウザ プラットフォーム、アクセシビリティのベスト プラクティス、テスト方法などをより深く理解できる開発者になることができます。
しかし、それだけで終わるわけではありません。独自のライブラリを構築する素晴らしい理由がいくつかあります。
まず、ニーズに合わせたものを構築し、既製のコンポーネント ライブラリから生じる可能性のある肥大化を回避できます。エンドユーザーを理解できるかどうかはあなたとあなたのチーム次第であり、エンドユーザー向けに特別なものを構築することもできます。
新しいアプローチを実験する機会もあります。非常にニッチな問題がある場合、そのニーズを解決するコンポーネント ライブラリが存在しない可能性があります。それは次のようなコンポーネント ライブラリである可能性があります:
これにより、ニーズに合わせたものを構築する機会が得られます。その後、ニーズの変化に応じて、または問題領域をより深く理解するにつれて、物事を変更したり修正したりする機会が得られます。
重要なことは、そうすることでウェブについてさらに学ぶことができるということです。初めてコンポーネント ライブラリを構築する場合は、HTML ブラウザの仕様をさらに深く掘り下げたり、Web アクセシビリティの知識をブラッシュアップしたりする機会になる可能性があります。これにより、Web 開発者としての能力が向上し、将来的にはあらゆるフロントエンド プロジェクトで役立つでしょう。次の仕事を見つけるのにも役立つかもしれません。
したがって、コンポーネント ライブラリを構築する必要があるかどうかは、最終目標によって異なります。次のような質問を検討してください:
答えに応じて、プロジェクトに適切な判断を下すことができます。
読んでいただきありがとうございます！独自の Web コンポーネント ライブラリの構築に興味がある場合は、私のコース Component Odyssey をチェックしてみてください。あらゆるフロントエンド フレームワークで動作するコンポーネント ライブラリを構築して公開する方法を学びます。
Das obige ist der detaillierte Inhalt vonWas ist eine Komponentenbibliothek und sollten Sie eine eigene erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
