Веб компоненты уже сегодня с React.js и ReactiveElements
В современной JavaScript разработке довольно остро стоит вопрос повторного использования кода и композиции проектов. Замечательным способом композиции является использование web-components, однако на текущий момент это требует большого количества полифилов, что снижает надежность и быстродействие. ReactiveElements предлагает использовать React.js для описания веб-компонент, избавиться от большинства полифилов и использовать реактивные веб-компоненты уже сегодня.
UPD: Вы можете создавать веб-компоненты из Backbone и Angular вью с помощью MVC Elements
Существует много MVC фреймворков, каждый со своими преимуществами или недостатками. Общим недостатком является закрытость, невозможность совместного использования с другими. А что если у вас уже есть база компонент на одном из фреймворков, а на текущем проекте необходимо использовать новый? А что если для части проекта вам нужен другой подход нежели предлагает текущий, основной фреймворк?
Стандартизированным решением проблемы композиции может стать платформа веб-компонент, предлагающая повторное использование кода на уровне спецификаций HTML.
Основа для веб-компонент — это возможность использовать пользовательские HTML теги. Содержимое и поведение таких тегов (веб-компонент) определяется их разработчиком. Это может быть тег <touch-galery> — галерея или тег <broadcast-list> — программа передач на ТВ.
Пользовательские теги — самый важный элемент веб-компонент, однако для полноценной работы недостаточно просто описать тип тега. Нужен удобный способ подключения тега в проект, загрузки его шаблона. Так же нужно быть уверенным, что тег является вещью в себе и при добавлении не изменяет соседние теги и содержимое страницы. Для этого в стандарт введены спецификации HTML import и Shadow DOM.
Итого веб — компоненты состоят из:
- HTML templates;
- Custom elements;
- Shadow DOM;
- HTML import.
Большинство современных браузеров не поддерживает все составляющих платформы и для работы веб-компонент необходимо добавлять несколько полифилов, что негативно сказывается на быстродействии, надежности решения и является причиной слабого распространения веб-компонент не смотря на большой интерес в обществе. Убрать этот недостаток может использование Facebook React для описания веб-компонент.
Сильные стороны React:
- React ориентирован на компонентную модель разработки;
- «реактивность» создаваемого интерфейса, отсутствие ручных DOM манипуляций;
- Наличие виртуального DOM дерева и оптимизация рендеринга;
- Всем знакомые механизмы загрузки шаблонов через подключение JavaScript файлов.
Таким образом использование React решает проблему импорта компонент и делает ненужным HTML Import и HTML Template polyfill`ы. Так же нам больше не нужен Shadow DOM — React управляет своей DOM структурой самостоятельно и весьма эффективно.
Для использования React виджетов, как веб — компонент разработан небольшой враппер ReactiveElements. Для корректной работы он требует только поддержку custom element части спецификации. Это легко обеспечить подключив в проект Mozilla X-Tag, Google Polymer, а в последнее время Custom Element довольно часто присутствует в браузерах «из коробки».
На текущий момент и X-Tag и Google Polymer используют один и тот же Custom Element полифилл https://github.com/Polymer/CustomElements
Для создания реактивного элемента из React компонента достаточно просто выполнить:
document.registerReact('tag-name', reactClass);
Этот пример отображает простейший ReactiveElement а так же проводит возможные манипуляции с элементом — задает свойства через аттрибуты тега и напрямую через ссылку на HTML элемент, так же через ссылку выполняет методы React класса.
Чуть более сложным примером является компонент — программа телепередач. В зависимости от выставленных атрибутов компонент запрашивает с сервера данные о передачах разной тематики, разного времени старта и так далее. Не смотря на большой объем логики конечное приложение получилось очень небольшим благодаря замечательной композиции, которую предоставляют веб — компоненты и ReactiveElements.
<body>
<h1>Choose category</h1>
<select onchange="changeCategory(value)">
<option value="sport">Sport</option>
<option value="documentary">Documentary</option>
<option value="kids">Kids</option>
</select>
<broadcasts-list id="myBroadcastList" category="sport" region="IE"></broadcasts-list>
<script>
function changeCategory(value) {
var myBroadcastList = document.getElementById('myBroadcastList');
myBroadcastList.setAttribute('category', value);
myBroadcastList.refreshData();
}
</script>
</body>
UPD: Теперь вы можете создавать web-компоненты из Angular директив и Backbone views используя проект MVC Elements.