Upload
andrey-listochkin
View
373
Download
0
Embed Size (px)
DESCRIPTION
Ідея веб-компонентів не нова: ще перша чернетка специфікації 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/
Citation preview
Web Components и будущее web-
разработкиАндрей Листочкин
@listochkin
Чего разработчикам хотелось?
XML namespaces: 1998(HTML in XML => XHTML)
JSP/JSF
Кастомные теги
iframe - 1997 IEYUI3 Contextual Reset - 2009
Изоляция
Совместимость
2006
2012
Золотая рыбка исполняет желания
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
2. Изоляция!Templates, Shadow DOM
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
2. Изоляция!Templates, Shadow DOM
3. Совместимость!Теги - они и в Африке теги.
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
2. Изоляция!Templates, Shadow DOM
3. Совместимость!Теги - они и в Африке теги.
Нативно
Полифилы в
комплекте
<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>
Custom Elements
<x-datepicker id="from"
value="2013-10-27" />
$('#from').on('change', function (e) {
...
});
Custom Elements
<fb-newsfeed>
<fb-news-item from="Вася" likes="5"> <img src="lolcat.png">
<fb-comment from="Игорь"> Хахаха :) </fb-comment>
</fb-news-item>
...
Shadow DOM
A Shadow
B
C A’
<X> +