SlideShare uma empresa Scribd logo
1 de 82
Baixar para ler offline
Олег Мохов: Веб-компоненты
Олег Мохов: Веб-компоненты
Вебкомпоненты
Олег Мохов
разработчик интерфейсов
26 октября 2013, ШРИ
GMail
Yandex.Mail
Олег Мохов: Веб-компоненты
WebComponents
● Templates
● Custom Elements
● Shadow DOM
● Imports
● Decorators

07
Templates
Templates
01. <div id="mytemplate" hidden>
02.

<img src="logo.png"/>

03.

<div class="comment"></div>

04. </div>

09
Templates
01. <script id="mytemplate" type="text/x-handlebars-template">
02.

<img src="logo.png"/>

03.

<div class="comment"></div>

04. </script>

10
Templates
01. <template>
02.

<img src="logo.png"/>

03.

<div class="comment"></div>

04. </template>

11
Преимущества <template>
1. Содержание остаётся эффективно инертным, пока оно не
активировано. По сути разметка является скрытым DOM'ом и не
рендерится.
2. Содержимое шаблона не порождает побочных эффектов: картинки не
грузятся, видео не проигрывается, скрипты не выполняются.
3. Так же внутренности шаблона не видны при выборе нод через
querySelector() или document.getElementById() .
4. Шаблоны могут находиться в любом месте, даже там, где есть строгие
ограничения на содержимое, например в <head> или <table> .
Пример <template>
01. <template>
02.

<img src="kitten.jpg"/>

03. </template>

Demo
13
Пример <template>
01. <template>
02.

<img src="kitten.jpg"/>

03. </template>

01. var content = document.querySelector('template').content;
02. document.querySelector('#container').appendChild(
03.

content.cloneNode(true));
14
<template> и стили
1. Стили тоже не применяются, пока шаблон не активирован
2. Добавлен селектор :host(<selector>) , который позволяет
применять селекторы только на шаблон
3. НО при использовании стилей в шаблоне надо очень аккуратно
смотреть на оптимизаторы кода, которые делают структурные
изменения

15
Поддержка <template>: ~46%

16
WebComponents
● Templates
● Custom Elements
● Shadow DOM
● Imports
● Decorators

17
CustomElements
Yandex.Mail
Yandex.Mail
Yandex.Mail
Yandex.Mail
Верстка почты
01. <div class="header">...</div>
02. <div class="folders">...</div>
03. <div class="messages">...</div>
04. <div class="message">...</div>

23
Верстка почты. HTML5
01. <header>...</header>
02. <div class="folders">...</div>
03. <div class="messages">...</div>
04. <div class="message">...</div>

24
Верстка почты. Web-Components
01. <header>...</header>
02. <folders>...</folders>
03. <messages>...</messages>
04. <message>...</message>

25
Отзывчивость
Lifecycle callbacks
createdCallback
экземпляр элемента создан
enteredViewCallback
экземпляр элемента добавлен в документ
leftViewCallback
экземпляр элемента удалён из документа
attributeChangedCallback(attrName, oldVal, newVal)
добавление/удаление/изменение аттрибута attrName
27
Создание кастомного элемента
01. var Folders = Object.create(HTMLElement.prototype);

