MDC – Material Design, Angular Material, MDC, MWC, Lit 的关系

前言

它们关系挺乱的, 而且不只是我一个人感觉乱

还有

所以这篇做一个整理吧.

 

Material Design

Google 的设计指南. 早年用于 Android Apps, 现在也用于 Web Application.

许多 Google products, e.g. Gmail, Google Ads, Tag Manager, Google Analytics 都基于这个设计概念 (不是说 100% follow, 只是大家都尽量保持一致性)

它的官网 : material.io (目前是 2.0 的版本)

2021 年 Google 发布了 Material Design 3.0 又称 Material You

目前它的官网: m3.material.io (3.0 版本)

Material Design 只是一个设计指南, 手册. 也就是一份 documentation 而已. Material 团队会先用 Figma 把它画出来 Material 3 Design Kit.

然后才依序去开发 Android > Flutter > Web 做出 UI 库让大家用. (没错, Web 排在最后...)

当然你不一定要用它的库, 你可以自己对着 Figma 或者原稿开发. 比如 React material-ui.

 

Angular Material

如同 React material-ui 那样, 一开始 Angular Team 也是自己对着 Material Design 手册开发的.

但后来, 由于实力不够, 加上 Material Design 的变化速度太快, 以至于开发跟不上. (没错, React 跟的上)

最后在 2019 年, Angular Material 决定和 Material Design 团队密切合作, 改用 Material Design 维护的库 (Material Components for the web 简称 MDC-Web) 来开发, 而不是直接对着手册做.

简单说就是自己做不来, 找个富丽堂皇的接口, 转去依赖其它人. 

Youtube – NG Conf 2019 Day 3 CDK Is The Coolest Thing You Are Not Using With Jeremy Elbourn

 

Material Components for the web (MDC-Web)

上面已经有提到了 Android > Flutter > Web. 它们分别是

其实还有一个 IOS 被我省略了, 那不重要.

Web 目前 (2022年) 的库指的是 material-components-web. Angular Material 就是依赖着它. 

它是一个宣称对框架友好的一个库. 但是目前几乎所有依赖它的框架都惨淡...

Angular Material 不在里面, 因为目前还在 experimental 阶段.

 

material-web (MWC)

依照 Google 的惯性, MDC-Web 视乎是捧不红了, 只能无情的把它杀掉, 扶持一个新的库.

来自 Github – When is Material Web 3 Coming?

这个 MWC 是基于 Web Component 概念做的. 内部依赖 Google Polymer 项目的 Lit (Lit 是一个 JS 库, 用来做 Web Component 开发的, 写法有点像 React)

关于 Lit 介绍:

Youtube – Lit 2.0 - The future of the web

Polymer’s Web Component Library LitElement and How it Compares to React

更新：2024-06-14

几天前 (2024 年 6 月) MWC 也被 Material 团队抛弃了...

 

Angular Material & MDC

Angular Material 花了 3 年也没有把 MDC 弄好, 2021 年说可能 Angular14 会 Live, 但就目前来看又食言了.

如果说 MDC 被放弃了, Angular Material 会很可怜, 因为搞了这么多年就是为了以后可以借力, 但后来发现家人根本不可靠...

但目前一切都还不确定, 毕竟 MWC 也才开始. 做不做得出来还不知道呢. 但可以肯定的说, Angular Material 肯定不会切换去 MWC.

至少短期内是不可能的. 也意味着短期内不可能有 material 3 的东西, 所有 material 3 解决的问题它们也不会去解决. 只会等. 恶性循环.

最后还是 React material-ui 走在了一个正确的方向.

更新：2024-06-14

MDC 确实是被放弃了，从 2022 年 5 月 v14 版本后就再没有发布新版本了，后来 Material Design 团队全身心投入在 MWC 里。

不过，虽然如此，Angular Material 是绝对不可能切换到 MWC 的，因为 MWC 依赖 Lit，而 Lit 和 Angular 算是竞品吧。

好在，MDC 虽然表面是死掉了，但其实背地里还有在更新，目前是 v15。我估计它之所以还会更新只是为了 Angular Material 而已，甚至可能就是 Angular Material 团队在维护它...😅

另外，几天前 (2024 年 6 月) MWC 也被 Material 团队抛弃了...所以你知道 Google 团队有多不可靠了吧？

 

总结

1. Material Design 是设计指南手册. 要落实它需要 Figma > Android > Flutter > Web > Framework > 我们的项目

2. MDC-Web 是目前实现 Material Design 2.0 的库. 没有计划支持 Material 3.0. Angular Material 依赖于它 (还是 experimental).

3. MWC 是目前实现 Material Design 3.0 的库. 还处于 beta 阶段, 预计今天可能会推出 1.0 版本.

4. Lit 是 Google Polymer 的项目, Polymer 一直都在推动 Web Component 技术. Lit 是一个 JS 库, 用来实现 Web Component, 写法有点像 React.