Your SlideShare is downloading. ×
0
<web-components> Web back to future </web-components>
by Anna Khabibullina
.Agenda
_ Web Components and their parts
_ X-Browser Support
_ Demo
_ Best Practices
.About Me
_ Co-founder of DA-14 Web Dev Team
http://da-14.com
_ Web Engineer
http://sitecues.com
_ Open Source Contributor...
.What I work on
_ SaaS application(assistive
tool)
_ (No) libraries
_ No frameworks
_ UX design matters
_ Accessibility in...
.Web Components Made Of Rainbows
Set of cutting edge [draft] standards
proposed by Google that make it
possible to build s...
.Web Components
Comprised of four parts:
_ Templates
_ Custom Elements
_ HTML Imports
_ Shadow DOM
Templates: Standardizing client-side templating
_ http://www.html5rocks.com/en/tutorials/webcomponents/template
_ Why? : M...
Templates
_ Inert markup
<table>
<tr>
<template id="cells-to-repeat">
<td>Some content!</td>
</template>
</tr>
</table>
_ ...
.Web Components
Templates
Custom Elements
HTML Imports
Shadow DOM
Custom Elements: Sexy markup
_ http://www.html5rocks.com/en/tutorials/webcomponents/customelements
_ Why? : There is nothi...
Custom Elements
_ JavaScript
var CustomElementProto = Object.create(HTMLElement.prototype);
var XFoo = document.registerEl...
.Web Components
Templates
Custom Elements
HTML Imports
Shadow DOM
HTML Imports: Simple way to load HTML elements
_ http://www.html5rocks.com/en/tutorials/webcomponents/imports
_ Why? : The...
HTML Imports
index.html
import.html<script> … </script>
…
<div id="blog-post">...</div>
<head>
<link rel="import" href="/p...
HTML Imports
Yo dawg. I hear you like imports, so I included an import in your import.
.Web Components
Templates
Custom Elements
HTML Imports
Shadow DOM
Shadow DOM: Separating content from presentation
_ Why? : DOM tree encapsulation problem.
_ How? : Think about DOM hosting...
Shadow DOM
_ Video player
<video controls="" autoplay="" name="media">
<source src="http://localhost:1000/media" type="aud...
Shadow DOM
_ http://html5-demos.appspot.com/shadowdom-visualizer
.Web Components
Templates
Standardizing client-side templating
Custom Elements
Sexy markup
HTML Imports
Simple way to load...
.Web Components
.Best Practices
_ Namespacing(bower.io, customelements.io)
_ Mimic built-in elements as closely as possible
_ Don't put to...
.X-Browser Support
_ http://jonrimmer.github.io/are-we-componentized-yet/
_ X-TAG
http://x-tags.org/
_ POLYMER
http://www....
.Demo
_ CUSTOMELEMENTS.IO
A gallery to display Web Components
created by the community.
http://customelements.io/
_ COMPON...
.Web Components Supporting Cast: Awesome Future Web
_ document.querySelectorAll()
_ Object.observe()
_ MutationObserver
_ ...
.Your turn…Discover!
.Your turn… Discover!
.Useful links
_ http://www.w3.org/wiki/WebComponents/
_ http://webcomponents.org/
_ http://habrahabr.ru/post/210058/
_ htt...
Upcoming SlideShare
Loading in...5
×

Web Components: Web back to future.

1,234

Published on

Meet web components - a new draft spec proposed by Google and used to write reusable and encapsulated widgets that can be attached to DOM isolated.

by Anna Khabibullina, Co-Founder at DA-14
for Kharkiv JS&UI Meetup #1

