Ідея веб-компонентів не нова: ще перша чернетка специфікації XHTML 1998 передбачала створення довільних тегів; також багато серверних технології, такі як JSP, використовують їх для опису компонентів більше 10 років. Проте, сьогодні Google, Mozilla і інші компанії працюють над тим, щоб вперше зробити їх повноправною частиною веб-стеку. А завдяки таким проектам, як Bricks, Polymer, Angular.js і Ember.js ми можемо використовувати їх вже сьогодні. Images used: http://www.flickr.com/photos/nolanus/5848333881/sizes/l/in/photolist-9UNeUM-dqT1QX-dSSKN7-eecrXH-dNWHjV-9UM57Y-ctRUch-8GhtLU-cAszv5-cyNr19-cyNqJy-cyNqNJ-cAszA9-cyNqUm-cAswSW-cAswZb-cAsx51-cEtrZw-7M5zua-dDRBDB-9mMwvi-9mMsCX-9mMDjZ-fgqsYm-7Z4QnU-bvhN78-bvhY4x-bvhwTi-ekK3yP-9xiTNB-9tZ8Bw-bZnEMG-bZnES1-9AtL4n-9AwFd3-9AwFjj-9EJWsm-9EJWmu-eecnPB-ec6KrT-7DL6HC-b2vZkM-b2vZb8-b2vZ6a-b2vZpk-b2vZgc-b2vZt6-82u7KU-b2vZzv-b2vZDB-b2w128/ http://www.flickr.com/photos/94457816@N00/85042165/in/photolist-8vS5e-9sZYn-akKu2-akKum-akKuz-akKuM-akKuZ-crPdi-fZP1g-g1hRG-g1hRJ-hxs4w-iDgLz-jMsJo-mywn3-mMW6f-mTsqs-p3AZk-qdKSL-rmUZY-rn6Yb-rt1kh-rvFUA-rA8Fd-rMh7u-rWoAv-uJivN-xt1Li-yfwzo-zZTj7-Ap2Za-Bn8a7-BWm1P-DoKBE-FgBNY-FDtZf-Gd9eo-GZvD1-Jx3P4-Kf4rf-LXGVN-T6KEn-XsfD5-YrXDn-2zo9Bb-2F4B4e-38qj1v-3akHmm-3ddgPm-3ktAV2-3pDWai http://www.flickr.com/photos/girardi/931759042/sizes/l/in/photostream/ http://www.flickr.com/photos/rosalynlouise/4835159189/sizes/l/in/photostream/ http://www.flickr.com/photos/quikbeam/4113929123/sizes/l/in/photostream/ http://www.flickr.com/photos/digmia/4172001778/sizes/l/in/photostream/ http://www.flickr.com/photos/mugley/2594318333/sizes/o/in/photostream/ http://www.flickr.com/photos/daremoshiranai/3422659111/sizes/l/in/photostream/ http://www.flickr.com/photos/atoach/7839341408/sizes/l/in/photostream/ http://www.flickr.com/photos/lovro/6076548404/sizes/l/in/photostream/ http://www.flickr.com/photos/phatcontroller/8656598244/sizes/l/in/photostream/ http://www.flickr.com/photos/42256671@N05/6687734675/sizes/o/in/photostream/ http://www.flickr.com/photos/justjenn/8546896516/sizes/o/in/photostream/ http://bluestarz057.deviantart.com/art/Web-Browsers-OCs-279473127 http://www.flickr.com/photos/democonference/6645428073/sizes/l/in/photostream/ http://www.flickr.com/photos/lel4nd/5579527992/sizes/o/in/photostream/

1. Web Components и
будущее webразработки
Андрей Листочкин

2. @listochkin

18. Чего разработчикам
хотелось?

19. Кастомные теги
XML namespaces: 1998
(HTML in XML => XHTML)
JSP/JSF

20. Изоляция
iframe - 1997 IE
YUI3 Contextual Reset - 2009

21. Совместимость

27. 2006

29. 2012

30. Золотая рыбка исполняет желания

31. Золотая рыбка исполняет желания
1. Теги!
Бонус: неймспейсы! <my-tag>

32. Золотая рыбка исполняет желания
1. Теги!
Бонус: неймспейсы! <my-tag>
2. Изоляция!
Templates, Shadow DOM

33. Золотая рыбка исполняет желания
1. Теги!
Бонус: неймспейсы! <my-tag>
2. Изоляция!
Templates, Shadow DOM
3. Совместимость!
Теги - они и в Африке теги.

34. Золотая рыбка исполняет желания
1. Теги!
Бонус: неймспейсы! <my-tag>
2. Изоляция!
Templates, Shadow DOM
3. Совместимость!
Теги - они и в Африке теги. ивно
ат
Н
ыв
ил
иф кте
ол ле
П
мп
ко

35. <template>
<script type="text/template">
<p>I am text</p>
<img src="will/download">
</script>
<template>
<p>I am DOM</p>
<img src="will/defer">
</template>

36. Custom Elements
<x-datepicker id="from"
value="2013-10-27" />
$('#from').on('change', function (e) {
...
});

37. Custom Elements
<fb-newsfeed>
<fb-news-item from="Вася" likes="5">
<img src="lolcat.png">
<fb-comment from="Игорь">
Хахаха :)
</fb-comment>
</fb-news-item>
...

38. Shadow DOM
B
A
Shadow
C
A’

40. <X> +