Интеграция MDC Web в фреймворки

MDC Web был спроектирован так, чтобы быть как можно проще интегрированным в любые веб-фреймворки. В этом документе вы найдете стратегии интеграции компонентов в различные типы фреймворков.

Примеры

Мы поддерживаем список библиотек компонентов, которые обёртывают MDC Web для других фреймворков, в нашем основном README (под документом MDC Web на других фреймворках). Каждая библиотека должна:

• Предоставлять компоненты в модели доставки à-la-carte
• Существовать более 6 недель и демонстрировать продолжительное обслуживание
• Предоставлять документацию по использованию для каждого компонента

Подходы

Существует два подхода к интеграции наших компонентов в фреймворки: простой подход и продвинутый подход. Оба подхода имеют свои преимущества и недостатки, которые объясняются ниже.

Простой подход: обёртка ванильных компонентов MDC Web

Самый простой способ интеграции MDC Web в фреймворки — использовать наши ванильные компоненты напрямую. Это хорошо работает для фреймворков, которые предполагают, что они будут выполнены в контексте браузера, таких как Angular v1, Backbone.js, или даже вещей, таких как jQuery плагины.Простой подход можно описать следующим образом:

1. Включите CSS компонента на странице любым способом, которым вам удобно.
2. Создайте обёртку компонента для вашего выбранного фреймворка, и добавьте свойство, которое будет установлено в значение ванильного компонента MDC Web. Мы назовём это mdcComponent.
3. Когда обёртка компонента инициализируется (например, она была инстанцирована и прикреплена к DOM), инстанцируйте ванильный компонент MDC Web с корневым элементом, и назначьте его свойству mdcComponent.
4. Когда обёртка компонента разрушается (например, она была отвязана и отсоединена от DOM), вызовите mdcComponent.destroy() для очистки ванильного компонента MDC Web.

Этот общий подход будет работать для почти всех базовых случаев использования. Для примера этого подхода, проверьте этот plunk, который показывает, как обернуть наш текстовый поле в компонент angular v1, а также нашу кнопку (с эффектом риппл) в атрибутной директиве. Обратите внимание, что этот подход также будет работать для персонализированных элементов. Используйте connectedCallback для инициализации и disconnectedCallback для уничтожения.

Продвинутый подход: использование основ и адаптеровМногие современные библиотеки/фреймворки фронтенда, такие как React и Angular, в конечном итоге ориентируются не только на веб-браузеры. Для этих фреймворков — и для некоторых очень продвинутых архитектур приложений — требуется более надёжный подход. Мы предоставляем основы и адаптеры для удовлетворения этой потребности.> Если вас интересует обертывание наших компонентов с использованием основ/адаптеров, вам следует сначала ознакомиться

с нашей общей архитектурой, чтобы ознакомиться с общими концепциями, лежащими в их основе.

Каждый компонент прилагается к соответствующему основному классу, который обычно называется MDCComponentFoundation, где MDCComponent — это имя компонента. Например, у нас есть MDCMenuFoundation, который используется нашим MDCMenu компонентом, и оба они экспортируются публично.

Чтобы реализовать компонент через основу, выполните следующие шаги:

1. Включите CSS компонента на странице любым способом, который вам подходит.
2. Добавьте свойство экземпляра к вашему компоненту, которое будет установлено в соответствующий основной класс. Мы назовем это mdcFoundation.
3. Создайте экземпляр основного класса, передав ему правильно настроенный адаптер в качестве аргумента.
4. При инициализации компонента вызовите mdcFoundation.init().
5. При уничтожении компонента вызовите mdcFoundation.destroy().Из-за природы наших компонентов некоторые из API-адаптеров могут быть довольно сложными. Однако мы делаем всё возможное, чтобы сделать написание адаптеров как можно более простым и предсказуемым:

• Адаптеры строго версионируются: любое изменение в интерфейсе адаптера — ассоциативное или нет — считается разрывом и приведёт к обновлению основной версии компонента.
• Каждый интерфейс адаптера тщательно документирован в README каждого компонента.
• Большинство методов адаптеров представлены одной строкой кода, и для тех, что не так, мы предоставляем объекты util, которые реализуют эти методы.
• Мы стараемся предоставлять руководство по различным способам реализации определённых методов адаптера, которые могут показаться неоднозначными.
• В будущем мы планируем создать типовые определения для наших адаптеров, чтобы пользователи TypeScript могли проверить, соответствует ли их интерфейс спецификации адаптера.

Пожалуйста, откройте issue с нами, если вы столкнулись с определёнными трудностями при попытке реализовать адаптер или если вы считаете, что мы можем предоставить лучшие рекомендации по определённой проблеме. Это действительно важно для нас знать.