Матеріальні компоненти для Інтернету проти Angular Material 2 [закрито]

75

Нещодавно було розпочато наступник проекту MDL (Material Design Lite) як « Матеріальні компоненти для Інтернету» . Однією з його цілей є "Безшовна інтеграція з іншими структурами та бібліотеками JS".

Існує ще один проект Angular Material2, який забезпечує компоненти дизайну матеріалів спеціально для Angular (v2 +).

Обидва проекти створюють компоненти UI на основі матеріального дизайну . Крім того, вони мають подібний набір компонентів, готових / в активній розробці , і такий самий набір компонентів, як і найближчим часом (перераховані тут і тут ).

Чи може хтось допомогти мені зрозуміти перекриття між двома проектами і який із них вибрати для нових?

На фундаментальному рівні, я розумію, що Angular Material2 буде більш плавно та тісніше інтегруватися з проектами Angular, тоді як Material Components для Інтернету забезпечить гачки для використання декількох фреймворків JS. Але я не бачу причини перекриття та того, який з них матиме більший імпульс (читайте більше компонентів).

material-design  angular-material2  material-components 
— ДіпакV
джерело
Зверніть увагу, що Angular Material для Angular 1.x є відмінною суттю від Angular Material2 для Angular 2+. Також Матеріальні компоненти для Інтернету відрізняються від Полімерних Матеріалів / Паперових Елементів, які є веб-компонентами, заснованими на стандартах. Жодна з технологій, що обговорюються в цьому питанні, не кваліфікується як "веб-компонент" на основі стандартів.
— Splaktar
1
погодився .. дякую за редагування
— DeepakV
1
Не використовуй кутовий матеріал 2. Це лайно. Я натрапив на ваш допис, бо шукав альтернативу кутовому матеріалу 2. Оформити матеріал Vue.js 'vuetify. Кутовий матеріал повинен виглядати так.
— CENT1PEDE
1
Доводиться погоджуватися з Cent1pede. Документація для Angular Material Design 2 - абсолютна фігня
— Стівен Хофф,

Відповіді:

54

Повне розкриття інформації: Я працюю над Матеріальними компонентами для Інтернету , тому моя думка може бути дещо упередженою :)

TL; DR використовує будь-яку бібліотеку, щоб допомогти вам створити свій інтерфейс максимально ефективно, або використовувати їх поруч. Перевірятинаш приклад інтеграції angular2 angular-mdc -web, щоб побачити, як обернути компонент MDC-Web за допомогою ng2.

Метою Матеріальних компонентів для Інтернету (скорочено MDC-Web ), як вже було зазначено, є створення канонічної реалізації компонентів Матеріального дизайну для всієї веб-платформи. Angular / material2 - це відмінна бібліотека - багато хто з нас у команді Material Design, в тому числі і я, зробили свій внесок у це, - але вона є виключною для некутових2 програм. Крім того, бібліотеки та фреймворки, не пов’язані з Google, такі як React, Aurelia, Vue та інші, не мають офіційного рішення, яке відповідає їхнім потребам.

З огляду на це, Angular2 підпадає під сферу дії "всієї веб-платформи", і ми, безумовно, хочемо підтримати її через це. На цьому етапі в обох проектах ми можемо мати деякі потрібні вам компоненти, яких не має angular / material2, або навпаки. Я закликаю вас використовувати будь-яку бібліотеку, яка допомагає досягти ваших цілей найкращим чином. Це може бути angular / material2, це може бути MDC-Web, або, чесно кажучи, це може бути і те, і інше. Наприклад, ви можете використовувати наш вибірний компонент уздовж компонентів сторони material2, і все має працювати нормально. Як згадувалося в TL; DR, angular-mdc-web - це повнофункціональна бібліотека, яка обгортає MDC-Web в ідіоматичний API angular2 +.

На завершення, MDC-Web - це єдина бібліотека, розроблена самою командою Material Design. Завдяки цьому ми можемо співпрацювати та повторюватись із тими самими людьми, які є авторами специфікації Material Design.

— Тревіс Кауфман
джерело
36
Отже, у Google ще немає чіткого шляху. Нам ще потрібно почекати, поки керівник вирішить, кого з них потрібно вбити.
— neclepsio
11
Я бачу це зараз, що для них (і для нас, розробників) було б набагато краще зосередити більше своїх ресурсів на MDC-Web і змінити проект material2 на простий проект обгортки / адаптера ng2 для MDC-Web .
— Родріго Кесада
1
Будь ласка, зробіть більш складний приклад для реалізації MDC-web з angular2
— Влад
1
Також хороший приклад github.com/trimox/angular-mdc-web
— Влад
2
Справді? Vue? Подивіться на це vuetifyjs.com - це ідеальний матеріальний фреймворк.
— CENT1PEDE
18

Оновлення (16 березня 2018 р.):

З коментарів, наданих @elDuderino, Material2, схоже, має спосіб налаштувати. Надана відповідь була до того, як Матеріал отримав CD.

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

Обидва фреймворки зараз дуже дозріли. Я використовую їх обох у різних проектах. У мене був лише тиждень, щоб перенести проект з одного фреймворку на інший. Тому я б запропонував спробувати обидва і подивитися, що вам зручно.

Я поділюсь своїм досвідом. Його самовпевнений і упереджений. Люблю поправляти.

Ми починаємо з нуля і використовуємо Angular. Ми вирішили піти з Матеріалом. Я розпочав своє полювання на кращий фреймворк і спробував усі: Materialize, MDL, Angular Material 2 і, нарешті, MDC для Інтернету.

Ось мої спостереження, особливо щодо Material2 проти MDC для Інтернету.

