web-dev-qa-db-fra.com

Composants matériels pour le Web vs Angular Material 2

Récemment, le successeur du projet MDL (Material Design Lite) a été lancé en tant que Composants matériels pour le Web . L'un de ses objectifs est "Intégration transparente avec d'autres infrastructures et bibliothèques JS".

Il existe un autre projet Angular Material2 qui fournit des composants de conception de matériau spécifiques à Angular (v2 +).

Les deux projets créent une conception de matériau basée sur composants d'interface utilisateur. En outre, ils ont un ensemble similaire de composants prêt / in-active-development , et le même ensemble de composants que coming-soon (répertoriés ici et ici ).

Est-ce que quelqu'un peut m'aider à comprendre le chevauchement entre 2 projets et lequel devrais-je choisir pour les nouveaux projets?

À un niveau fondamental, je comprends bien que Angular, Material2 s'intégrera de manière plus transparente et plus étroite avec Angular projets, tandis que Matériau pour le Web fournira des points d'ancrage pour plusieurs JS. cadres à utiliser. Mais je ne vois pas la raison du chevauchement et laquelle aura plus d’élan (lisez plus de composants).

material-designangular-material2material-components
68
DeepakV

Divulgation complète: je travaille sur composants matériels pour le Web , mon avis est donc un peu biaisé :)

TL; DR utilise n’importe quelle bibliothèque pour vous aider à construire votre interface utilisateur de la manière la plus efficace possible, ou à les utiliser côte à côte. Check-out notre exemple d'intégration angular2 angular-mdc-web pour savoir comment envelopper un composant MDC-Web à l'aide de ng2.

L'objectif de Composants matériels pour le Web (en abrégé MDC-Web ) est de créer une implémentation canonique des composants de Material Design. pour l'ensemble de la plate-forme Web. Angular/material2 est une excellente bibliothèque - nous avons été nombreux à faire partie de l'équipe de conception de matériaux, y compris moi-même - mais elle exclut les applications non angulaires2. De plus, les bibliothèques et les frameworks autres que Google, tels que React, Aurelia, Vue et autres, disposent de non solution officielle pour répondre à leurs besoins.

Cela étant dit, Angular2 fait partie de notre "plate-forme Web entière", et nous voulons absolument le soutenir pour cette raison. À ce stade des deux projets, nous pouvons avoir certains composants dont vous avez besoin, contrairement à angular/material2, ou inversement. Je vous encourage à utiliser la bibliothèque qui vous aide à atteindre vos objectifs de la meilleure façon possible. Cela pourrait être angulaire/matériel2, ce pourrait être MDC-Web, ou très honnêtement, ce pourrait être les deux. Par exemple, vous pouvez utiliser notre composant choisi le long des composants de side material2, et tout devrait bien fonctionner. Comme mentionné dans le TL; DR, angular-mdc-web est une bibliothèque complète qui englobe MDC-Web dans une API angular2 + idiomatique.

Enfin, MDC-Web est la seule bibliothèque développée par l’équipe de conception de matériel elle-même. Pour cette raison, nous pouvons collaborer et itérer avec les mêmes personnes qui ont créé la spécification Material Design.

49
Travis Kaufman

Mise à jour (16 mars 2018):

D'après les commentaires fournis par @elDuderino, Material2 semble pouvoir être personnalisé. La réponse fournie était avant que Material ne dispose de cdk.

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

Les deux cadres sont très mûrs maintenant. Je les utilise tous les deux dans différents projets. Il ne m'a fallu qu'une semaine pour migrer un projet d'un framework à un autre. Je suggère donc d'essayer les deux et voir ce que vous trouvez à l'aise.

Je partagerai mon expérience. Son opinionated et partial. J'adore être corrigé.

Nous partons de zéro et utilisons Angular. Nous avons décidé d'aller avec matériel. J'ai commencé ma recherche d'un meilleur framework et les ai tous essayés: Materialize, MDL, Angular Material 2 et enfin MDC pour le Web.

Voici mes observations, en particulier pour Material2 vs MDC for Web.