28
Создание кастомного элемента
01. var Folders = Object.create(HTMLElement.prototype);
02. Folders.createdCallback = function() {

29
Создание кастомного элемента
01. var Folders = Object.create(HTMLElement.prototype);
02. Folders.createdCallback = function() {
03.

this.addEventListener('click', function(e) {

04.

alert('Thanks!');

05.

});

06. };

30
Создание кастомного элемента
01. var Folders = Object.create(HTMLElement.prototype);
02. Folders.createdCallback = function() {
03.

this.addEventListener('click', function(e) {

04.

alert('Thanks!');

05.

});

06. };
07. document.register('folders', {prototype: Folders});
31
Demo
Lifecycle callbacks
unresolved (inherits from HTMLElement)
элемент есть на странице, но не зарегистрирован через
document.register
unknown (inherits from HTMLUnknownElement)
элемент браузеру не известен
Demo

32
Поддержка CustomElements:
~45%

33
WebComponents
● Templates
● Custom Elements
● Shadow DOM
● Imports
● Decorators

34
Олег Мохов: Веб-компоненты
Олег Мохов: Веб-компоненты
Олег Мохов: Веб-компоненты
Олег Мохов: Веб-компоненты
Shadow DOM
Shadow DOM реализует инкапсуляцию DOM-дерева. В него прячется
оформительская вёрстка, необходимая для создания визуальнокрасивого контрола/виджета и т.д
http://w3c.github.io/webcomponents/spec/shadow/index.html

39
Shadow DOM JS
01. var Shadow = Object.create(HTMLElement.prototype);
02. Shadow.createdCallback = function() {
03.

var shadow = this.createShadowRoot();

04.

shadow.innerHTML = "Ололо";

05. };
06. document.register('x-browser', {prototype: Shodow});

40
Templates + Custom Elements + Shadow D
Shadow DOM JS
01. var Shadow = Object.create(HTMLElement.prototype);
02. Shadow.createdCallback = function() {
03.

var shadow = this.createShadowRoot();

04.

shadow.innerHTML = "Ололо";

05. };
06. document.register('x-browser', {prototype: Shodow});

42
Shadow DOM + Templates
01. var Shadow = Object.create(HTMLElement.prototype);
02. Shadow.createdCallback = function() {
03.

var shadow = this.createShadowRoot();

04.

var template = document

05.
06.

.querySelector('template#myTemplate');
shadow.appendChild(template.content);

07. };
08. document.register('x-browser', {prototype: Shodow});
43
Поддержка ShadowDom: ~33%

44
WebComponents
● Templates
● Custom Elements
● Shadow DOM
● Imports
● Decorators

45
Imports
● <link rel="stylesheet"> для загрузки CSS
● <script src> для загрузки скриптов
● <img> для загрузки картинок
● <audio> для загрузки аудио
● <video> для загрузки видео
● ??? для загрузки HTML

46
Imports hacks
● <iframe>

47
Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.

48
Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX

49
Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX — требует JavaScript'а :(

50
Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX — требует JavaScript'а :(
● хаки типа <script type="text/html">

51
Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX — требует JavaScript'а :(
● хаки типа <script type="text/html">

52
Imports
01. <head>
02.

<link rel="import" href="/path/to/imports/stuff.html">

03. </link>

53
Особенности Imports
● Вёрстка и CSS глобальные
● JavaScript глобальный, но поддерживает локальный скоуп через
document.currentScript.ownerDocument
● Кэширование вёрстки в браузере
● Не блокируют загрузку страницы (async)

54
Поддержка HTMLImports: ?

55
WebComponents
● Templates
● Custom Elements
● Shadow DOM
● Imports
● Decorators

56
Decorators
A decorator is something that enhances or overrides the presentation of
an existing element.
http://www.w3.org/TR/components-intro/#decorator-section

57
Decorators Example
01. <decorator id="details-open">
02.
03.

<template>
<a id="summary">

04.

&blacktriangledown;

05.

<content select="summary"></content>

06.

</a>

07.

<content></content>

08.

</template>

09. </decorator>
Decorators Example
01. <details open>
02.

<summary>Timepieces</summary>

03.

<ul>

04.

<li>Sundial

05.

<li>Cuckoo clock

06.

<li>Wristwatch

07.

</ul>

08. </details>
59
Decorators Example
01. details[open] {
02.

decorator: url(#details-open);

03. }

60
Decorators Example

61
Олег Мохов: Веб-компоненты
BEM
BEM
● Разделение на блоки (Imports)
● Уровни переопределения (Decorators)
● BEMJSON (Templates)
● BEMHTML (Shadow DOM)
● Блок (Custom Elements)
● Система сборки (Браузер)

64
01. <folders></folders>

01. {
02.

block: 'folders'

03. }

65
BEM/BEViS ~ WebComponents
Будущее уже здесь!
i-bem.js
Реализация блока i-bem в JS. Обеспечивает хелперы для
представления блока в виде JS объекта с определёнными методами и
свойствами.

68
Декларативность
01. {
02.

block: 'folders',

03.

js: true

04. }

69
Декларативность
01. <div class="folders i-bem"
02.

onclick="return {"folders":{}}">

03. </div>

70
Декларативность
01. BEM.DOM.decl('folders',
02.

onSetMod: {

03.

'js': function() {...}

04.

}

05. });

71
Изменение модификатора
01. BEM.DOM.decl('folders',
02.

onSetMod: {

03.

'disabled': {

04.

'yes': function() {this.setMod('aaa', 'bbb')}

05.

}

06.

}

07. });
72
События
01. BEM.DOM.decl('folders',
02.

onSetMod: {

03.

'disabled': {

04.

'yes': function() {this.trigger('disabled')}

05.

}

06.

}

07. });
73
События
on(e, [data], fn, [ctx])
подписка на событие e
onFirst(e, [data], fn, [ctx])
подписка только на первое событие e
un([e], [fn], [ctx]) —
отписка от конкретного события e или всех событий
trigger(e, [data])
нотификация о событии e
74
Поиск элементов в терминах
БЭМ
findBlockInside({String})
ищет блок с заданным именем
findBlockInside({blockName: '', modName: '', modVal:
''})
ищет блок с заданными именем, модификатором и значением
findBlocksInside({String|Object})
ищет блоки -"75
Поиск элементов в терминах
БЭМ
findElem(elemName[, elemMod, elemModVal])
ищет элемент, возвращает jQuery-объект (некэширует
результат)

