Архитектура

MDC Web разделен на пакеты. Каждый пакет либо подсистема, либо компонент. Подсистемы применимы к многим компонентам. Они обычно описывают стиль (например: цвет) или движение (например: анимацию). Пакеты компонентов часто зависят от многих пакетов подсистем. С другой стороны, пакеты компонентов редко зависят от других пакетов компонентов. Компоненты требуют HTML-структуры. Некоторые компоненты статичны, но большинство динамичны и включают JavaScript.

Каждый компонент может использоваться отдельно от других компонентов.

Sass

Все CSS MDC Web генерируется с помощью Sass. Sass-миксины позволяют нам создавать группы CSS-деклараций, которые мы хотим использовать повторно на нескольких компонентах. Подсистемы предоставляют Sass-миксин, который компонент импортирует в свой Sass-файл. Каждый пакет компилирует свои Sass-файлы в один CSS-файл.

HTML

MDC Web НЕ предоставляет никаких HTML-шаблонов. Мы просто предоставляем документацию с требуемой HTML-структурой.

JavaScript

MDC Web разделяет JavaScript каждого динамического компонента на две части: Foundation и Adapter. Это позволяет нам переиспользовать код Foundation на нескольких веб-платформах, например React и Angular, переопределяя только Adapter. На данный момент мы реализовали только vanilla JavaScript-версию Adapter.### TypeScript

Компоненты MDC Web написаны на TypeScript для увеличения скорости разработки и уменьшения ошибок. Наши npm-релизы включают UMD JavaScript-пакеты, ES Modules, содержащие ES5, и .d.ts файлы объявления типов для пользователей TypeScript. Дополнительную информацию см. в Импортирование JS.

Foundation

Foundation содержит бизнес-логику, которая лучше всего представляет Material Design, не обращаясь к каким-либо элементам DOM. Foundation делегирует методы Adapter для любой логики, требующей манипуляции DOM.

Adapter

Adapter представляет собой интерфейс со всеми методами, которые Foundation должен реализовать для бизнес-логики Material Design. Могут быть много реализаций Adapter, что позволяет обеспечивать совместимость с различными фреймворками.

Vanilla Component

Инициализируется с корневым элементом, Vanilla Component создает экземпляр Foundation с использованием Vanilla Adapter, переопределяя метод getDefaultFoundation класса MDCComponent. Vanilla Adapter реализует API адаптера и напрямую ссылается на корневой элемент. Vanilla Component также предоставляет прокси-методы для любых методов Foundation, которые разработчик необходимо использовать. Разработчики, которые просто заинтересованы в использовании MDC Web (то есть не предоставляют обертку библиотеки), должны взаимодействовать только с Компонентом. Они не должны нуждаться в прямом доступе к API Foundation или Adapter.