Behavior Attachment - Revision history

Dglazkov at 17:09, 11 July 2011

2011-07-11T17:09:17Z

← Older revision		Revision as of 17:09, 11 July 2011
Line 49:		Line 49:
	===Extensions===		===Extensions===

	Behavior attachment is also used by ~~browsers~~ extensions, where an extension script, running in the context of the document, may attach extra behavior (including UI), to give the user more functionality within a document. Typical examples of such extensions are:		Behavior attachment is also used by browser extensions, where an extension script, running in the context of the document, may attach extra behavior (including UI), to give the user more functionality within a document. Typical examples of such extensions are:
	* [https://chrome.google.com/webstore/detail/kanbnempkjnhadplbfgdaagijdbdbjeb Auto Replay for YouTube]		* [https://chrome.google.com/webstore/detail/kanbnempkjnhadplbfgdaagijdbdbjeb Auto Replay for YouTube]
	* [https://chrome.google.com/webstore/detail/chiikmhgllekggjhdfjhajkfdkcngplp Scroll To Top Button]		* [https://chrome.google.com/webstore/detail/chiikmhgllekggjhdfjhajkfdkcngplp Scroll To Top Button]

Dglazkov at 20:14, 8 July 2011

2011-07-08T20:14:07Z

← Older revision		Revision as of 20:14, 8 July 2011
Line 1:		Line 1:
			The purpose of this document is provide a general overview of the behavior attachment problem in the Web.

	==Overview==		==Overview==

Dglazkov at 20:06, 8 July 2011

2011-07-08T20:06:46Z

← Older revision		Revision as of 20:06, 8 July 2011
Line 1:		Line 1:
	~~'''WORK IN PROGRESS'''~~

	==Overview==		==Overview==

Dglazkov: /* Analysis of Existing Specifications and Implementations */

2011-07-08T20:06:10Z

Analysis of Existing Specifications and Implementations

← Older revision		Revision as of 20:06, 8 July 2011
Line 138:		Line 138:
	\|}		\|}

	==~~Analysis of~~ Existing Specifications and Implementations==		==Existing Specifications and Implementations==

	===What does XBL2 do?===		===What does XBL2 do?===

Dglazkov: /* Overview and Examples in the Wild */

2011-07-08T20:05:17Z

Overview and Examples in the Wild

