Доклад "Веб-компоненты — будущее или настоящее?"...
TRANSCRIPT
Веб-компоненты - будущееили настоящее?
Денис Иогансен, MoscowJS 20
Веб-компоненты
Спецификации— HTML Import - внешний html документ
— <template> - инертный DOM фрагмент (заготовка)
— Custom elements - собственный элемент (тег)
— Shadow DOM - скрытое дерево элемента
6
HTML Import<link rel="import" href="component.html">01.
7
До <template><div hidden id="logo-temp">
<img class="logo" src="badoo.3.png">
</div>
<script type="text/template" id="logo-temp">
<img class="logo" src="badoo.3.png">
</script>
01.
02.
03.
01.
02.
03.
8
<template><template id="logo-temp">
<img class="logo" src="badoo.3.png">
</template>
var temp = document.querySelector('#logo-temp');
var clone = temp.content.cloneNode(true);
document.body.appendChild(clone);
01.
02.
03.
01.
02.
03.
9
Custom elements— Собственная логика
— Доступны события жизненного цикла
— Создание элемента
— Вставка в документ
— Удаление из документа
— Изменение атрибутов элемента
— Имя элемента должно содержать дефис
10
Custom elementsvar proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.innerHTML = 'Уже зарегистрированы?';
};
document.registerElement('join-blk', {prototype: proto});
<join-blk></join-blk>
01.
02.
03.
04.
05.
01.
11
Shadow DOM
Shadow DOM<button id="btn">Светлая сторона</button>
var shadowHost = document.querySelector('#btn');
var shadowRoot = shadowHost.createShadowRoot();
shadowRoot.textContent = 'Темная сторона';
Темная сторона btn.textContent; // Светлая сторона
01.
01.
02.
03.
13
Всё вместе
Создаем join-blk.html
<template id="temp">
<div>Уже зарегистрированы? <content></content></div>
</template>
var temp = document.querySelector('#temp');
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var shadow = this.createShadowRoot();
shadow.appendChild(temp.content.cloneNode(true));
};
document.registerElement('join-blk', {prototype: proto});
01.
02.
03.
01.
02.
03.
04.
05.
06.
07.
15
Использование<link rel="import" href="join-blk.html">
<join-blk><button>Да</button></join-blk>
<join-blk><button>Нет</button></join-blk>
Уже зарегистрированы? Да
Уже зарегистрированы? Нет
01.
02.
03.
16
Приемущества— Сложное разделяется на простые части
— Улучшается семантика
— Легко поддерживать / дорабатывать
— Легко тестировать
— Легко переиспользовать
— component.kitchen и customelements.io
17
Текущая поддержкаБраузеры * IE Chrome Firefox Safari Android IOS
* последние версии
HTML Imports - + f - + -
<template> - + + + + +
Custom elements - + f - + -
Shadow DOM - + f - + -
18
webcomponent.jsБраузеры * IE Chrome Firefox Safari Android IOS
* последние версии
HTML Imports + + + + + +
<template> + + + + + +
Custom elements + + + + + +
Shadow DOM + + + + + +
19
Ложка дегтя - Shadow DOM— Медленный
— Сложные проекции
— Проблемы с событиями
— Часто переписывается *
* черновик на github
20
Shadow DOM
Polymer
Polymer 0.8— Новая версия (полностью переписана)
— Увеличена производительность
— Возможность выбора уровня функциональности
— polymer-micro, polymer-mini, polymer
— Уменьшен размер ( 350 (130) kb -> 85 kb)
— Ожидаемый выход production release 1.0 - 2 квартал 2015
23
24
Базовый синтаксический сахар
Polymer({
is: 'join-blk',
created: function() {
this.innerHTML = 'Уже зарегистрированы?';
}
});
<join-blk></join-blk>
01.
02.
03.
04.
05.
06.
01.
25
Наследование от нативных элементов
Polymer({
is: 'join-input',
extends: 'input'
});
<join-input></join-input>
01.
02.
03.
04.
01.
26
Конвертация атрибутов к свойствам
Polymer({
is: 'join-blk',
properties: {
userName: String,
}
});
<join-blk user-name="Denis"></join-blk>
01.
02.
03.
04.
05.
06.
01.
27
Работа с шаблонами
<dom-module id="join-blk">
<template><div>Уже зарегистрированы?</div></template>
</dom-module>
Polymer({
is: 'join-blk'
});
01.
02.
03.
01.
02.
03.
28
Изолированое оформление (scoped css)
<dom-module id="join-blk">
<style> div { color: red; } </style>
<template><div>Уже зарегистрированы?</div></template>
</dom-module>
Polymer({
is: 'join-blk'
});
01.
02.
03.
04.
01.
02.
03.
29
Обработка событий
Polymer({
is: 'join-blk',
listeners: {
'click': 'handleClick'
},
handleClick: function(e) {
alert("Вы не зарегистрированы!");
} });
01.
02.
03.
04.
05.
06.
07.
08.
30
Установка через атрибуты
<dom-module id="join-blk"><template>
<button on-click="handleClick">Войти</button>
</template></dom-module>
Polymer({
is: 'join-blk',
handleClick: function(e) {
alert("Вы не зарегистрированы!");
} });
01.
02.
03.
01.
02.
03.
04.
05.
31
Отслеживание изменения свойств
Polymer({
is: 'join-blk',
properties: { preload: Boolean, src: String },
observers: {
'preload src': 'updateImage'
},
updateImage: function( preload, src ){ что-то делаем }
});
01.
02.
03.
04.
05.
06.
07.
08.
32
Декларативный дата биндинг
<dom-module id="join-blk"><template>
<p>С возвращением, <span>{{user.name}}</span>!</p>
</template></dom-module>
Polymer({
is: 'join-blk',
properties: { user: { type: Object,
value: { name: 'Денис' }
} } });
01.
02.
03.
01.
02.
03.
04.
05.
33
А так же:
— Собственный API для работы с DOM
— Обновление внешних атрибутов
— Вычисляемые свойства
— Вспомогательные элементы *
— Собственные css свойства *
* эксперементальные
34
Что еще?— Библиотека базовых компонент
— Библиотека компонент в стиле Material Design
— Визуальный редактор
35
Заключение
Заключение— Уже используют Github, Salesforce, NewsCorp ...
— Скоро будут Youtube, QuickOffice, GoogleMusic ...
— Много примеров: PolymerMail, Topeka, SantaTracker ...
— Веб-компоненты - это уже настоящее!
38
Вопросы?Денис Иогансен
— twitter: @pofigizm
— Презентация - ow.ly/KOchC
— Веб-компоненты - ow.ly/KOd6Q
— Polymer 0.8 - ow.ly/KOcSg
39