Published in: Engineering
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,234
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • Кто такая я и почему я сейчас рассказываю про веб компоненты…
  • Если описание моего проекта перекликается с вашим, то это значит, что вам тоже можно присмотреться к web components.
  • Все 4 части можно использовать отдельно, но
  • Тема шаблонизации в Вебе не нова, бекенд - фронтенд.
  • Контент шаблона не находится в ДОМе, все запросы querySelector() или getElementById() не выберут детей

    Можно разместить где угодно в документе <head>, <body>, or <frameset
  • Чтобы избежать конфликтов, согласно стандарту, кастомные элементы должны содержать дефис в своём названии. По-умолчанию они наследуют HTMLElement.
  • Простое АПИ, которое давно должно было появится.
  • CORS
  • Простое АПИ, которое давно должно было появится.
  • http://localhost:1000/media
  • http://html5-demos.appspot.com/shadowdom-visualizer
  • Темплейты - фрагменты HTML, которые программист собирается использовать в будущем.

    Custom позволят писать модульный, удобочитаемый код на высоком уровне.

    HTMl Imports Импорт фрагментов разметки из других файлов.

    Shadow DOM - Инструмент инкапсуляции HTML.
  • Темплейты - фрагменты HTML, которые программист собирается использовать в будущем.

    Custom позволят писать модульный, удобочитаемый код на высоком уровне.

    HTMl Imports Импорт фрагментов разметки из других файлов.

    Shadow DOM - Инструмент инкапсуляции HTML.
  • http://localhost:8000/site/chess-test/bower_components/chess-board/index.html
  • На мой взгляд, Web Components — это следующий шаг. Разработчики смогут создавать интерактивные виджеты. Их легко поддерживать, переиспользовать, интегрировать.

    Изучайте и дерзайте!
  • Transcript of "Web Components: Web back to future."

    1. 1. <web-components> Web back to future </web-components> by Anna Khabibullina
    2. 2. .Agenda _ Web Components and their parts _ X-Browser Support _ Demo _ Best Practices
    3. 3. .About Me _ Co-founder of DA-14 Web Dev Team http://da-14.com _ Web Engineer http://sitecues.com _ Open Source Contributor http://github.com/akhabibullina _ Social Person http://twitter.com/_khabibullina
    4. 4. .What I work on _ SaaS application(assistive tool) _ (No) libraries _ No frameworks _ UX design matters _ Accessibility in mind .Welcome every problem as opportunity _ Better understanding _ R&D challenges _ Taking advantage of new technologies _ Experimental features _ X-browser support for modern browsers
    5. 5. .Web Components Made Of Rainbows Set of cutting edge [draft] standards proposed by Google that make it possible to build secure reusable widgets using web platform technologies.
    6. 6. .Web Components Comprised of four parts: _ Templates _ Custom Elements _ HTML Imports _ Shadow DOM
    7. 7. Templates: Standardizing client-side templating _ http://www.html5rocks.com/en/tutorials/webcomponents/template _ Why? : Maximize code reusability and maintainability. _ How? : Declare inert chunks of cloneable DOM with <template>.
    8. 8. Templates _ Inert markup <table> <tr> <template id="cells-to-repeat"> <td>Some content!</td> </template> </tr> </table> _ Activate template var t = document.querySelector('template').content; var clone = document.importNode(t, true); document.body.appendChild(clone);
    9. 9. .Web Components Templates Custom Elements HTML Imports Shadow DOM
    10. 10. Custom Elements: Sexy markup _ http://www.html5rocks.com/en/tutorials/webcomponents/customelements _ Why? : There is nothing modern in <div> soup. _ How? : Define new types of HTML elements and their APIs.
    11. 11. Custom Elements _ JavaScript var CustomElementProto = Object.create(HTMLElement.prototype); var XFoo = document.registerElement('x-custom-da-14', { prototype: CustomElementProto }); var xfoo = new XFoo(); document.body.appendChild(xfoo); _ HTML <x-custom-da-14></x-custom-da-14>
    12. 12. .Web Components Templates Custom Elements HTML Imports Shadow DOM
    13. 13. HTML Imports: Simple way to load HTML elements _ http://www.html5rocks.com/en/tutorials/webcomponents/imports _ Why? : The web's most basic content, HTML, requires the greatest amount of effort to work with. _ How? : Import HTML components via <link rel="import">.
    14. 14. HTML Imports index.html import.html<script> … </script> … <div id="blog-post">...</div> <head> <link rel="import" href="/path/to/import.html"> </head> <body> … </body> var c = document.querySelector('link[rel="import"]').import; access content
    15. 15. HTML Imports Yo dawg. I hear you like imports, so I included an import in your import.
    16. 16. .Web Components Templates Custom Elements HTML Imports Shadow DOM
    17. 17. Shadow DOM: Separating content from presentation _ Why? : DOM tree encapsulation problem. _ How? : Think about DOM hosting DOM, which hosts more DOM. _ http://www.html5rocks.com/en/tutorials/webcomponents/sh adowdom
    18. 18. Shadow DOM _ Video player <video controls="" autoplay="" name="media"> <source src="http://localhost:1000/media" type="audio/mpeg"> </video>
    19. 19. Shadow DOM _ http://html5-demos.appspot.com/shadowdom-visualizer
    20. 20. .Web Components Templates Standardizing client-side templating Custom Elements Sexy markup HTML Imports Simple way to load HTML elements Shadow DOM Separating content from presentation
    21. 21. .Web Components
    22. 22. .Best Practices _ Namespacing(bower.io, customelements.io) _ Mimic built-in elements as closely as possible _ Don't put too much in Shadow DOM _ Don't create more custom elements than you need ….. _ Accessibility _ Performance _ Testing _ http://webcomponents.org/articles/web-components-best- practices/
    23. 23. .X-Browser Support _ http://jonrimmer.github.io/are-we-componentized-yet/ _ X-TAG http://x-tags.org/ _ POLYMER http://www.polymer- project.org/ _ BOSONIC http://bosonic.github.io/
    24. 24. .Demo _ CUSTOMELEMENTS.IO A gallery to display Web Components created by the community. http://customelements.io/ _ COMPONENT KITCHEN Component catalog for a mainstream HTML audience. http://component.kitchen/ http://html5-demos.appspot.com/static/webcomponents/index.html#1
    25. 25. .Web Components Supporting Cast: Awesome Future Web _ document.querySelectorAll() _ Object.observe() _ MutationObserver _ CSS variables, calc() http://wiki.ecmascript.org/doku.php?id=harmony:observe
    26. 26. .Your turn…Discover! .Your turn… Discover!
    27. 27. .Useful links _ http://www.w3.org/wiki/WebComponents/ _ http://webcomponents.org/ _ http://habrahabr.ru/post/210058/ _ http://css-tricks.com/modular-future-web-components/ _ http://webcomponents.org/presentations/accessibility-of-web- components-at-jsconf-us/ _ https://www.youtube.com/watch?v=2txPYQOWBtg _ http://www.youtube.com/watch?v=eJZx9c6YL8k _ http://jonrimmer.github.io/are-we-componentized-yet/ _ http://w3c.github.io/webcomponents/spec/custom/#es6
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×