A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Component Model Use Cases: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
No edit summary
 
(37 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Uses cases that represents the set of problems we are trying to solve by implementing a component model for the web. For implementation details, see [http://dev.w3.org/2006/xbl2/Overview.html XBL2 Spec].
{{obsolete|see=http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases}}


This document is broken out into two sections: '''general use cases''' provide insight into how the component model could be used; '''specific constraints''' are interesting scenarios within the general use cases that should be treated as constraints/requirements, imposed on the specification/implementation of the component model.
These use cases represent a set of problems we are trying to solve by implementing a [[Component_Model | component model]] for the web.  


=General Use Cases=
=Custom Controls=
 
==Custom Controls==


Current practice for sizable web applications is to use JavaScript libraries to provide a system to support the construction of custom controls. Implementing these controls can be made simpler and more interoperable with runtime support.
Current practice for sizable web applications is to use JavaScript libraries to provide a system to support the construction of custom controls. Implementing these controls can be made simpler and more interoperable with runtime support.


The lifecycle of these components may differ, with some being bootstrapped from in-page markup (aka, the "decoration" pattern), whereas many use programmatic instantiation, but the former can be easily considered a superset of the latter (see "Declarative Composition" below).
==Layout Manager==
 
The actions components support are:
 
* construction of the component
* configuration, often through arguments to the constructor
* view generation and configuration
* addition of the component to the visible DOM of the document
* enumeration/configuration post-insertion
 
===Composable Layout Manager===


{| cellpadding="8" cellspacing="0"
{| cellpadding="8" cellspacing="0"
|+ style="color:Gray" | Composability Use Case Parameters
|+style="caption-side:top; text-align: left; color:Gray" | Layout Manager Use Case Parameters
! align="right" valign="top" | Who
! align="right" valign="top" | Who
| Javascript Framework Engineer
| Web Framework Engineer
|-
|-
! align="right" valign="top" | What
! align="right" valign="top" | What
Line 32: Line 20:
|
|
* Allow web application developers to easily build constrained layout and populate it with arbitrary HTML content.
* Allow web application developers to easily build constrained layout and populate it with arbitrary HTML content.
* Provide a way for developers to build their own layout primitives by extending provided primitives.
* Provide a way for developers to build their own layout primitives by extending the provided ones.
|-
|-
! align="right" valign="top" | Examples
! align="right" valign="top" | Examples
Line 39: Line 27:
* [http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html GWT Panels]
* [http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html GWT Panels]
* [http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.panel.AbstractPanel Sencha Panels]
* [http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.panel.AbstractPanel Sencha Panels]
* [http://guides.sproutcore.com/views.html Views]
* [http://guides.sproutcore.com/views.html SproutCore Views]
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Composability | Composability]] -- a method to compose layouts with both UI primitives and DOM elements.
* [[Component_Model#Extensibility | Extensibility]] -- a way to build on layout primitives to create new ones.
* [[Component_Model#Encapsulation | Encapsulation]] -- styles, defined to hold layout in place should not be in danger of being stomped on by the author stylesheets.
* [[Component_Model#Performance | Performance]] -- layouts built with layout manager should appear quickly, avoiding re-flows and [http://en.wikipedia.org/wiki/Flash_of_unstyled_content FOUC]-like symptoms.
|}
 
==Widget Mix-and-Match==
 
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | Mix-and-matching Use Case Parameters
! align="right" valign="top" | Who
| Web Application Engineer
|-
! align="right" valign="top" | What
| Build an application using multiple existing controls from several frameworks.
|-
! align="right" valign="top" | Purpose
|
* Write application faster by reusing code.
* Avoid having to exclusively go with one framework.
|-
! align="right" valign="top" | Examples
|
* [http://stackoverflow.com/questions/4534274/how-do-you-access-dijit-elements-in-jquery How do you access Dijit elements in JQuery]
* [http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/ Using SproutCore 2.0 with jQuery UI]
* [http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs Which JavaScript framework (jQuery vs Dojo vs … )?]
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Consistency | Consistency]] -- a compatible way to expose properties and methods across widget frameworks.
* [[Component_Model#Composability | Composability]] -- a method to compose with cross-framework widgets.
|}
 
==Rendering Form Controls with SVG==
 
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | SVG Form Controls Use Case Parameters
! align="right" valign="top" | Who
| Web Application Engineer or Web Framework Engineer
|-
! align="right" valign="top" | What
| Create a set of UI controls that act like standard HTML forms controls, but use SVG for rendering.
|-
! align="right" valign="top" | Purpose
|
* Provide custom appearance of form controls, consistent with overall the Web application theme.
* Make the form controls scale beautifully for various resolutions and form factors.
|-
! align="right" valign="top" | Examples
|
[http://docs.sproutcore.com/#doc=SC.ImageButtonView&src=false SproutCore's ImageButtonView], [http://dev.sencha.com/deploy/touch/docs/?class=Ext.form.Number Sencha's Number] -- examples of extensive themed form control hierarchy.
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Consistency | Consistency]] -- the controls should act just like any other DOM elements.
* [[Component_Model#Encapsulation | Encapsulation]] -- the document shouldn't be able to accidentally mess up the rendering of the controls.
* [[Component_Model#Performance | Performance]] -- load quickly, avoid [http://en.wikipedia.org/wiki/Flash_of_unstyled_content FOUC]-like symptoms when using controls.
|}
 
==Contacts Widget==
 
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | Contacts Widget Use Case Parameters
! align="right" valign="top" | Who
| Web Application Engineer
|-
! align="right" valign="top" | What
| Build a drop-in Contacts widget, which has a pre-defined appearance and shows a list of your contacts, with a way to change the widget to compact or full view and to tell the widget to refresh its state.
|-
! align="right" valign="top" | Purpose
|
* Use the widget anywhere in the application without having to worry about styles affecting its appearance.
* Hide details of loading contact data and other plumbing of the widget from the consuming code with a stable API.
|-
! align="right" valign="top" | Examples
| [http://i.imgur.com/4eDXM.png A screenshot of Google+ "in your circles" widget]
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Encapsulation | Encapsulation]] -- means to ensure style of the document does not affect the widget, and widget's logic is kept to the widget.
* [[Component_Model#Composability | Composability]] -- easily added anywhere in the DOM tree.
|}
 
==Like/+1 Button==
 
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | Like/+1 Button Use Case Parameters
! align="right" valign="top" | Who
| Web Application Engineer
|-
! align="right" valign="top" | What
| Build a drop-in widget with a pre-defined appearance of a button, showing a count of likes/+1s for this instance of a button (count is stored at a central location), embeddable on any document on the Web.
|-
! align="right" valign="top" | Purpose
|
* Provide a simple vehicle for Web authors to embed the button.
* Isolate widget implementation details from the document.
|-
! align="right" valign="top" | Examples
|
* [http://developers.facebook.com/docs/reference/plugins/like/ Facebook Like button embedding instructions]
* [http://www.google.com/webmasters/+1/button/ Google +1 button embedding instructions]
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Encapsulation | Encapsulation]] -- means to ensure style of the document does not affect the widget, and widget's logic is kept to the widget.
* [[Component_Model#Confinement | Confinement]] -- a way to completely isolate the widget implementation from the document in which it is being embedded.
* [[Component_Model#Performance | Performance]] -- don't block the page load.
|}
 
==Table-based Charts==
 
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | Table-based Charts Use Case Parameters
! align="right" valign="top" | Who
| Web Framework Engineer
|-
! align="right" valign="top" | What
| Provide a way to represent table data markup as charts or diagrams.
|-
! align="right" valign="top" | Purpose
| Make it easy for Web authors to create charts and diagrams using table markup.
|-
! align="right" valign="top" | Examples
|
* [http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/ Christian Heilmann's tochart script]
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Composability | Composability]] -- one should be able to make chart by creating a table, imperatively or declaratively.
* [[Component_Model#Performance | Performance]] -- no FOUC or blocking load when charts are loaded.
|}
 
==Timezone selection via Image==
 
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | Timezone selection via Image Use Case Parameters
! align="right" valign="top" | Who
| Web Framework Engineer
|-
! align="right" valign="top" | What
| Graphical representation of a timezone selector that shows a world map in addition to/instead of a drop-down list.
|-
! align="right" valign="top" | Purpose
| Make it easy for Web authors to spruce up time zone selection (or similar).
|-
! align="right" valign="top" | Examples
|
* [http://www.timezonecheck.com Time Zone Map]
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Extensibility | Extensibility]] -- Basically extending <select>. Should fall back to a simple <select> where components are not supported.
* [[Component_Model#Consistency | Consistency]] -- Extend the <select> API for item selection.
|}
|}


==Declarative Composition of Custom Controls with "Native" HTML Controls==
==Entry-helper==


Custom controls should be able to be declared the same way HTML elements are, using markup for demarking their location in the generated DOM, attributes for configuration and property setting, and lightweight type conversion based on attribute type. The lifecycle of markup-declared controls must be able, therefore, to host non-custom controls as children (optionally), and must participate in the DOM and layout hierarchies naturally. Existing JS-based component systems generally preserve these properties to varying degrees.
{| cellpadding="8" cellspacing="0"
|+ style="caption-side:top; text-align: left; color:Gray" | Entry-helper Use Case Parameters
! align="right" valign="top" | Who
| Web Framework Engineer, Web Application Engineer
|-
! align="right" valign="top" | What
| Add an entry-helper (drop-down) list to input fields.
|-
! align="right" valign="top" | Purpose
|
Help the user fill in a form field, show suggestions and acceptable values, speed up data entry.
|-
! align="right" valign="top" | Examples
|
* Most browser's address bar or web search field
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Extensibility | Extensibility]] -- Basically extending <input>. Should fall back to a simple <input> where components are not supported.
|}


==Implementing Built-in HTML Elements==
=Built-in HTML Elements=


Many non-trivial (i.e. with additional behavior and styling beyond the standard box model) elements that exist in HTML today could be implemented using HTML/CSS/JS. It makes sense to provide a standardized way to accomplish this, with the short-term goals of reducing the size of browsers C++ code and making new element implementation easier, and the long-term goal of converging built-in HTML element implementations across browsers.
Many non-trivial (i.e. with additional behavior and styling beyond the standard box model) elements that exist in HTML today could be implemented using HTML/CSS/JS. It makes sense to provide a standardized way to accomplish this, with the short-term goals of reducing the size of browsers C++ code and making new element implementation easier, and the long-term goal of converging built-in HTML element implementations across browsers.


{| cellpadding="8" cellspacing="0"
{| cellpadding="8" cellspacing="0"
|+ style="color:Gray" | Built-in HTML Elements Use Cases Parameters
|+ style="caption-side:top; text-align: left; color:Gray" | Built-in HTML Elements Use Case Parameters
! align="right" valign="top" | Who
! align="right" valign="top" | Who
| Browser Engineer
| Browser Engineer
Line 60: Line 224:
! align="right" valign="top" | Purpose
! align="right" valign="top" | Purpose
|
|
* Reduce amount of custom UI code (fewer bugs, less code rot, leading to fewer future bugs)
* Reduce amount of custom UI code (fewer bugs, less code rot, leading to fewer future bugs).
* Remove magic: make it easier for authors to grok control behavior in familiar terms, allow authors to style controls using CSS.
* Remove magic: make it easier for authors to grok control behavior in familiar terms, allow authors to style controls using CSS.
* ''Stretch'': specify built-in element behavior in terms of the component model specification.
* ''Stretch'': specify built-in element behavior in terms of the component model specification.
|-
! align="right" valign="top" | Desirable Properties
|
* [[Component_Model#Encapsulation | Encapsulation]] -- ensure that implementation details are not exposed to the document
* [[Component_Model#Desugaring | Desugaring]] -- explain appearance and behavior of controls in terms of CSS/DOM.
|}
|}


===Media Controls For The Video Element===
==Media Controls For The Video Element==
 
Using DOM elements, build a media controls panel for the [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element video element]. The media controls include:
Using DOM elements, build a media controls panel for the [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element video element]. The media controls include:
* timeline slider
* timeline slider
Line 73: Line 243:
The implementation details of the media controls should not be accessible or perceptible from outside of the video element. Document styles should not interfere with the styles of the media controls panel. However, we must provide a way for an author to explicitly style all parts of the media controls panel.
The implementation details of the media controls should not be accessible or perceptible from outside of the video element. Document styles should not interfere with the styles of the media controls panel. However, we must provide a way for an author to explicitly style all parts of the media controls panel.


===Details/Summary Elements===
==Details/Summary Elements==
Implement [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element details] and [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element summary] elements. Per spec, first <code>summary</code> element found in the flow content is used to represent a summary or legend of details, or some fallback content if a <code>summary</code> element is not found. The <code>summary</code> element itself needs to have a marker indicating whether <code>summary</code> element is open or closed.
 
Implement [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element details] and [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element summary] elements. According to the spec, the first <code>summary</code> element found in the flow content is used to represent a summary or legend of details. In case a <code>summary</code> element is not found, the UA is supposed to auto-generate some fallback content. The <code>details</code> element itself needs to have a marker indicating whether <code>details</code> element is open or closed - i.e., whether all contents of <details> are shown, or only the summary.


Just like media controls, the implementation should not be accessible by the consumer of the elements. For example, the reordering of flow content to position <code>summary</code> element as first item in the disclosure widget should be imperceptible to DOM traversal methods.
Just like media controls, the implementation should not be accessible by the consumer of the elements. For example, the reordering of flow content to position <code>summary</code> element as first item in the disclosure widget should be imperceptible to DOM traversal methods.
=Desirable Properties=
The above use-cases are derived from explicit real-world goals which are being met, when they can be, through large piles of custom, non-interoperable JavaScript code. Further, we can see in these use-cases the desire to be "first class" when extending HTML/DOM. We see the following properties as desirable, motivated by the above use-cases:
* '''No special forms'''. The ability of custom element types to exist along side existing element types should not come with the burden to use special forms to declare or construct these element types. They must not be "hacked in" to the API, rather, the existing APIs should change or be extended to accommodate custom variants.
* '''Just DOM'''. The "no special forms" goal leads us directly to suggest that any solution should simply be a first-class extension to HTML DOM, not a bolt-on or addition of a separate document type.
* '''De-sugaring'''. To the extent possible, providing support for the above use-cases should happen in a way that leans on as few primitives as possible, with both custom components and built-ins being described with the same pseudo-code and lifecycle, even if the implementations differ wildly
* '''Runtime support'''. Interoperability of components should be provided through common plumbing to support the goals of construction, discovery, lifecycle management, etc.
* '''High-level, but layered'''. Runtime support should provide both the high-level ability to use and declare components in markup but also provide pluggability and desugaring so as to allow sophisticated authors to over-ride any described part of the component lifecycle with their own implementations.
[[Category:Proposals]]

Latest revision as of 15:46, 10 November 2012

This document is obsolete.

For more information, see: http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases


These use cases represent a set of problems we are trying to solve by implementing a component model for the web.

Custom Controls

Current practice for sizable web applications is to use JavaScript libraries to provide a system to support the construction of custom controls. Implementing these controls can be made simpler and more interoperable with runtime support.

Layout Manager

Layout Manager Use Case Parameters
Who Web Framework Engineer
What Build a layout library, consisting of a UI layout primitives, such as panel, resizeable panel, tab group, stack, accordion containers, etc.
Purpose
  • Allow web application developers to easily build constrained layout and populate it with arbitrary HTML content.
  • Provide a way for developers to build their own layout primitives by extending the provided ones.
Examples
Desirable Properties
  • Composability -- a method to compose layouts with both UI primitives and DOM elements.
  • Extensibility -- a way to build on layout primitives to create new ones.
  • Encapsulation -- styles, defined to hold layout in place should not be in danger of being stomped on by the author stylesheets.
  • Performance -- layouts built with layout manager should appear quickly, avoiding re-flows and FOUC-like symptoms.

Widget Mix-and-Match

Mix-and-matching Use Case Parameters
Who Web Application Engineer
What Build an application using multiple existing controls from several frameworks.
Purpose
  • Write application faster by reusing code.
  • Avoid having to exclusively go with one framework.
Examples
Desirable Properties
  • Consistency -- a compatible way to expose properties and methods across widget frameworks.
  • Composability -- a method to compose with cross-framework widgets.

Rendering Form Controls with SVG

SVG Form Controls Use Case Parameters
Who Web Application Engineer or Web Framework Engineer
What Create a set of UI controls that act like standard HTML forms controls, but use SVG for rendering.
Purpose
  • Provide custom appearance of form controls, consistent with overall the Web application theme.
  • Make the form controls scale beautifully for various resolutions and form factors.
Examples

SproutCore's ImageButtonView, Sencha's Number -- examples of extensive themed form control hierarchy.

Desirable Properties
  • Consistency -- the controls should act just like any other DOM elements.
  • Encapsulation -- the document shouldn't be able to accidentally mess up the rendering of the controls.
  • Performance -- load quickly, avoid FOUC-like symptoms when using controls.

Contacts Widget

Contacts Widget Use Case Parameters
Who Web Application Engineer
What Build a drop-in Contacts widget, which has a pre-defined appearance and shows a list of your contacts, with a way to change the widget to compact or full view and to tell the widget to refresh its state.
Purpose
  • Use the widget anywhere in the application without having to worry about styles affecting its appearance.
  • Hide details of loading contact data and other plumbing of the widget from the consuming code with a stable API.
Examples A screenshot of Google+ "in your circles" widget
Desirable Properties
  • Encapsulation -- means to ensure style of the document does not affect the widget, and widget's logic is kept to the widget.
  • Composability -- easily added anywhere in the DOM tree.

Like/+1 Button

Like/+1 Button Use Case Parameters
Who Web Application Engineer
What Build a drop-in widget with a pre-defined appearance of a button, showing a count of likes/+1s for this instance of a button (count is stored at a central location), embeddable on any document on the Web.
Purpose
  • Provide a simple vehicle for Web authors to embed the button.
  • Isolate widget implementation details from the document.
Examples
Desirable Properties
  • Encapsulation -- means to ensure style of the document does not affect the widget, and widget's logic is kept to the widget.
  • Confinement -- a way to completely isolate the widget implementation from the document in which it is being embedded.
  • Performance -- don't block the page load.

Table-based Charts

Table-based Charts Use Case Parameters
Who Web Framework Engineer
What Provide a way to represent table data markup as charts or diagrams.
Purpose Make it easy for Web authors to create charts and diagrams using table markup.
Examples
Desirable Properties
  • Composability -- one should be able to make chart by creating a table, imperatively or declaratively.
  • Performance -- no FOUC or blocking load when charts are loaded.

Timezone selection via Image

Timezone selection via Image Use Case Parameters
Who Web Framework Engineer
What Graphical representation of a timezone selector that shows a world map in addition to/instead of a drop-down list.
Purpose Make it easy for Web authors to spruce up time zone selection (or similar).
Examples
Desirable Properties
  • Extensibility -- Basically extending <select>. Should fall back to a simple <select> where components are not supported.
  • Consistency -- Extend the <select> API for item selection.

Entry-helper

Entry-helper Use Case Parameters
Who Web Framework Engineer, Web Application Engineer
What Add an entry-helper (drop-down) list to input fields.
Purpose

Help the user fill in a form field, show suggestions and acceptable values, speed up data entry.

Examples
  • Most browser's address bar or web search field
Desirable Properties
  • Extensibility -- Basically extending <input>. Should fall back to a simple <input> where components are not supported.

Built-in HTML Elements

Many non-trivial (i.e. with additional behavior and styling beyond the standard box model) elements that exist in HTML today could be implemented using HTML/CSS/JS. It makes sense to provide a standardized way to accomplish this, with the short-term goals of reducing the size of browsers C++ code and making new element implementation easier, and the long-term goal of converging built-in HTML element implementations across browsers.

Built-in HTML Elements Use Case Parameters
Who Browser Engineer
What Implement a built-in HTML element by composing or extending existing HTML elements
Purpose
  • Reduce amount of custom UI code (fewer bugs, less code rot, leading to fewer future bugs).
  • Remove magic: make it easier for authors to grok control behavior in familiar terms, allow authors to style controls using CSS.
  • Stretch: specify built-in element behavior in terms of the component model specification.
Desirable Properties
  • Encapsulation -- ensure that implementation details are not exposed to the document
  • Desugaring -- explain appearance and behavior of controls in terms of CSS/DOM.

Media Controls For The Video Element

Using DOM elements, build a media controls panel for the video element. The media controls include:

  • timeline slider
  • stop/start, replay, closed-captioning, forward, rewind and volume buttons, and
  • a volume control, which is revealed when hovering over the volume button.

The implementation details of the media controls should not be accessible or perceptible from outside of the video element. Document styles should not interfere with the styles of the media controls panel. However, we must provide a way for an author to explicitly style all parts of the media controls panel.

Details/Summary Elements

Implement details and summary elements. According to the spec, the first summary element found in the flow content is used to represent a summary or legend of details. In case a summary element is not found, the UA is supposed to auto-generate some fallback content. The details element itself needs to have a marker indicating whether details element is open or closed - i.e., whether all contents of <details> are shown, or only the summary.

Just like media controls, the implementation should not be accessible by the consumer of the elements. For example, the reordering of flow content to position summary element as first item in the disclosure widget should be imperceptible to DOM traversal methods.