Component Model Methodology - Revision history

Dglazkov at 17:35, 23 August 2011

2011-08-23T17:35:39Z

← Older revision		Revision as of 17:35, 23 August 2011
Line 32:		Line 32:
	* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;		* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;
	* Encourage '''each building block to stand on its own''' merits.		* Encourage '''each building block to stand on its own''' merits.

	~~=Implementation Sequence=~~

	Since the component model is composed of several building blocks, it is possible to implement it incrementally, gaining more insight with each step. Here's one possible sequence (tabulated against the [[Component_Model_Use_Cases \| use cases]] and approximate percentage of satisfying them):

	~~{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~! align="left" \| Step~~
	~~! align="left" \| [[Component_Model_Use_Cases#Layout_Manager \| Layout Manager]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Widget_Mix-and-Match \| Mix-and-Match]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Rendering_Form_Controls_with_SVG \| SVG Controls]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Contacts_Widget \| Contacts Widget]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Like.2F.2B1_Button \| Like/+1 Button]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Media_Controls_For_The_Video_Element \| Media Controls for the Video Element]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Details.2FSummary_Elements \| Details/Summary Element]]~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Shadow_DOM \| Shadow DOM]]~~
	~~\| 25%~~
	~~\| -~~
	~~\| 34%~~
	~~\| 100%~~
	~~\| 25%~~
	~~\| 100%~~
	~~\| 50%~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Content_Element \| Content Element]]~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| 50%~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Constructable_DOM_Types \| Constructable DOM Types]]~~
	~~\| 25%~~
	~~\| 50%~~
	~~\| 33%~~
	~~\| -~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Registering_Elements \| Registering Elements]]~~
	~~\| 25%~~
	~~\| 50%~~
	~~\| 33%~~
	~~\| -~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Confinement_Primitives \| Confinement Primitives]]~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	\|}

Dglazkov at 16:40, 23 August 2011

2011-08-23T16:40:35Z