Matériel2

  • Pros
    • Readymade. Tout est disponible et prêt à commencer à travailler
    • Architecture proche de Angular

  • Contre

    • La liste des composants n'est pas encore complète (ils auront dépassé le temps, alors c'est ok)
    • La personnalisation est impossible

    Je sais que nous pouvons ajouter des thèmes, c'est tout. Tout le code HTML et CSS des composants est ajouté dans Angular Components. Donc, il est compilé en JavaScript et s'applique au moment de l'exécution. Donc, il n'y a aucun moyen de remplacer le comportement. J'ai essayé pendant une semaine et je ne pouvais pas le faire.

    Voici les questions que j'ai posées (l'une d'elles marquée comme trop proche, car elle semblait demander des opinions).

    Comment personnaliser Angular Matériel 2

    Comment étendre Angular Style de composant

    Bien sûr, ils n’ont reçu aucune réponse et je n’ai pas pu les personnaliser. Si je me trompe, dirigez-moi s'il vous plaît.

Vérifier la mise à jour fournie ci-dessus

MDC pour le Web

  • Contre

    • Pas facilement disponible pour Angular

    Nous ne pouvons pas commencer à l’utiliser tout de suite si vous voulez le faire Angular. Besoin d'écrire un wrapper pour Angular pour chaque composant. Cela pourrait demander quelques efforts. Mais chaque équipe peut se permettre un peu de temps pour personnaliser et il y a ne tierce partie des efforts pour simplifier les choses. Si vous pouvez ne pas le faire de la manière angular, je pense que nous pouvons commencer sans les wrappers.

    • La liste des composants n'est pas encore complète (ils auront plus de temps, alors c'est bon)

  • Pros

    • Générique, non lié au framework. Toujours en sécurité pour investir.
    • Plus de contribution, puisque d'autres développeurs de frameworks l'utilisent également. Au fil du temps, il y a de plus en plus de contributions et d'avenir (presque)
    • Totalement personnalisable.
    • Apparaît comme seul cadre L’équipe de conception de matériel est directement impliquée dans
    • Peut utiliser les connaissances/styles pour les appareils mobiles aussi.
    • La documentation est géniale. On dirait que beaucoup d’efforts et de temps sont investis.
17
Vamshi

Pour les personnes qui considèrent Angular Matériau 2, le plug-in Sketch Material/Éditeur de thèmes et l'outil Galerie ne sont disponibles que pour MDC. Je suis sur le même chemin et j'ai commencé avec Angular Matériel 2, et avec la récente introduction sur Angular Ivy, je ne suis pas sûr des efforts que l'équipe va déployer. the Angular Material 2. Je passe au MDC, une valeur sûre.

Du récent Readme:

Matériel de haut niveau prévu pour le premier trimestre → deuxième trimestre 2019 (janvier à juin):

  • La plupart de l'équipe Angular est prêtée à l'équipe de support qui l'aide avec Ivy. Nous utilisons les tests Angular CDK et Angular pour valider les chemins de code et résoudre les problèmes de débogage lors du basculement des applications Google vers le nouveau pipeline de rendu.
  • Nous travaillons également avec l’équipe de conception de matériel sur une stratégie de collaboration plus profonde. Nous aurons plus à partager sur ce sujet une fois que nos plans seront plus avancés.
  • Correction de bugs et améliorations de fonctionnalités mineures.
  • Améliorations apportées à la composante arborescence par l’interface API afin d’améliorer l’ergonomie.
4
Rajesh Jain

Il semble que l'équipe Angular Material envisage de collaborer avec l'équipe de MDC:

Éléments de haut niveau prévus pour le quatrième trimestre de 2018 (octobre à décembre):

  • Améliorer nos propres outils de construction et d'automatisation
  • Correction de bugs et réduction de certaines dettes techniques dans Google
  • Travailler sur des plans à long terme sur la façon de collaborer avec l'équipe Web de MDC
  • Conceptions pour l'amélioration avancée des tableaux (redimensionnement des colonnes, directives de sélection, modification en ligne)

( README )

Cela a été ajouté au fichier Readme il y a environ 20 jours (10 oct 2018).
Il est donc fort probable que, à l'avenir, Angular Material ne soit qu'une sorte de Angular wrapper ou Angular implémentation de MDC for Web.

2
Springrbua