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

75

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).

material-design  angular-material2  material-components 
— DeepakV
quelle
Bitte beachten Sie, dass Angular Material für Angular 1.x eine andere Einheit ist als Angular Material2 für Angular 2+. Auch Materialkomponenten für das Web unterscheiden sich von den Material- / Papierelementen von Polymer, bei denen es sich um standardbasierte Webkomponenten handelt. Keine der in dieser Frage diskutierten Technologien qualifiziert sich als standardbasierte "Webkomponente".
— Splaktar
1
vereinbart .. danke für die Bearbeitung
— DeepakV
1
Verwenden Sie kein eckiges Material 2. Es ist Scheiße. Ich bin auf Ihren Beitrag gestoßen, weil ich nach einer Alternative zu eckigem Material 2 gesucht habe. Checkout Vue.js 'vuetify-Material. Winkelmaterial sollte so aussehen.
— CENT1PEDE
1
Muss Cent1pede zustimmen. Die Dokumentation für Angular Material Design 2 ist absoluter Mist
— Steven Hoff

Antworten:

54

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.

— Travis Kaufman
quelle
36
Daher gibt es in Google selbst noch keinen klaren Weg. Wir müssen noch warten, bis ein Manager entscheidet, welcher getötet werden soll.
— neclepsio
11
Ich sehe es derzeit so, dass es für sie (und für uns, die Entwickler) weitaus besser wäre, mehr Ressourcen auf MDC-Web zu konzentrieren und das material2-Projekt in ein einfaches ng2-Wrapper / Adapter-Projekt für MDC-Web umzuwandeln .
— Rodrigo Quesada
1
Bitte machen Sie ein komplexeres Beispiel für die MDC-Web-Implementierung mit angle2
— Vlad
1
Auch ein gutes Beispiel github.com/trimox/angular-mdc-web
— Vlad
2
"Ja wirklich?" Vue? Schauen Sie sich diese vuetifyjs.com an, es ist das perfekte Material-Framework.
— CENT1PEDE
18

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

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.
— Vamshi
quelle
1
Beim Anpassen von Material2 müssen Sie Variablen festlegen und Mixins verwenden. Siehe Theming Ihrer benutzerdefinierten Komponenten und Verwendung von Variablen im Quellcode (z. B. der Symbolleiste )
— Alex Klaus
@AlexKlaus Wenn ich mich nicht irre, dient der von Ihnen angegebene Link nur dazu, die Farben (Thema) und nicht das andere CSS der Komponenten zu ändern. Sie wurden entwickelt, @angular/cdkum Komponenten anzupassen, denke ich. Ich muss es mir ansehen und meine Antwort aktualisieren.
— Vamshi
2
Ich wollte darauf hinweisen, dass beide starr geschrieben sind. Abgesehen von der Änderung des Themas (lesen Sie "Farben") gibt es nicht viel, was Sie sicher tun können. Sie haben MDC for Web als "vollständig anpassbar" bezeichnet, aber Sie können nicht einmal einfache Dinge wie das Ändern der Symbolleistenhöhe ausführen (siehe hier die Antwort auf eine solche Funktionsanforderung).
— Alex Klaus
Das Hauptverkaufsargument ist die strikte Einhaltung des Materialdesigns, sodass nur wenige Dinge schwer zu überschreiben sind. Aber als ich "vollständig anpassbar" sagte, meinte ich, wir können sie in unserer benutzerdefinierten Komponente ändern, die daraus erstellt wird. Im Falle von Material wurde es nicht einmal in scss hinzugefügt, sie waren in Javascript fest codiert und konnten überhaupt nicht überschrieben werden. Ich fand es sehr schwierig, die Winkelkomponenten zu erweitern. Sie können die Fragen sehen, die ich gestellt habe ..
— Vamshi
Möglicherweise hat sich die Implementierung geändert, seit Sie Ihre Antwort gegeben haben, aber zu sagen, dass Angular Material nicht angepasst werden kann, ist absolut falsch. Sie haben sogar eine Seite dazu in der Dokumentation: material.angular.io/guide/customizing-component-styles
— elDuderino
4

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.
— Rajesh Jain
quelle
2

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.

— Springrbua
quelle
-1

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

— Tiedye
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.