76
Поиск элементов в терминах
БЭМ
findElem(elemName[, elemMod, elemModVal])
ищет элемент, возвращает jQuery-объект (некэширует
результат)
elem(elemName[, elemMod, elemModVal])
ищет элемент, возвращает jQuery-объект (кэширует результат)

77
Расширение поведения
01. BEM.DOM.decl({'name': 'b-link',
02.

'modName': 'pseudo',

03.

'modVal': 'yes'}, {

04.

_onClick : function() {

05.

this

06.

.__base.apply(this, arguments)

07.

.setMod('status', 'clicked');

08.
09. });

}
Итого
● Веб-компоненты уже внедряются в браузеры
● Стоит следить за веб-компонентами, т.к они сильно облегчают работу
фронтендерам
● BEM == веб-компоненты. Можно использовать уже сейчас и привыкать

79
Ссылки
● Спецификация W3C
● http://jonrimmer.github.io/are-we-componentized-yet/
● Статьи на HTML5Rocks:
– http://www.html5rocks.com/en/tutorials/webcomponents/template/
– http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
– http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
– http://www.html5rocks.com/en/tutorials/webcomponents/imports/
● Polymer Project

80
Домашнее задание
Олег Мохов
Разработчик интерфейсов

Веб-компоненты
82

Mais conteúdo relacionado

Mais procurados

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib
 
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Ontico
 
Vue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейVue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейKonstantin Komelin
 
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico
 
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico
 
C# Web. Занятие 07.
C# Web. Занятие 07.C# Web. Занятие 07.
C# Web. Занятие 07.Igor Shkulipa
 
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Roman Dvornov
 
JavaScript Базовый. Занятие 10.
JavaScript Базовый. Занятие 10.JavaScript Базовый. Занятие 10.
JavaScript Базовый. Занятие 10.Igor Shkulipa
 
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
 
Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Yandex
 
C# Web. Занятие 13.
C# Web. Занятие 13.C# Web. Занятие 13.
C# Web. Занятие 13.Igor Shkulipa
 
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10OdessaFrontend
 
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareКак сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareYandex
 
Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...
Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...
Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...Ontico
 

Mais procurados (16)

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
 
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)
 
Vue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейVue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людей
 
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
 
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
 
C# Web. Занятие 07.
C# Web. Занятие 07.C# Web. Занятие 07.
C# Web. Занятие 07.
 
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
 
JavaScript Базовый. Занятие 10.
JavaScript Базовый. Занятие 10.JavaScript Базовый. Занятие 10.
JavaScript Базовый. Занятие 10.
 
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
 
Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"
 
C# Web. Занятие 13.
C# Web. Занятие 13.C# Web. Занятие 13.
C# Web. Занятие 13.
 
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
 
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareКак сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
 
