Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Веб-компоненты -будущее
или настоящее?
Денис Иогансен,MoscowJS 20
Веб-компоненты
Спецификации
— HTML Import - внешний html документ
— <template> - инертный DOM фрагмент (заготовка)
— Custom elements - со...
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="log...
<template>
<template id="logo-temp">
<img class="logo" src="badoo.3.png">
</template>
var temp = document.querySelector('#...
Custom elements
— Собственная логика
— Доступны события жизненного цикла
— Создание элемента
— Вставка в документ
— Удален...
Custom elements
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.innerHTML = 'У...
Shadow DOM
Shadow DOM
<button id="btn">Светлая сторона</button>
var shadowHost = document.querySelector('#btn');
var shadowRoot = sha...
Всё вместе
Создаем join-blk.html
<template id="temp">
<div>Уже зарегистрированы? <content></content></div>
</template>
var temp = doc...
Использование
<link rel="import" href="join-blk.html">
<join-blk><button>Да</button></join-blk>
<join-blk><button>Нет</but...
Приемущества
— Сложное разделяется на простые части
— Улучшается семантика
— Легко поддерживать / дорабатывать
— Легко тес...
Текущая поддержка
Браузеры * IE Chrome Firefox Safari Android IOS
* последние версии
HTML Imports - + f - + -
<template> -...
webcomponent.js
Браузеры * IE Chrome Firefox Safari Android IOS
* последние версии
HTML Imports + + + + + +
<template> + +...
Ложка дегтя -Shadow DOM
— Медленный
— Сложные проекции
— Проблемы с событиями
— Часто переписывается *
* черновик на githu...
Shadow DOM
Polymer
Polymer 0.8
— Новая версия (полностью переписана)
— Увеличена производительность
— Возможность выбора уровня функционально...
24
Базовый синтаксический сахар
Polymer({
is: 'join-blk',
created: function() {
this.innerHTML = 'Уже зарегистрированы?';
}
}...
Наследование от нативных элементов
Polymer({
is: 'join-input',
extends: 'input'
});
<join-input></join-input>
01.
02.
03.
...
Конвертация атрибутов к свойствам
Polymer({
is: 'join-blk',
properties: {
userName: String,
}
});
<join-blk user-name="Den...
Работа с шаблонами
<dom-module id="join-blk">
<template><div>Уже зарегистрированы?</div></template>
</dom-module>
Polymer(...
Изолированое оформление (scoped css)
<dom-module id="join-blk">
<style> div { color: red; } </style>
<template><div>Уже за...
Обработка событий
Polymer({
is: 'join-blk',
listeners: {
'click': 'handleClick'
},
handleClick: function(e) {
alert("Вы не...
Установка через атрибуты
<dom-module id="join-blk"><template>
<button on-click="handleClick">Войти</button>
</template></d...
Отслеживание изменения свойств
Polymer({
is: 'join-blk',
properties: { preload: Boolean, src: String },
observers: {
'prel...
Декларативный дата биндинг
<dom-module id="join-blk"><template>
<p>С возвращением, <span>{{user.name}}</span>!</p>
</templ...
А так же:
— Собственный API для работы с DOM
— Обновление внешних атрибутов
— Вычисляемые свойства
— Вспомогательные элеме...
Что еще?
— Библиотека базовых компонент
— Библиотека компонент в стиле Material Design
— Визуальный редактор
35
Заключение
Заключение
— Уже используют Github, Salesforce, NewsCorp ...
— Скоро будут Youtube, QuickOffice, GoogleMusic ...
— Много пр...
Вопросы?
Денис Иогансен
— twitter: @pofigizm
— pofigizm@gmail.com
— Презентация - ow.ly/KOchC
— Веб-компоненты - ow.ly/KOd6Q...
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Доклад "nw.js: введение в кросс-платформенные декстопные приложения на JS" на MoscowJS Meetup
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup

Download to read offline

Доклад Дениса Иогансена на MoscowJS. "Веб-компоненты — будущее или настоящее?"

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup

  1. 1. Веб-компоненты -будущее или настоящее? Денис Иогансен,MoscowJS 20
  2. 2. Веб-компоненты
  3. 3. Спецификации — HTML Import - внешний html документ — <template> - инертный DOM фрагмент (заготовка) — Custom elements - собственный элемент (тег) — Shadow DOM - скрытое дерево элемента 6
  4. 4. HTML Import <link rel="import" href="component.html">01. 7
  5. 5. До <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
  6. 6. <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
  7. 7. Custom elements — Собственная логика — Доступны события жизненного цикла — Создание элемента — Вставка в документ — Удаление из документа — Изменение атрибутов элемента — Имя элемента должно содержать дефис 10
  8. 8. Custom elements var 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
  9. 9. Shadow DOM
  10. 10. Shadow DOM <button id="btn">Светлая сторона</button> var shadowHost = document.querySelector('#btn'); var shadowRoot = shadowHost.createShadowRoot(); shadowRoot.textContent = 'Темная сторона'; Темная сторона btn.textContent; // Светлая сторона 01. 01. 02. 03. 13
  11. 11. Всё вместе
  12. 12. Создаем 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
  13. 13. Использование <link rel="import" href="join-blk.html"> <join-blk><button>Да</button></join-blk> <join-blk><button>Нет</button></join-blk> Уже зарегистрированы? Да Уже зарегистрированы? Нет 01. 02. 03. 16
  14. 14. Приемущества — Сложное разделяется на простые части — Улучшается семантика — Легко поддерживать / дорабатывать — Легко тестировать — Легко переиспользовать — component.kitchen и customelements.io 17
  15. 15. Текущая поддержка Браузеры * IE Chrome Firefox Safari Android IOS * последние версии HTML Imports - + f - + - <template> - + + + + + Custom elements - + f - + - Shadow DOM - + f - + - 18
  16. 16. webcomponent.js Браузеры * IE Chrome Firefox Safari Android IOS * последние версии HTML Imports + + + + + + <template> + + + + + + Custom elements + + + + + + Shadow DOM + + + + + + 19
  17. 17. Ложка дегтя -Shadow DOM — Медленный — Сложные проекции — Проблемы с событиями — Часто переписывается * * черновик на github 20
  18. 18. Shadow DOM
  19. 19. Polymer
  20. 20. Polymer 0.8 — Новая версия (полностью переписана) — Увеличена производительность — Возможность выбора уровня функциональности — polymer-micro, polymer-mini, polymer — Уменьшен размер ( 350 (130) kb -> 85 kb) — Ожидаемый выход production release 1.0- 2 квартал 2015 23
  21. 21. 24
  22. 22. Базовый синтаксический сахар Polymer({ is: 'join-blk', created: function() { this.innerHTML = 'Уже зарегистрированы?'; } }); <join-blk></join-blk> 01. 02. 03. 04. 05. 06. 01. 25
  23. 23. Наследование от нативных элементов Polymer({ is: 'join-input', extends: 'input' }); <join-input></join-input> 01. 02. 03. 04. 01. 26
  24. 24. Конвертация атрибутов к свойствам Polymer({ is: 'join-blk', properties: { userName: String, } }); <join-blk user-name="Denis"></join-blk> 01. 02. 03. 04. 05. 06. 01. 27
  25. 25. Работа с шаблонами <dom-module id="join-blk"> <template><div>Уже зарегистрированы?</div></template> </dom-module> Polymer({ is: 'join-blk' }); 01. 02. 03. 01. 02. 03. 28
  26. 26. Изолированое оформление (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
  27. 27. Обработка событий Polymer({ is: 'join-blk', listeners: { 'click': 'handleClick' }, handleClick: function(e) { alert("Вы не зарегистрированы!"); } }); 01. 02. 03. 04. 05. 06. 07. 08. 30
  28. 28. Установка через атрибуты <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
  29. 29. Отслеживание изменения свойств 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
  30. 30. Декларативный дата биндинг <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
  31. 31. А так же: — Собственный API для работы с DOM — Обновление внешних атрибутов — Вычисляемые свойства — Вспомогательные элементы * — Собственные css свойства * * эксперементальные 34
  32. 32. Что еще? — Библиотека базовых компонент — Библиотека компонент в стиле Material Design — Визуальный редактор 35
  33. 33. Заключение
  34. 34. Заключение — Уже используют Github, Salesforce, NewsCorp ... — Скоро будут Youtube, QuickOffice, GoogleMusic ... — Много примеров: PolymerMail, Topeka, SantaTracker ... — Веб-компоненты - это уже настоящее! 38
  35. 35. Вопросы? Денис Иогансен — twitter: @pofigizm — pofigizm@gmail.com — Презентация - ow.ly/KOchC — Веб-компоненты - ow.ly/KOd6Q — Polymer 0.8 - ow.ly/KOcSg 39
  • alexeyshockov

    Apr. 26, 2015

Доклад Дениса Иогансена на MoscowJS. "Веб-компоненты — будущее или настоящее?"

Views

Total views

11,074

On Slideshare

0

From embeds

0

Number of embeds

10,033

Actions

Downloads

7

Shares

0

Comments

0

Likes

1

×