← Older revision		Revision as of 20:05, 8 July 2011
Line 1:		Line 1:
	'''WORK IN PROGRESS'''		'''WORK IN PROGRESS'''

	==Overview ~~and Examples in the Wild~~==		==Overview==

	'''Behavior''' can be viewed as a modular unit of Javascript, DOM elements, and CSS styles, designed to be [http://en.wikipedia.org/wiki/Loose_coupling loosely coupled] with its consumer, which could be either a document or another behavior. '''Behavior attachment''' is a mechanism for composing behaviors.		'''Behavior''' can be viewed as a modular unit of Javascript, DOM elements, and CSS styles, designed to be [http://en.wikipedia.org/wiki/Loose_coupling loosely coupled] with its consumer, which could be either a document or another behavior. '''Behavior attachment''' is a mechanism for composing behaviors.
Line 11:		Line 11:
	* '''Style encapsulation''', or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.		* '''Style encapsulation''', or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.
	* '''Event encapsulation''', which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.		* '''Event encapsulation''', which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.

			==Examples in the Wild==

	===Javascript Frameworks===		===Javascript Frameworks===

	In Web applications, the lack of behavior attachment method is addressed at a library level, with every Javascript framework attempting to solve this problem. Here is a quick overview of approaches:		In Web applications, the lack of proper behavior attachment method is addressed at a library level, with every Javascript framework attempting to solve this problem. Here is a quick overview of approaches:

	{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"		{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"

Dglazkov: moved Component Model Behavior Attachment to Behavior Attachment: Reflects the purpose of the document better.

2011-07-08T20:03:03Z

moved Component Model Behavior Attachment to Behavior Attachment: Reflects the purpose of the document better.

← Older revision	Revision as of 20:03, 8 July 2011
(No difference)

Dglazkov: /* What does XBL2 do? */

2011-07-08T20:01:44Z

What does XBL2 do?

← Older revision		Revision as of 20:01, 8 July 2011
Line 141:		Line 141:
	* There are two ways to bind: using [http://dev.w3.org/2006/xbl2/#attachment-using-ltbinding-elementgt binding element] (inline or via external document) and [http://dev.w3.org/2006/xbl2/#attachment-using-css using CSS]. The former somewhat matches the notion to be element behavior, and the latter is the decorator behavior. However, there is no distinct difference in the attachment mechanism.		* There are two ways to bind: using [http://dev.w3.org/2006/xbl2/#attachment-using-ltbinding-elementgt binding element] (inline or via external document) and [http://dev.w3.org/2006/xbl2/#attachment-using-css using CSS]. The former somewhat matches the notion to be element behavior, and the latter is the decorator behavior. However, there is no distinct difference in the attachment mechanism.
	* Inheritance is entirely self-contained, using “extends” attribute. However, the prototype chain of the implementation object is fixed up to follow inherited bindings.		* Inheritance is entirely self-contained, using “extends” attribute. However, the prototype chain of the implementation object is fixed up to follow inherited bindings.
	* There is a fair bit of machinery specified to marry the aspect and inheritance concepts seamlessly.		* There is a [http://dev.w3.org/2006/xbl2/#binding-inheritance fair bit] of machinery specified to marry the aspect and inheritance concepts seamlessly.
	* There is no notion of extending DOM elements.		* There is no notion of extending DOM elements.

Dglazkov: /* Overview and Examples in the Wild */

2011-07-08T19:58:38Z

Overview and Examples in the Wild

← Older revision		Revision as of 19:58, 8 July 2011
Line 8:		Line 8:

	In order to effectively provide encapsulation, a behavior attachment method should provide the following properties:		In order to effectively provide encapsulation, a behavior attachment method should provide the following properties:
	* '''DOM encapsulation''', typically using shadow DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.		* '''DOM encapsulation''', typically using [http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ shadow DOM]. '''Shadow DOM''' refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.
	* '''Style encapsulation''', or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.		* '''Style encapsulation''', or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.
	* '''Event encapsulation''', which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.		* '''Event encapsulation''', which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.
Line 57:		Line 57:
	===Built-in HTML Elements===		===Built-in HTML Elements===

	Another example of behavior attachment can sometimes be found in the browser itself, where complex built-in controls are created using ~~hidden DOM structures, also known as [http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/~~ shadow DOM]. Here are a few examples in [http://webkit.org WebKit]:		Another example of behavior attachment can sometimes be found in the browser itself, where complex built-in controls are created using shadow DOM. Here are a few examples in [http://webkit.org WebKit]:
	* <code>input</code> [http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/HTMLInputElement.cpp&l=106 element]		* <code>input</code> [http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/HTMLInputElement.cpp&l=106 element]
	* <code>audio</code> and <code>video</code> [http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/shadow/MediaControlRootElement.cpp element]. This one is interesting, because it's composed out of other HTML elements with attached behavior (like <code>input[type=range]</code>).		* <code>audio</code> and <code>video</code> [http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/shadow/MediaControlRootElement.cpp element]. This one is interesting, because it's composed out of other HTML elements with attached behavior (like <code>input[type=range]</code>).

Dglazkov: /* Overview and Examples in the Wild */

2011-07-08T19:57:38Z

Overview and Examples in the Wild

← Older revision		Revision as of 19:57, 8 July 2011
Line 8:		Line 8:

	In order to effectively provide encapsulation, a behavior attachment method should provide the following properties:		In order to effectively provide encapsulation, a behavior attachment method should provide the following properties:
	* ~~‘’’DOM encapsulation’’’~~, typically using shadow DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.		* '''DOM encapsulation''', typically using shadow DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.
	* ~~‘’’Style encapsulation’’’~~, or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.		* '''Style encapsulation''', or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.
	* ~~‘’’Event encapsulation’’’~~, which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.		* '''Event encapsulation''', which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.

	===Javascript Frameworks===		===Javascript Frameworks===

Dglazkov: /* Overview and Examples in the Wild */

2011-07-08T19:57:09Z

Overview and Examples in the Wild

← Older revision		Revision as of 19:57, 8 July 2011
Line 6:		Line 6:

	HTML, as exists today, does not provide an organized way of attaching behavior to a DOM element. While you can add individual scripting methods, properties and event handlers to it, there is no way to do this atomically and with proper encapsulation.		HTML, as exists today, does not provide an organized way of attaching behavior to a DOM element. While you can add individual scripting methods, properties and event handlers to it, there is no way to do this atomically and with proper encapsulation.

			In order to effectively provide encapsulation, a behavior attachment method should provide the following properties:
			* ‘’’DOM encapsulation’’’, typically using shadow DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.
			* ‘’’Style encapsulation’’’, or a way to manage expectations of styles outside of the behavior affecting it, and conversely, styles of the behavior affecting the outside.
			* ‘’’Event encapsulation’’’, which is a way to ensure that events, firing inside of the behavior’s DOM elements do not accidentally expose behavior’s implementation details.

	===Javascript Frameworks===		===Javascript Frameworks===

	In Web applications, ~~this deficiency~~ is addressed at a library level, with every Javascript framework attempting to solve this problem. Here is a quick overview of approaches:		In Web applications, the lack of behavior attachment method is addressed at a library level, with every Javascript framework attempting to solve this problem. Here is a quick overview of approaches:

	{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"		{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"