За пределами PageObject
За пределами PageObjectЗа пределами PageObject
За пределами PageObject
 
Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...
Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...
Basis.js — почему я не бросил разрабатывать свой фреймворк / Роман Дворнов (О...
 

Destaque

ITmozg_Kumpel_Kariera_v_IT
ITmozg_Kumpel_Kariera_v_ITITmozg_Kumpel_Kariera_v_IT
ITmozg_Kumpel_Kariera_v_ITITmozg
 
I tmozg js_school_jquery
I tmozg js_school_jqueryI tmozg js_school_jquery
I tmozg js_school_jqueryITmozg
 
Rolling shutter slats roll forming machine
Rolling shutter slats roll forming machineRolling shutter slats roll forming machine
Rolling shutter slats roll forming machineroll-forming-machinery
 
поиск работы в It. как правильно себя продавать i_tmozg_bb_2013
поиск работы в It. как правильно себя продавать  i_tmozg_bb_2013поиск работы в It. как правильно себя продавать  i_tmozg_bb_2013
поиск работы в It. как правильно себя продавать i_tmozg_bb_2013ITmozg
 
Oxxigeno - Llega la web comercialmente inteligente
Oxxigeno - Llega la web comercialmente inteligenteOxxigeno - Llega la web comercialmente inteligente
Oxxigeno - Llega la web comercialmente inteligenteguest6cd6f0
 
기조발제 황상민 다양성이 경쟁력이다 인쇄용
기조발제 황상민 다양성이 경쟁력이다 인쇄용기조발제 황상민 다양성이 경쟁력이다 인쇄용
기조발제 황상민 다양성이 경쟁력이다 인쇄용gojipcap
 

Destaque (6)

ITmozg_Kumpel_Kariera_v_IT
ITmozg_Kumpel_Kariera_v_ITITmozg_Kumpel_Kariera_v_IT
ITmozg_Kumpel_Kariera_v_IT
 
I tmozg js_school_jquery
I tmozg js_school_jqueryI tmozg js_school_jquery
I tmozg js_school_jquery
 
Rolling shutter slats roll forming machine
Rolling shutter slats roll forming machineRolling shutter slats roll forming machine
Rolling shutter slats roll forming machine
 
поиск работы в It. как правильно себя продавать i_tmozg_bb_2013
поиск работы в It. как правильно себя продавать  i_tmozg_bb_2013поиск работы в It. как правильно себя продавать  i_tmozg_bb_2013
поиск работы в It. как правильно себя продавать i_tmozg_bb_2013
 
Oxxigeno - Llega la web comercialmente inteligente
Oxxigeno - Llega la web comercialmente inteligenteOxxigeno - Llega la web comercialmente inteligente
Oxxigeno - Llega la web comercialmente inteligente
 
기조발제 황상민 다양성이 경쟁력이다 인쇄용
기조발제 황상민 다양성이 경쟁력이다 인쇄용기조발제 황상민 다양성이 경쟁력이다 인쇄용
기조발제 황상민 다양성이 경쟁력이다 인쇄용
 

Semelhante a Олег Мохов: Веб-компоненты

Вадим Пацев — Мастер-класс: Пробуем Web Components уже сегодня
Вадим Пацев — Мастер-класс: Пробуем Web Components уже сегодняВадим Пацев — Мастер-класс: Пробуем Web Components уже сегодня
Вадим Пацев — Мастер-класс: Пробуем Web Components уже сегодняYandex
 
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS MeetupДоклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS MeetupBadoo Development
 
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Technopark
 
DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"Roman Dvornov
 
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011camp_drupal_ua
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptCSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptAlexey Ivanov
 
Components now! (in russian)
Components now! (in russian)Components now! (in russian)
Components now! (in russian)Mikhail Davydov
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
 
Быстро о быстром
Быстро о быстромБыстро о быстром
Быстро о быстромRoman Dvornov
 
Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012
Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012
Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012Dmytro Mindra
 
Создаем Drupal дистрибутив: от идеи до сопровождения.
Создаем Drupal дистрибутив: от идеи до сопровождения.Создаем Drupal дистрибутив: от идеи до сопровождения.
Создаем Drupal дистрибутив: от идеи до сопровождения.DrupalForumZP2012
 
Meet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakAmasty
 
Конструктор отчетов
Конструктор отчетовКонструктор отчетов
Конструктор отчетовDocsvision
 
Михаил Давыдов "Масштабируемые JavaScript-приложения"
Михаил Давыдов "Масштабируемые JavaScript-приложения"Михаил Давыдов "Масштабируемые JavaScript-приложения"
Михаил Давыдов "Масштабируемые JavaScript-приложения"Yandex
 
Intersystems Cache - Как не загреметь в долговую яму
Intersystems Cache - Как не загреметь в долговую ямуIntersystems Cache - Как не загреметь в долговую яму
Intersystems Cache - Как не загреметь в долговую ямуDenis Pavlov
 
Redis varnish js
Redis varnish jsRedis varnish js
Redis varnish jsiliakan
 
15 - Web-технологии. Сессии и авторизация
15 - Web-технологии. Сессии и авторизация15 - Web-технологии. Сессии и авторизация
15 - Web-технологии. Сессии и авторизацияRoman Brovko
 
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир ДупелевRich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир ДупелевOntico
 
Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.
Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.
Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.Alex Barkov
 

Semelhante a Олег Мохов: Веб-компоненты (20)

Вадим Пацев — Мастер-класс: Пробуем Web Components уже сегодня
Вадим Пацев — Мастер-класс: Пробуем Web Components уже сегодняВадим Пацев — Мастер-класс: Пробуем Web Components уже сегодня
Вадим Пацев — Мастер-класс: Пробуем Web Components уже сегодня
 
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS MeetupДоклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
Доклад "Веб-компоненты — будущее или настоящее?" на MoscowJS Meetup
 
Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1Frontend весна 2014 лекция 1
Frontend весна 2014 лекция 1
 
DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"
 
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptCSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
 
Components now! (in russian)
Components now! (in russian)Components now! (in russian)
Components now! (in russian)
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
 
Быстро о быстром
Быстро о быстромБыстро о быстром
Быстро о быстром
 
Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012
Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012
Тестируем код с Visual Studio 2012 - XP Days Ukraine 2012
 
Создаем Drupal дистрибутив: от идеи до сопровождения.
Создаем Drupal дистрибутив: от идеи до сопровождения.Создаем Drupal дистрибутив: от идеи до сопровождения.
Создаем Drupal дистрибутив: от идеи до сопровождения.
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Meet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis Bosak
 
Конструктор отчетов
Конструктор отчетовКонструктор отчетов
Конструктор отчетов
 
Михаил Давыдов "Масштабируемые JavaScript-приложения"
Михаил Давыдов "Масштабируемые JavaScript-приложения"Михаил Давыдов "Масштабируемые JavaScript-приложения"
Михаил Давыдов "Масштабируемые JavaScript-приложения"
 
Intersystems Cache - Как не загреметь в долговую яму
Intersystems Cache - Как не загреметь в долговую ямуIntersystems Cache - Как не загреметь в долговую яму
Intersystems Cache - Как не загреметь в долговую яму
 
Redis varnish js
Redis varnish jsRedis varnish js
Redis varnish js
 
15 - Web-технологии. Сессии и авторизация
15 - Web-технологии. Сессии и авторизация15 - Web-технологии. Сессии и авторизация
15 - Web-технологии. Сессии и авторизация
 
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир ДупелевRich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
 
Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.
Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.
Drupal Camp Kyiv 2013. Удобная разработка drupal проекта. Полезные модули.
 

Mais de Yandex

Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksYandex
 
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Yandex
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаYandex
 
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаПредставление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаYandex
 
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Yandex
 
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Yandex
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Yandex
 
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Yandex
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Yandex
 
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Yandex
 
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Yandex
 
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Yandex
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровYandex
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Yandex
 
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Yandex
 
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Yandex
 
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Yandex
 
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Yandex
 
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Yandex
 
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Yandex
 

Mais de Yandex (20)

Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of Tanks
 
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
 
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаПредставление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
 
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
 
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
 
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
 
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
 
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
 
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
 
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
 
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
 
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
 
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
 
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
 
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
 

Олег Мохов: Веб-компоненты