Materialkomponenten für das Web vs Angular Material 2 [geschlossen]

Kürzlich wurde der Nachfolger des MDL-Projekts (Material Design Lite) als Material Components for the Web gestartet . Eines seiner Ziele ist "Nahtlose Integration mit anderen JS-Frameworks und -Bibliotheken".

Es gibt ein weiteres Projekt Angular Material2 , das Materialdesignkomponenten speziell für Angular (v2 +) bereitstellt.

Beide Projekte erstellen materialdesignbasierte UI-Komponenten . Außerdem verfügen sie über einen ähnlichen Satz von Komponenten, die für die Entwicklung bereit / inaktiv sind , und über denselben Satz von Komponenten wie in Kürze ( hier und hier aufgeführt ).

Kann mir bitte jemand helfen, die Überschneidung zwischen zwei Projekten zu verstehen und welches für neue Projekte auszuwählen?

Grundsätzlich verstehe ich, dass Angular Material2 sich nahtloser und enger in Angular-Projekte integrieren lässt, während Material Components for the Web Hooks für die Verwendung mehrerer JS-Frameworks bereitstellt. Aber ich sehe keinen Grund für eine Überlappung und welche wird mehr Schwung haben (lesen Sie mehr Komponenten).

Vollständige Offenlegung: Ich arbeite an Materialkomponenten für das Web , daher ist meine Meinung möglicherweise etwas voreingenommen :)

TL; DR Verwenden Sie die Bibliothek, mit der Sie Ihre Benutzeroberfläche so effizient wie möglich erstellen können, oder verwenden Sie sie nebeneinander. Auscheckenunser Angular2-Integrationsbeispiel angle-mdc-web, um zu sehen, wie eine MDC-Web-Komponente mit ng2 umbrochen wird.

Das angedeutete Ziel von Materialkomponenten für das Web (Abkürzung MDC-Web ) besteht darin, eine kanonische Implementierung von Materialdesign-Komponenten für die gesamte Webplattform zu erstellen. Angular / material2 ist eine hervorragende Bibliothek - viele von uns im Material Design-Team, auch ich, haben dazu beigetragen -, aber sie schließt Anwendungen ohne Angular2 aus. Darüber hinaus haben Nicht-Google-Bibliotheken und Frameworks wie React, Aurelia, Vue und andere keine offizielle Lösung, die ihren Anforderungen entspricht.

Abgesehen davon fällt Angular2 in unseren Anwendungsbereich der "gesamten Webplattform", und wir möchten es aus diesem Grund definitiv unterstützen. Zu diesem Zeitpunkt haben wir in beiden Projekten möglicherweise einige Komponenten, die Sie benötigen, die Angular / Material2 nicht benötigt, oder umgekehrt. Ich möchte Sie ermutigen, die Bibliothek zu verwenden, mit der Sie Ihre Ziele bestmöglich erreichen können. Das könnte eckig / material2 sein, es könnte MDC-Web sein, oder ganz ehrlich, es könnte beides sein. Zum Beispiel könnten Sie unsere ausgewählte Komponente neben den Komponenten von material2 verwenden, und die Dinge sollten gut funktionieren. Wie in TL; DR erwähnt, ist Angular- MDC-Web eine Bibliothek mit vollem Funktionsumfang, die MDC-Web in eine idiomatische Angular2 + -API einbindet.

Abschließend ist festzuhalten, dass MDC-Web die einzige Bibliothek ist, die vom Material Design-Team selbst entwickelt wurde. Aus diesem Grund können wir mit denselben Personen zusammenarbeiten und iterieren, die die Material Design-Spezifikation verfasst haben.

Update (16. März 2018):

Aus den Kommentaren von @elDuderino scheint Material2 eine Möglichkeit zum Anpassen zu haben. Die Antwort war, bevor Material CDK hatte.

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

Beide Frameworks sind jetzt sehr ausgereift. Ich benutze beide in verschiedenen Projekten. Ich habe nur eine Woche gebraucht, um ein Projekt von einem Framework auf ein anderes zu migrieren. Also würde ich vorschlagen, beides zu versuchen und zu sehen, was Sie bequem finden.

Ich werde meine Erfahrungen teilen. Es ist eigensinnig und voreingenommen. Liebe es, korrigiert zu werden.

Wir fangen bei Null an und verwenden Angular. Wir haben uns für Material entschieden. Ich begann meine Suche nach einem besseren Framework und probierte alle aus: Materialise, MDL, Angular Material 2 und schließlich MDC for Web.

Hier sind meine Beobachtungen, insbesondere für Material2 vs MDC for Web.

Material2

• Vorteile
  • Fertig. Alles ist verfügbar und bereit zu arbeiten
  • Architektur in der Nähe von Angular

