Web Components и
будущее webразработки
Андрей Листочкин
@listochkin
Чего разработчикам
хотелось?
Кастомные теги
XML namespaces: 1998
(HTML in XML => XHTML)
JSP/JSF
Изоляция
iframe - 1997 IE
YUI3 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>
<...
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="Игорь">
Хахаха...
Shadow DOM

B
A

Shadow
C

A’
<X> +
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Web components и будущее web разработки - GDG DevFest 2013
Upcoming SlideShare
Loading in …5
×

Web components и будущее web разработки - GDG DevFest 2013

638 views

Published on

Ідея веб-компонентів не нова: ще перша чернетка специфікації 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/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
638
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web components и будущее web разработки - GDG DevFest 2013

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

×