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
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. .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. .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.
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. 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>
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. 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. HTML Imports
Yo dawg. I hear you like imports, so I included an import in your import.
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. Shadow DOM
_ Video player
<video controls="" autoplay="" name="media">
<source src="http://localhost:1000/media" type="audio/mpeg">
</video>
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/
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
Кто такая я и почему я сейчас рассказываю про веб компоненты…
Если описание моего проекта перекликается с вашим, то это значит, что вам тоже можно присмотреться к web components.
Все 4 части можно использовать отдельно, но
Тема шаблонизации в Вебе не нова, бекенд - фронтенд.
Контент шаблона не находится в ДОМе, все запросы querySelector() или getElementById() не выберут детей
Можно разместить где угодно в документе <head>, <body>, or <frameset
Чтобы избежать конфликтов, согласно стандарту, кастомные элементы должны содержать дефис в своём названии. По-умолчанию они наследуют HTMLElement.
Темплейты - фрагменты HTML, которые программист собирается использовать в будущем.
Custom позволят писать модульный, удобочитаемый код на высоком уровне.
HTMl Imports Импорт фрагментов разметки из других файлов.
Shadow DOM - Инструмент инкапсуляции HTML.
Темплейты - фрагменты HTML, которые программист собирается использовать в будущем.
Custom позволят писать модульный, удобочитаемый код на высоком уровне.
HTMl Imports Импорт фрагментов разметки из других файлов.
Shadow DOM - Инструмент инкапсуляции HTML.
На мой взгляд, Web Components — это следующий шаг. Разработчики смогут создавать интерактивные виджеты. Их легко поддерживать, переиспользовать, интегрировать.
Изучайте и дерзайте!