Матеріал2

  • Плюси
    • Готовий. Все доступно і готове до початку роботи
    • Архітектура, близька до Angular

  • Мінуси

    • Список компонентів ще не повний (вони отримають з часом, тому це нормально)
    • Налаштування неможливе

    Я знаю, що ми можемо додавати теми, ось і все. Усі HTML і CSS для компонентів додані в Angular Components. Отже, він компілюється як JavaScript і застосовується під час виконання. Отже, немає можливості замінити поведінку. Я намагався тиждень і не міг цього зробити.

    Ось запитання, які я задав (один із них позначив закрити, оскільки, здавалося, запитував думки -.-)

    Як налаштувати кутовий матеріал 2

    Як розширити стиль кутових компонентів

    Звичайно, вони не отримали жодної відповіді, і я не міг їх налаштувати. Якщо я помиляюся, будь ласка, скеруйте мене.

Перевірте оновлення, надане вище

MDC для Інтернету

  • Мінуси

    • Недоступно для Angular

    Ми не можемо почати використовувати його відразу, якщо ви хочете зробити це кутовим способом. Потрібно написати обгортку для Angular для кожного компонента. Може знадобитися трохи зусиль. Але кожна команда може дозволити собі деякий час для налаштування, і сторонні зусилля роблять це простішим. Якщо це нормально не робити це кутовим способом, я вважаю, що ми можемо почати без обгортки.

    • Список компонентів ще не повний (вони отримають з часом, так що це нормально)

  • Плюси

    • Загальний, не прив’язаний до фреймворку. Завжди безпечно інвестувати.
    • Більший внесок, оскільки інші розробники фреймворків також його використовують. З часом він отримує більше внесків та майбутніх доказів (майже)
    • Повністю настроюється.
    • Виглядає так, як тільки фреймворк Команда дизайнерів матеріалів безпосередньо пов'язана з
    • Також можна використовувати знання / стилі для мобільних пристроїв.
    • Документація чудова. Схоже, докладено багато зусиль і часу.
— Вамші
джерело
1
Щодо налаштування Material2, вони покладаються на те, що ви встановлюєте змінні та використовуєте міксини. Див. Темування власних компонентів та використання змінних у вихідному коді (наприклад, на панелі інструментів )
— Алекс Клаус,
@AlexKlaus Якщо я не помиляюся, посилання, яке ви надали, має лише зміну кольорів (Тема), а не зміну інших CSS компонентів. Вони придумали @angular/cdkдля налаштування компонентів, я думаю. Мені потрібно розглянути це і оновити свою відповідь.
— Вамші
2
Я хотів зазначити, що обидва вони написані жорстко, тому, окрім зміни теми (читай "кольори"), ти не можеш багато чого зробити безпечно. Ви назвали MDC для Інтернету "повністю настроюваним", але ви не можете робити навіть такі прості речі, як зміна висоти панелі інструментів (див. Тут їх відповідь на такий запит на функцію).
— Алекс Клаус
Основним моментом їх продажу є чітке дотримання дизайну матеріалів, тому мало чого важко замінити. Але коли я сказав "повністю настроюється", я мав на увазі, що ми можемо змінити їх у своєму спеціальному компоненті, який створений з нього. У випадку Матеріалу навіть не було додано в scss, вони були жорстко закодовані в javascript, і їх абсолютно неможливо перевизначити, мені було дуже важко розширити кутові компоненти. Ви можете побачити запитання, які я задавав ..
— Вамші
Можливо, реалізація змінилася з тих пір, як ви надали свою відповідь, але говорити про те, що Angular Material неможливо налаштувати, є абсолютно неправильним. Вони навіть мають присвячену цьому сторінку в документації: material.angular.io/guide/customizing-component-styles
— elDuderino
4

Для тих, хто розглядає Angular Material 2, модуль ескізного матеріалу / редактор тем та інструмент Галерея доступні лише для MDC. Я йду тим самим шляхом, і я почав з Angular Material 2, і з нещодавньою вступною інформацією про Angular Ivy, я не впевнений, скільки зусиль команда докладе до Angular Material 2. Я переходжу до MDC, який це безпечна ставка.

З недавнього Readme:

Речі високого рівня, заплановані на І квартал → ІІ квартал 2019 (січень - червень):

  • Більша частина команди Angular Material орендована у фреймворкової команді, яка допомагає з Плющем. Ми використовуємо тести Angular CDK та Angular Material для перевірки шляхів коду, а також допомагаємо вирішити проблеми при переключенні програм Google на новий конвеєр рендерингу.
  • Ми також працюємо з командою Material Design над стратегією більш глибокої співпраці. Нам буде більше поділитися цим, як тільки наші плани будуть подальшими.
  • Різні виправлення та незначні вдосконалення функцій.
  • Дизайн для вдосконалення API компонента дерева для поліпшення ергономіки.
— Раджеш Джайн
джерело
2

Здається, команда Angular Material планує співпрацювати з командою MDC:

Речі високого рівня, заплановані на 4 квартал 2018 року (жовтень - грудень):

  • Удосконалення власного інструмента збірки та автоматизації
  • Виправте помилки та зменшіть деякі технічні борги в Google
  • Робота над довгостроковими планами щодо співпраці з веб-командою MDC
  • Проекти для вдосконалених удосконалень таблиць (розмір стовпця, директиви щодо вибору, редагування вбудовано)

( ЧИТАТИ )

Це було додано до readme близько 20 днів тому (10 жовтня 2018 р.).
Тож є ймовірність того, що в майбутньому Angular Material - це просто якась обгортка Angular або Angular-реалізація MDC для Інтернету.

— Спрінгрбуа
джерело
-1

Кутовий матеріал 2 все ще застарів і не відповідає правильним характеристикам матеріалу. Не використовуйте його.

— Тієді
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.