Webcomponents TLV October 2014
70
-
Upload
dmitry-bakaleinik -
Category
Software
-
view
164 -
download
0
description
Web components lecture be Dmitry Bakaleinik
Transcript of Webcomponents TLV October 2014
Web components
Dmitry����������� ������������������ Bakaleinik����������� ������������������ [email protected]����������� ������������������ @demongloom
October����������� ������������������ 2014
HTML was very lean, with very basic data display and entry. It was clear which was better.It could be mastered by people who were not good programmers — or even programmers at all. You could make something that looked "OK" pretty quickly.
Web in 1990s, HTML pages were lean and simple
HTML and the World Wide Web started in the early 1990's. Version 1.0 of the first popular, dominant commercial browser, Netscape Navigator, was released in December 1994. It supported very simple HTML, which included simple styling and simple forms for data entry. Later versions in 1995 added tables, cookies, and very early JavaScript. Microsoft released its first browser in 1995.At this point, extremely rich applications could be written in C++, Visual Basic, or any of many programming systems.
The HTML could be mastered by people who were
not good programmers or even programmers at all
You could make something that looked "OK" pretty quickly
HTML Elements are encapsulated
HTML Elements are configurable
Even more configuration!
HTML Elements composition
HTML Elements are programmable
jQuery
Mootools
Prototype
Dojo
ExtJS
Web in 2000s, rapid growth of UI frameworks
Backbone
AngularJS
JavaScript dominates the web’s programming
landscape.
Instead writing HTML, we’re writing more
JavaScript.
What is broken in the web today?
Tabs:����������� ������������������ a����������� ������������������ common����������� ������������������ component����������� ������������������ on����������� ������������������ the����������� ������������������ web
Dojo
Backbone
Ember
Ember
ExtJS
ExtJS
Angular
Our HTML is terrible
Our HTML is terrible
Our HTML is terrible
Can we do better?
Back to HTML
What we’re used before
Why not just mega-button?
The component model for Web
CustomElements
HTMLTemplates
HTMLImports
ShadowDOM
Let authors define their own elements, with new tag names and new script interfaces.
Defines how templates and custom elements are packaged and loaded as a resource.
Define chunks of markup that are inert but can be activated for use later.
Web components are set of emerging standards
that allow developers to extend html
Can I use web components?
Templates ✓ ✓ ✓ ✗ ✗
Shadow DOM ✓ ✓ ✗ ✓ ✗
Custom Elements ✓ ✓ ✓ ✗ ✗
Imports ✓ ✓ ✗ ✗ ✗
New web technology detection easy way
• Try it out on Internet Explorer
• Did it work?
• No?
• It’s a new web technology
Let authors define their own elements, with new tag names and new script interfaces.
Custom Elements
Defining custom element
The����������� ������������������ name����������� ������������������ must����������� ������������������ contain����������� ������������������ a����������� ������������������ dash����������� ������������������ (-)
Extending custom element
Observe attribute changes
Styling custom element
no����������� ������������������ dot����������� ������������������ ����������� ������������������ in����������� ������������������ selector
Defines how templates and custom elements are packaged and loaded as a resource.
HTML Imports
Custom element html filemega-button.html
Importing custom element
Detecting broken elements
Define chunks of markup that are inertbut can be activated for use later.
Template
The <template> element declares fragments of HTML that can be cloned and inserted
by script
In a rendering, the template element represents nothing
Template declaration
Encapsulates a DOM subtree for more reliable composition of user interface elements.
Shadow DOM
The fundamental problem that makes widgets built out of
HTML and JavaScript hard to use:
The DOM tree inside a widget isn’t encapsulated from
the rest of the page
This lack of encapsulation means your document stylesheet might
accidentally apply to parts inside the widget
Your JavaScript might accidentally modify
parts inside the widget
Your IDs might overlap with IDs
inside the widget and so on
Shadow DOM addresses the DOM tree
encapsulation problem
With Shadow DOM, elements can get a new kind of node
associated with them
This new kind of node is called a shadow root
An element that has a shadow root associated with it is called a shadow host
The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead
The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead
Thanks!
