web-dev-qa-db-ja.com

WebのマテリアルコンポーネントとAngularマテリアル2

最近、MDL(Material Design Lite)プロジェクトの後継が Webのマテリアルコンポーネント として開始されました。その目標の1つは、「他のJSフレームワークおよびライブラリとのシームレスな統合」です。

別のプロジェクトがあります Angular Material2 は、Angular(v2 +)専用の材料設計コンポーネントを提供します。

どちらのプロジェクトも、マテリアルデザインベースUIコンポーネントを作成しています。また、コンポーネントの同様のセット ready / in-active-development 、および近日公開と同じコンポーネントのセット( hereここ )。

誰かが2つのプロジェクトの重複を理解するのを助けてくれますか?新しいプロジェクトのためにどちらを選ぶべきですか?

基本的なレベルでは、Angular Material2がAngularプロジェクトとよりシームレスかつ緊密に統合されるのに対して、WebのMaterial Componentsは複数のJSフレームワークが使用するフックを提供することを理解しています。しかし、オーバーラップの理由と、より多くのモメンタムがあるコンポーネントを確認することはできません(より多くのコンポーネントをお読みください)。

68
DeepakV

完全な開示:私は Webの素材コンポーネント に取り組んでいるので、私の意見は少し偏っているかもしれません:)

TL; DRは、可能な限り最も効率的な方法でUIを構築するのに役立つライブラリを使用するか、それらを並べて使用します。チェックアウト angle2統合の例 angular-mdc-web ng2。を使用してMDC-Webコンポーネントをラップする方法を確認します

言及されているように、Webのマテリアルコンポーネント(略称MDC-Web)の目標は、マテリアルデザインコンポーネントの標準的な実装を作成することですWebプラットフォーム全体。 Angular/material2は優れたライブラリです-私も含め、Material Designチームの私たちの多くが貢献してきましたが、Angular2以外のアプリケーションでは除外されます。さらに、React、Aurelia、VueなどのGoogle以外のライブラリとフレームワークには、ニーズに合った公式のソリューションnoがあります。

そうは言っても、Angular2は「Webプラットフォーム全体」の範囲に該当します。そのため、Angular2は間違いなくサポートしたいと考えています。両方のプロジェクトのこの段階では、angular/material2が必要としない、またはその逆のコンポーネントが必要になる場合があります。可能な限り最善の方法で目標を達成するのに役立つライブラリを使用することをお勧めします。それは角度/マテリアル2、MDC-Web、または正直に両方の可能性があります。たとえば、 our select component をmaterial2のコンポーネントの横で使用できますが、問題なく動作するはずです。 TL; DRで説明したように、- angular-mdc-web は、MDC-Webを慣用的なangle2 + APIでラップするフル機能のライブラリです。

最後に、MDC-WebはMaterial Designチーム自身が開発した唯一のライブラリです。このため、マテリアルデザインの仕様を作成したのと同じ人々と協力して反復することができます。

49
Travis Kaufman

アップデート(2018年3月16日):

@elDuderinoが提供するコメントから、Material2にはカスタマイズする方法があるようです。提供された答えは、マテリアルがcdkを取得する前でした。

https://material.angular.io/guide/customizing-component-styles

両方のフレームワークは現在非常に成熟しています。私はそれらの両方を異なるプロジェクトで使用します。あるフレームワークから別のフレームワークにプロジェクトを移行するのに1週間しかかかりませんでした。だから私は両方を試してみて、どちらがあなたが快適であると思うかを提案するでしょう。


私の経験を共有します。その意見に偏りがあります。修正するのが大好き。

ゼロから始めて、Angularを使用しています。マテリアルを使用することにしました。より良いフレームワークを探し始めて、マテリアライズ、MDL、Angular Material 2、そして最後にMDC for Webを試しました。

特にMaterial2対WebのMDCについての私の観察結果を次に示します。

素材2

  • 長所
    • 既製。すべてが利用可能であり、作業を開始する準備ができています
    • 角度に近いアーキテクチャ
  • 短所

    • コンポーネントリストはまだ完全ではありません(時間が経つと取得されるため、大丈夫です)
    • カスタマイズは不可能です

    テーマを追加できることはわかっていますが、それだけです。コンポーネントのすべてのHTMLおよびCSSは、Angularコンポーネントに追加されます。したがって、JavaScriptとしてコンパイルされ、実行時に適用されます。そのため、動作をオーバーライドする方法はありません。私は一週間試しましたが、できませんでした。

    ここに私が尋ねた質問があります(意見を求めているように見えたため、そのうちの1つは終了するようマークされていました-.-)

    Angularマテリアル2のカスタマイズ方法

    Angularコンポーネントスタイルの拡張方法

    もちろん回答は得られず、カスタマイズすることもできませんでした。私が間違っている場合、私に指示してください。

上記のアップデートを確認してください

Web用のMDC

  • 短所

    • Angularではすぐに利用できません

    Angular方法でやりたい場合、すぐに使用を開始することはできません。コンポーネントごとにAngularのラッパーを作成する必要があります。多少の努力が必要な場合があります。しかし、すべてのチームはカスタマイズにある程度の時間を費やすことができ、より簡単にするための サードパーティ の努力があります。 angularの方法で行わなくてもよい場合は、ラッパーなしで開始できると思います。

    • コンポーネントのリストはまだ完成していません(時間が経つとうまくいくので大丈夫です)
  • 長所

    • 汎用、フレームワークに関連付けられていません。常に安全に投資できます。
    • 他のフレームワーク開発者も使用するため、より多くの貢献。時間が経つにつれて、より多くの貢献と将来の証拠が得られます(ほぼ)
    • 完全にカスタマイズ可能。
    • フレームワークのみのように見えます材料設計チームが直接関与している
    • モバイルデバイスの知識/スタイルも使用できます。
    • ドキュメントは素晴らしいです。多くの労力と時間が費やされているように見えます。
17
Vamshi

Angular Material 2を検討している場合、Sketch Material Plugin/Theme EditorおよびGalleryツールはMDCでのみ使用できます。私は同じ道を歩んでおり、Angular Material 2から始め、Angular Ivyの最近の紹介で、チームがどれだけの労力を投入するかわからないAngular Material 2.私は安全な賭けであるMDCに移行しています。

最近のReadmeから:

2019年第1四半期→第2四半期に予定されている高レベルのもの(1月-6月):

  • Angular Materialチームのほとんどは、Ivyを支援するフレームワークチームに貸与されています。 Angular CDKおよびAngular Materialテストを使用してコードパスを検証し、Googleアプリケーションを新しいレンダリングパイプラインに切り替える際の問題のデバッグを支援してきました。
  • また、マテリアルデザインチームと協力して、より深く連携する戦略を進めています。計画がさらに進めば、これについてさらに共有する必要があります。
  • 各種バグ修正とマイナーな機能改善。
  • エルゴノミクスを改善するためのツリーコンポーネントのAPI拡張の設計。
4
Rajesh Jain

Angular Materialチームは、MDCチームと協力する予定です。

2018年第4四半期に予定されている高レベルのもの(10月-12月):

  • 独自のビルドおよび自動化ツールを改善する
  • バグを修正し、Google内部の技術的負債を削減する
  • MDC Webチームとのコラボレーション方法に関する長期計画に取り組んでいます
  • 高度なテーブル改善のための設計(列のサイズ変更、選択ディレクティブ、インライン編集)

README

これは約20日前(2018年10月10日)にreadmeに追加されました。
将来、Angularマテリアルは、WebのMDCのAngularラッパーまたはAngular実装の一種にすぎない可能性があります。

2
Springrbua