← Older revision		Revision as of 16:40, 23 August 2011
Line 32:		Line 32:
	* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;		* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;
	* Encourage '''each building block to stand on its own''' merits.		* Encourage '''each building block to stand on its own''' merits.

			=Implementation Sequence=

			Since the component model is composed of several building blocks, it is possible to implement it incrementally, gaining more insight with each step. Here's one possible sequence (tabulated against the [[Component_Model_Use_Cases \| use cases]] and approximate percentage of satisfying them):

			{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"
			\|- valign="top" style="border-bottom: 1px solid LightGray;"
			! align="left" \| Step
			! align="left" \| [[Component_Model_Use_Cases#Layout_Manager \| Layout Manager]]
			! align="left" \| [[Component_Model_Use_Cases#Widget_Mix-and-Match \| Mix-and-Match]]
			! align="left" \| [[Component_Model_Use_Cases#Rendering_Form_Controls_with_SVG \| SVG Controls]]
			! align="left" \| [[Component_Model_Use_Cases#Contacts_Widget \| Contacts Widget]]
			! align="left" \| [[Component_Model_Use_Cases#Like.2F.2B1_Button \| Like/+1 Button]]
			! align="left" \| [[Component_Model_Use_Cases#Media_Controls_For_The_Video_Element \| Media Controls for the Video Element]]
			! align="left" \| [[Component_Model_Use_Cases#Details.2FSummary_Elements \| Details/Summary Element]]
			\|- valign="top" style="border-bottom: 1px solid LightGray;"
			\| [[Component_Model#Shadow_DOM \| Shadow DOM]]
			\| 25%
			\| -
			\| 34%
			\| 100%
			\| 25%
			\| 100%
			\| 50%
			\|- valign="top" style="border-bottom: 1px solid LightGray;"
			\| [[Component_Model#Content_Element \| Content Element]]
			\| 25%
			\| -
			\| -
			\| -
			\| -
			\| -
			\| 50%
			\|- valign="top" style="border-bottom: 1px solid LightGray;"
			\| [[Component_Model#Constructable_DOM_Types \| Constructable DOM Types]]
			\| 25%
			\| 50%
			\| 33%
			\| -
			\| 25%
			\| -
			\| -
			\|- valign="top" style="border-bottom: 1px solid LightGray;"
			\| [[Component_Model#Registering_Elements \| Registering Elements]]
			\| 25%
			\| 50%
			\| 33%
			\| -
			\| 25%
			\| -
			\| -
			\|- valign="top" style="border-bottom: 1px solid LightGray;"
			\| [[Component_Model#Confinement_Primitives \| Confinement Primitives]]
			\| -
			\| -
			\| -
			\| -
			\| 25%
			\| -
			\| -
			\|}

Dglazkov: /* Approach */

2011-08-23T16:38:54Z

Approach

← Older revision		Revision as of 16:38, 23 August 2011
Line 7:		Line 7:
	# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;		# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;
	# Write [https://github.com/dglazkov/component-model specification] draft(s) for the building blocks;		# Write [https://github.com/dglazkov/component-model specification] draft(s) for the building blocks;
	# ~~Provide~~ implementation feedback:		# Cultivate implementation feedback:
	#* Provide experimental ~~implementations and seek~~ feedback from use case audiences;		#* Provide experimental implementation(s) for the building blocks;
	#* Write a test suite;		#* Seek feedback from the use case audiences;
			#* Incorporate feedback into specification.
			# Write a test suite.
	# Iterate until [[#Success_Criteria \| success criteria]] is reached.		# Iterate until [[#Success_Criteria \| success criteria]] is reached.

Dglazkov: /* Approach */

2011-08-23T16:36:51Z

Approach

← Older revision		Revision as of 16:36, 23 August 2011
Line 6:		Line 6:
	# Come with a design that satisfies all desired properties;		# Come with a design that satisfies all desired properties;
	# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;		# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;
	# Write [https://github.com/dglazkov/component-model specification] draft(s) ~~using~~ the building blocks;		# Write [https://github.com/dglazkov/component-model specification] draft(s) for the building blocks;
	# Provide implementation feedback:		# Provide implementation feedback:
	#* Provide experimental implementations and seek feedback from use case audiences;		#* Provide experimental implementations and seek feedback from use case audiences;

Dglazkov: /* Approach */

2011-08-23T16:36:31Z

Approach

← Older revision		Revision as of 16:36, 23 August 2011
Line 6:		Line 6:
	# Come with a design that satisfies all desired properties;		# Come with a design that satisfies all desired properties;
	# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;		# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;
	# Write [https://github.com/dglazkov/component-model specification] ~~based on~~ the building blocks;		# Write [https://github.com/dglazkov/component-model specification] draft(s) using the building blocks;
	# Provide implementation feedback:		# Provide implementation feedback:
	#* Provide experimental implementations and seek feedback from use case audiences;		#* Provide experimental implementations and seek feedback from use case audiences;

Dglazkov: /* Success criteria */

2011-08-23T16:36:01Z

Success criteria

← Older revision		Revision as of 16:36, 23 August 2011
Line 21:		Line 21:
	** satisfy all desired properties;		** satisfy all desired properties;
	** follow the component model [[#Design_Priniciples \| design principles]].		** follow the component model [[#Design_Priniciples \| design principles]].
			* The specification:
			** is a complete set of requirements for all building blocks and corner cases, discovered during implementation;
			* The test suite:
			** provides coverage for each requirement in the specification.

	=Design Principles=		=Design Principles=

Dglazkov: /* Approach */

2011-08-23T16:31:22Z

Approach

← Older revision		Revision as of 16:31, 23 August 2011
Line 6:		Line 6:
	# Come with a design that satisfies all desired properties;		# Come with a design that satisfies all desired properties;
	# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;		# Extrude [[Component_Model#Building_Blocks \| building blocks]] out of the design;
			# Write [https://github.com/dglazkov/component-model specification] based on the building blocks;
			# Provide implementation feedback:
			#* Provide experimental implementations and seek feedback from use case audiences;
			#* Write a test suite;
	# Iterate until [[#Success_Criteria \| success criteria]] is reached.		# Iterate until [[#Success_Criteria \| success criteria]] is reached.

Dglazkov at 16:20, 23 August 2011

2011-08-23T16:20:04Z

← Older revision		Revision as of 16:20, 23 August 2011
Line 1:		Line 1:
	Here are the guidelines for understanding the problem of and developing specification for the [[Component_Model \| Component Model]]		Here are the guidelines for understanding the problem of and developing specification for the [[Component_Model \| Component Model]].

	=Approach==		=Approach=
	# Capture requirements as [[Component_Model_Use_Cases \| use cases]];		# Capture requirements as [[Component_Model_Use_Cases \| use cases]];
	# Study use cases and extract a set of [[Component_Model#Properties \| desired properties]] for these use cases;		# Study use cases and extract a set of [[Component_Model#Properties \| desired properties]] for these use cases;
Line 8:		Line 8:
	# Iterate until [[#Success_Criteria \| success criteria]] is reached.		# Iterate until [[#Success_Criteria \| success criteria]] is reached.

	=Success criteria==		=Success criteria=
	* The use cases:		* The use cases:
	** reasonably cover a set of component model needs on the Web.		** reasonably cover a set of component model needs on the Web.
Line 18:		Line 18:
	** follow the component model [[#Design_Priniciples \| design principles]].		** follow the component model [[#Design_Priniciples \| design principles]].

	=Design Principles==		=Design Principles=
	* '''Reuse existing mechanisms''' as much as possible, gently extending them if necessary;		* '''Reuse existing mechanisms''' as much as possible, gently extending them if necessary;
	* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;		* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;
	* Encourage '''each building block to stand on its own''' merits.		* Encourage '''each building block to stand on its own''' merits.

Dglazkov: Created page with 'Here are the guidelines for understanding the problem of and developing specification for the Component Model =Approach== # Capture requirements as [[Compo...'

2011-08-23T16:19:44Z

Created page with 'Here are the guidelines for understanding the problem of and developing specification for the Component Model =Approach== # Capture requirements as [[Compo...'

New page

Here are the guidelines for understanding the problem of and developing specification for the [[Component_Model | Component Model]]

=Approach==
# Capture requirements as [[Component_Model_Use_Cases | use cases]];
# Study use cases and extract a set of [[Component_Model#Properties | desired properties]] for these use cases;
# Come with a design that satisfies all desired properties;
# Extrude [[Component_Model#Building_Blocks | building blocks]] out of the design;
# Iterate until [[#Success_Criteria | success criteria]] is reached.

=Success criteria==
* The use cases:
** reasonably cover a set of component model needs on the Web.
* The properties:
** completely describe the set of use cases;
** are orthogonal to each other.
* The building blocks:
** satisfy all desired properties;
** follow the component model [[#Design_Priniciples | design principles]].

=Design Principles==
* '''Reuse existing mechanisms''' as much as possible, gently extending them if necessary;
* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;
* Encourage '''each building block to stand on its own''' merits.

← Older revision		Revision as of 17:35, 23 August 2011
Line 32:		Line 32:
	* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;		* Study popular patterns in existing Web frameworks and '''pave the cowpaths''' when appropriate;
	* Encourage '''each building block to stand on its own''' merits.		* Encourage '''each building block to stand on its own''' merits.

	~~=Implementation Sequence=~~

	Since the component model is composed of several building blocks, it is possible to implement it incrementally, gaining more insight with each step. Here's one possible sequence (tabulated against the [[Component_Model_Use_Cases \| use cases]] and approximate percentage of satisfying them):

	~~{\| cellpadding="10" cellspacing="0" style="border-collapse: collapse;"~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~! align="left" \| Step~~
	~~! align="left" \| [[Component_Model_Use_Cases#Layout_Manager \| Layout Manager]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Widget_Mix-and-Match \| Mix-and-Match]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Rendering_Form_Controls_with_SVG \| SVG Controls]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Contacts_Widget \| Contacts Widget]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Like.2F.2B1_Button \| Like/+1 Button]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Media_Controls_For_The_Video_Element \| Media Controls for the Video Element]]~~
	~~! align="left" \| [[Component_Model_Use_Cases#Details.2FSummary_Elements \| Details/Summary Element]]~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Shadow_DOM \| Shadow DOM]]~~
	~~\| 25%~~
	~~\| -~~
	~~\| 34%~~
	~~\| 100%~~
	~~\| 25%~~
	~~\| 100%~~
	~~\| 50%~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Content_Element \| Content Element]]~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| 50%~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Constructable_DOM_Types \| Constructable DOM Types]]~~
	~~\| 25%~~
	~~\| 50%~~
	~~\| 33%~~
	~~\| -~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Registering_Elements \| Registering Elements]]~~
	~~\| 25%~~
	~~\| 50%~~
	~~\| 33%~~
	~~\| -~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	~~\|- valign="top" style="border-bottom: 1px solid LightGray;"~~
	~~\| [[Component_Model#Confinement_Primitives \| Confinement Primitives]]~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| -~~
	~~\| 25%~~
	~~\| -~~
	~~\| -~~
	\|}