• Nachteile

  • Die Komponentenliste ist noch nicht vollständig (sie werden mit der Zeit fertig, also ist es in Ordnung)
  • Customizing ist nicht möglich

  Ich weiß, wir können Themen hinzufügen, das ist alles. Das gesamte HTML und CSS für die Komponenten wird in Angular Components hinzugefügt. Es ist also als JavaScript kompiliert und gilt zur Laufzeit. Es gibt also keine Möglichkeit, das Verhalten zu überschreiben. Ich habe es eine Woche lang versucht und konnte es nicht tun.

  Hier sind Fragen, die ich gestellt habe (eine davon wurde zum Schließen markiert, da sie offenbar nach Meinungen fragte -.-)

  So passen Sie Winkelmaterial an 2

  So erweitern Sie den Stil von Winkelkomponenten

  Natürlich haben sie keine Antworten bekommen und ich konnte sie nicht anpassen. Wenn ich falsch liege, leiten Sie mich bitte.

Überprüfen Sie das oben angegebene Update

• Die Dokumentation ist schlecht

  Sehen wir uns ein Beispiel an. Siehe die Anzahl der bereitgestellten Beispiele.

  MDC für Webkartenbeispiele

  Material2 Beispiele für Karte

MDC für Web

• Nachteile

  • Für Angular nicht ohne weiteres verfügbar

  Wir können es nicht sofort verwenden, wenn Sie es auf eckige Weise tun möchten. Sie müssen für jede Komponente einen Wrapper für Angular schreiben. Könnte etwas Mühe kosten. Aber jedes Team kann sich etwas Zeit für die Anpassung leisten, und es gibt Anstrengungen Dritter , um dies zu vereinfachen. Wenn es in Ordnung ist, es nicht eckig zu machen, können wir meiner Meinung nach ohne die Wrapper anfangen.

  • Die Komponentenliste ist noch nicht vollständig (sie werden mit der Zeit fertig, also ist es in Ordnung)

• Vorteile

  • Generisch, nicht an das Framework gebunden. Immer sicher zu investieren.
  • Mehr Beitrag, da es auch andere Framework-Entwickler verwenden. Im Laufe der Zeit erhält es mehr Beiträge und Zukunftssicherheit (fast)
  • Völlig anpassbar.
  • Erscheint wie nur ein Rahmen Das Materialdesign-Team ist direkt daran beteiligt
  • Kann das Wissen / die Stile auch für mobile Geräte verwenden.
  • Die Dokumentation ist großartig. Es sieht so aus, als würde viel Mühe und Zeit investiert.

Für Leute, die Angular Material 2 in Betracht ziehen, sind das Sketch Material Plugin / Theme Editor und das Galerie-Tool nur für MDC verfügbar. Ich bin auf dem gleichen Weg und habe mit Angular Material 2 begonnen. Mit der kürzlich eingeführten Einführung zu Angular Ivy bin ich mir nicht sicher, wie viel Aufwand das Team in Angular Material 2 investieren wird. Ich wechsle zu MDC, das ist eine sichere Wette.

Aus der letzten Readme:

Hochrangiges Material für Q1 → Q2 2019 (Januar - Juni) geplant:

• Der größte Teil des Angular Material-Teams ist an das Framework-Team ausgeliehen, das bei Ivy hilft. Wir haben die Angular CDK- und Angular Material-Tests verwendet, um Codepfade zu validieren und Probleme beim Umschalten von Google-Anwendungen auf die neue Rendering-Pipeline zu beheben.
• Wir arbeiten auch mit dem Material Design-Team an einer Strategie für eine engere Zusammenarbeit. Wir werden mehr darüber zu erzählen haben, sobald unsere Pläne weiter fortgeschritten sind.
• Verschiedene Bugfixes und kleinere Funktionsverbesserungen.
• Design für API-Verbesserungen an der Baumkomponente zur Verbesserung der Ergonomie.

Es scheint, dass das Angular Material-Team plant, mit dem MDC-Team zusammenzuarbeiten:

Hochrangiges Material für das vierte Quartal 2018 (Oktober - Dezember) geplant:

• Verbessern Sie unsere eigenen Build- und Automatisierungswerkzeuge
• Beheben Sie Fehler und reduzieren Sie technische Schulden in Google
• Arbeiten an langfristigen Plänen für die Zusammenarbeit mit dem MDC-Webteam
• Entwürfe für erweiterte Tabellenverbesserungen (Spaltengrößenänderung, Auswahlanweisungen, Inline-Bearbeitung)

( README )

Dies wurde vor ungefähr 20 Tagen (10. Oktober 2018) zur Readme-Datei hinzugefügt.
Es besteht also die Möglichkeit, dass Angular Material in Zukunft nur noch eine Art Angular-Wrapper oder Angular-Implementierung des MDC for Web ist.

Angular Material 2 ist immer noch veraltet und implementiert die Materialspezifikation nicht korrekt. Benutze es nicht.