51. Beyond the YUI Team
http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.
52. Beyond the YUI Team
Nicholas
YUI Cookie, YUI Profiler, YUI Test
http://www.flickr.com/photos/scarls13/2104638757/ photo by Steve Carlson; used by kind permission.
71. YUI 3.x
• Lighter
• Faster
• More Consistent
• More Powerful
• More Securable
72. based on YUI 3.0 PR1 2008-09-12 YUI 3.x Architecture (JavaScript)
seed core component framework components
YUI Event Node Widget Drag and Drop Animation IO
Provides foundational plumbing for high-level UI Provides XMLHttpRequest,
components, including lifecycle management. DD Manager Base SWF-based cross-domain
YUI Base Event Base Node Base Builds upon base and is an Attribute provider.
Anim Base requests, and file upload
Minimal YUI Global and core Provides DOM event and Provides abstraction for Provides base DD manager Provides foundational
functionality to make a Node support.
library methods. The only Custom Event functionality, creating and manipulating animation support for
universal YUI 3.x event facade implementation, DOM elements. Can be draggable. animating properties on the
and page-load storyboarding extended by components via style object of an element.
dependency. Base
events. plugin architecture.
Provides base class for all YUI components that DDM Shim
Cookie
provide managed attributes and that serve as Provides cookie management
Extends DD manager to allow Anim Color
event targets. support.
Get elements to be dragged over Extends animation
Provides generic mechanism NodeList iframes and other
for dynamically loading script Dom Extension of Node to handle mousetraps.
functionality to support
animations of color values.
abstraction for element
and CSS resources.
Dom Base collections; used for batching Attribute JSON
Provides low-level DOM DOM manipulations. Provides managed attribute system that can DD Drag
augment any class; includes get/set interface and Provides DD functionality for
Anim Curve Stringify
helper methods.
Loader intrinsic change events. simple drag operations on a
Extends animation Convert JavaScript
Adds dependency calculator functionality to support objects to JSON strings.
Node Style Node.
animations of element
and YUI 3.x package Extended API for
metadata, allowing dynamic Dom Style position along a curved path.
Provides low-level style manipulating style properties
loading of all YUI modules in on Nodes and NodeLists. Plugin DD Drop Parse
single, combo-handled HTTP management methods. Safely convert strings to
Plugin namespace. Forthcoming class will serve Provides drop-target
requests. functionality. Anim Easing JavaScript objects.
as a template for plugin functionality. Plugins can
also operate directly on Nodes. Extends animation
Dom Screen Node Screen functionality to support easing
Provides low-level positioning Extends Node and NodeList
and region management API for positioning and region DD Proxy effects.
methods. management. Provides proxy-drag
functionality.
...and more
More utility (low-level)
Anim Scroll components are provided in
Extends animation the YUI 3.0 preview release 1
Selector DD Constrain functionality to support
Provides low-level methods Provides drag constraint build. Future preview
animations of elements' scroll releases and betas will
for collecting and filtering functionality. positions. include the full component
DOM elements based on
selector syntax. framework and samples of
DD Plugin higher-level components
Provides pluggable drag Anim XY (widgets).
functionality for Node Adds support for the xy
instances. property in from and to
OOP configurations.
OOP Base DD Drop Plugin
Provides low-level object
Provides pluggable drop- Anim Plugin
target functionality for Node Provides pluggable animation
management functionality for
instances. support for Nodes.
JavaScript objects including
extension and augmentation.
The YUI Seed layer can be used YUI's 3.x Core serves as a common dependency layer for most The Component Framework (not yet complete Components in YUI 3.x are provided a la carte and can be highly modular. You can minimize your
o bootstrap any implementation. downstream components. Let the YUI Loader (or Dependency as of PR1) will provide a consistent and inclusion of library code by selecting the specific portions of each component that are required in your
With the seed on the page, Configurator) calculate your true core dependencies, though; in many reusable structure for building low-level utilities implementation.
YUI().use() can bring in all cases, you will not require the full core layer, even if you are using and higher-level UI widgets.
additional components quickly and downstream components.
safely.
73. seed core com
YUI Event Node
Provid
compo
YUI Base Event Base Node Base Builds
Minimal YUI Global and core Provides DOM event and Provides abstraction for
library methods. The only Custom Event functionality, creating and manipulating
universal YUI 3.x event facade implementation, DOM elements. Can be
dependency. and page-load storyboarding extended by components via
events. plugin architecture.
Provid
provide
Get event t
Provides generic mechanism NodeList
for dynamically loading script Dom Extension of Node to handle
and CSS resources. abstraction for element
Dom Base collections; used for batching
Provides low-level DOM DOM manipulations. Provid
helper methods. augme
Loader intrinsi
Adds dependency calculator Node Style
and YUI 3.x package Extended API for
metadata, allowing dynamic Dom Style
Provides low-level style manipulating style properties
loading of all YUI modules in on Nodes and NodeLists.
single, combo-handled HTTP management methods.
Plugin
requests. as a te
Dom Screen Node Screen also op
Provides low-level positioning Extends Node and NodeList
and region management API for positioning and region
methods. management.
Selector
Provides low-level methods
for collecting and filtering
DOM elements based on
74. core component framework
Node Widget Drag and Drop
Provides foundational plumbing for high-level UI
components, including lifecycle management. DD Manager Base
Node Base Builds upon base and is an Attribute provider.
Provides abstraction for Provides base DD manager
creating and manipulating functionality to make a Node
DOM elements. Can be draggable.
extended by components via
plugin architecture.
Base
Provides base class for all YUI components that DDM Shim
provide managed attributes and that serve as Extends DD manager to allow
event targets. elements to be dragged over
NodeList iframes and other
Extension of Node to handle mousetraps.
abstraction for element
collections; used for batching Attribute
DOM manipulations. Provides managed attribute system that can DD Drag
augment any class; includes get/set interface and Provides DD functionality for
intrinsic change events. simple drag operations on a
Node Style Node.
Extended API for
manipulating style properties
on Nodes and NodeLists. Plugin DD Drop
Plugin namespace. Forthcoming class will serve Provides drop-target
as a template for plugin functionality. Plugins can functionality.
Node Screen also operate directly on Nodes.
Extends Node and NodeList
API for positioning and region DD Proxy
management. Provides proxy-drag
functionality.
DD Constrain
Provides drag constraint
functionality.
75. work components
Drag and Drop Animation IO
vel UI Provides XMLHttpRequest,
ent. DD Manager Base SWF-based cross-domain
der.
Anim Base requests, and file upload
Provides base DD manager Provides foundational
functionality to make a Node support.
animation support for
draggable. animating properties on the
style object of an element.
s that DDM Shim
Cookie
as Provides cookie management
Extends DD manager to allow Anim Color support.
elements to be dragged over Extends animation
iframes and other functionality to support
mousetraps. animations of color values.
JSON
an DD Drag
ace and Provides DD functionality for
Anim Curve Stringify
Extends animation Convert JavaScript
simple drag operations on a
functionality to support objects to JSON strings.
Node.
animations of element
position along a curved path.
DD Drop Parse
Provides drop-target Safely convert strings to
l serve
functionality. Anim Easing JavaScript objects.
ins can
Extends animation
functionality to support easing
DD Proxy effects.
Provides proxy-drag
functionality.
...and more
More utility (low-level)
Anim Scroll components are provided in
Extends animation the YUI 3.0 preview release 1
DD Constrain functionality to support
Provides drag constraint build. Future preview
animations of elements' scroll releases and betas will
functionality. positions. include the full component
framework and samples of
123. seed core
YUI Event
YUI Base Event Base
Minimal YUI Global and core Provides DOM event and Pr
library method. The only Custom Event functionality, cre
universal YUI 3.x event facade implementation, DO
dependency. and page-load storyboarding ex
events. plu
Get
Provides generic mechanism
for dynamically loading script Dom Ex
and CSS resources. ab
Dom Base co
Provides low-level DOM DO
helper methods.
Loader
Adds dependency calculator
and YUI 3.x package Ex
metadata, allowing dynamic Dom Style
Provides low-level style ma
loading of all YUI modules in on
single, combo-handled HTTP management methods.
requests.
Dom Screen
Provides low-level positioning Ex
and region management AP
methods. ma
Selector
Provides low-level methods
124. seed core
YUI Event
YUI Base Event Base
Minimal YUI Global and core Provides DOM event and Pr
library method. The only Custom Event functionality, cre
universal YUI 3.x event facade implementation, DO
YUI Base dependency. and page-load storyboarding
events.
ex
plu
Get
Get Utility:
Provides generic mechanism
for dynamically loading script Dom Ex
and CSS resources. ab
Dom Base co
Provides low-level DOM DO
YUI Loader
helper methods.
Loader
Adds dependency calculator
and YUI 3.x package Ex
metadata, allowing dynamic Dom Style
Provides low-level style ma
loading of all YUI modules in on
management methods.
Get Loader 2.x
single, combo-handled HTTP
requests.
Dom Screen
Provides low-level positioning Ex
and region management AP
methods. ma
Selector
Provides low-level methods
136. CSS Selector
YUI 2.x
DOM
var $D = YAHOO.util.Dom; // reference cache
var el = $D.get(‘foo’);
var items = $D.getElementsByClassName(‘highlighted’, ‘li’,
el);
137. CSS Selector
YUI 2.x
DOM
var $D = YAHOO.util.Dom; // reference cache
var el = $D.get(‘foo’);
var items = $D.getElementsByClassName(‘highlighted’, ‘li’,
el);
YUI 3.x
NodeList
var items = Y.all(‘#foo li.highlighted’);
141. CSS Selector
YUI 2.x
DOM
HTMLElement
var $D = YAHOO.util.Dom; // reference cache
var el = $D.get(‘foo’);
alert(el.nodeName); //output: DIV
142. CSS Selector
YUI 2.x
DOM
HTMLElement
var $D = YAHOO.util.Dom; // reference cache
var el = $D.get(‘foo’);
alert(el.nodeName); //output: DIV
YUI 3.x
HTMLElement
var el = Y.get(‘#foo’);
alert(el.nodeName); //output: undefined
alert(el.get(‘nodeName’)); //output: DIVs
159. core component framework
Event Node Widget Drag
Provides foundational plumbing for high-level UI
components, including lifecycle management. DD M
Event Base Node Base Builds upon base and is an Attribute provider.
d core Provides DOM event and Provides abstraction for Provides b
ly Custom Event functionality, creating and manipulating functional
event facade implementation, DOM elements. Can be draggable
and page-load storyboarding extended by components via
events. plugin architecture.
Base
Provides base class for all YUI components that D
provide managed attributes and that serve as Extends D
event targets. elements
anism NodeList iframes an
script Dom Extension of Node to handle mousetrap
abstraction for element
Dom Base collections; used for batching Attribute
Provides low-level DOM DOM manipulations. Provides managed attribute system that can D
helper methods. augment any class; includes get/set interface and Provides D
intrinsic change events. simple dra
ulator Node Style Node.
Dom Style Extended API for
amic manipulating style properties
Provides low-level style
les in
management methods. on Nodes and NodeLists. Plugin D
HTTP Plugin namespace. Forthcoming class will serve Provides d
as a template for plugin functionality. Plugins can functional
Dom Screen Node Screen also operate directly on Nodes.
Provides low-level positioning Extends Node and NodeList
and region management API for positioning and region D
management. Provides p
methods.
functional
Selector DD
Provides low-level methods Provides d
for collecting and filtering functional
DOM elements based on
selector syntax.
D
Provides p
functional
instances
OOP
OOP Base DD D
Provides p
Provides low-level object
target fun
160. core component framework
Event Node Widget Drag
Provides foundational plumbing for high-level UI
components, including lifecycle management. DD M
Event Base Node Base Builds upon base and is an Attribute provider.
d core Provides DOM event and Provides abstraction for Provides b
ly Custom Event functionality, creating and manipulating functional
event facade implementation, DOM elements. Can be draggable
and page-load storyboarding extended by components via
events. plugin architecture.
Base
Provides base class for all YUI components that D
provide managed attributes and that serve as Extends D
Node Base DOM
event targets. elements
anism NodeList iframes an
script Dom Extension of Node to handle mousetrap
abstraction for element
Dom Base collections; used for batching Attribute
Provides low-level DOM DOM manipulations. Provides managed attribute system that can D
NodeList Node
helper methods. augment any class; includes get/set interface and Provides D
intrinsic change events. simple dra
ulator Node Style Node.
Dom Style Extended API for
amic manipulating style properties
Provides low-level style
les in
management methods. on Nodes and NodeLists. Plugin D
NodeStyle
HTTP
Plugin namespace. Forthcoming class will serve Provides d
as a template for plugin functionality. Plugins can functional
Dom Screen Node Screen also operate directly on Nodes.
Provides low-level positioning Extends Node and NodeList
and region management API for positioning and region D
management. Provides p
methods.
functional
Node Screen
Selector
Provides low-level methods
for collecting and filtering
DOM elements based on
XY Region DD
Provides d
functional
selector syntax.
D
Provides p
functional
instances
OOP
OOP Base DD D
Provides p
Provides low-level object
target fun
166. Y.on()
YUI().use(‘node’, function (Y) {
Y.on(‘click’, function (e) {
//
}, ‘#foo’);
});
Node.on()
YUI().use(‘node’, function (Y) {
var el = Y.get(‘#foo’);
el.on(‘click’, function (e) {
//
});
});
186. Event 4
1.
2.
3. Custom Event
4. Custom Event
bubble preventable after
moment
187. seed core com
YUI Event Node
Prov
com
YUI Base Event Base Node Base Buil
Minimal YUI Global and core Provides DOM event and Provides abstraction for
library method. The only Custom Event functionality, creating and manipulating
universal YUI 3.x event facade implementation, DOM elements. Can be
dependency. and page-load storyboarding extended by components via
events. plugin architecture.
Prov
prov
Get even
Provides generic mechanism NodeList
for dynamically loading script Dom Extension of Node to handle
and CSS resources. abstraction for element
Dom Base collections; used for batching
Provides low-level DOM DOM manipulations. Prov
helper methods. aug
Loader intrin
Adds dependency calculator Node Style
and YUI 3.x package Extended API for
metadata, allowing dynamic Dom Style
Provides low-level style manipulating style properties
loading of all YUI modules in on Nodes and NodeLists.
single, combo-handled HTTP management methods.
Plug
requests. as a
Dom Screen Node Screen also
Provides low-level positioning Extends Node and NodeList
and region management API for positioning and region
methods. management.
Selector
Provides low-level methods
for collecting and filtering
188. seed core com
YUI Event Node
Prov
com
YUI Base Event Base Node Base Buil
Minimal YUI Global and core Provides DOM event and Provides abstraction for
DOM events and
library method. The only Custom Event functionality, creating and manipulating
universal YUI 3.x event facade implementation, DOM elements. Can be
dependency. and page-load storyboarding extended by components via
events. plugin architecture.
Prov
prov
Custom Events
Get even
Provides generic mechanism NodeList
for dynamically loading script Dom Extension of Node to handle
and CSS resources. abstraction for element
Dom Base collections; used for batching
Provides low-level DOM DOM manipulations. Prov
helper methods. aug
Loader intrin
Adds dependency calculator Node Style
and YUI 3.x package Extended API for
metadata, allowing dynamic Dom Style
Provides low-level style manipulating style properties
loading of all YUI modules in on Nodes and NodeLists.
single, combo-handled HTTP management methods.
Plug
requests. as a
Dom Screen Node Screen also
Provides low-level positioning Extends Node and NodeList
and region management API for positioning and region
methods. management.
Selector
Provides low-level methods
for collecting and filtering
190. ore component framework
Node Widget Drag and Drop
Provides foundational plumbing for high-level UI
components, including lifecycle management. DD Manager Base
Node Base Builds upon base and is an Attribute provider.
Provides abstraction for Provides base DD manage
creating and manipulating functionality to make a Nod
DOM elements. Can be draggable.
extended by components via
plugin architecture.
Base
Provides base class for all YUI components that DDM Shim
provide managed attributes and that serve as Extends DD manager to al
event targets. elements to be dragged ov
NodeList iframes and other
Extension of Node to handle mousetraps.
abstraction for element
collections; used for batching Attribute
DOM manipulations. Provides managed attribute system that can DD Drag
augment any class; includes get/set interface and Provides DD functionality f
intrinsic change events. simple drag operations on
Node Style Node.
Extended API for
manipulating style properties
on Nodes and NodeLists. Plugin DD Drop
Plugin namespace. Forthcoming class will serve Provides drop-target
as a template for plugin functionality. Plugins can functionality.
Node Screen also operate directly on Nodes.
Extends Node and NodeList
API for positioning and region DD Proxy
management. Provides proxy-drag
functionality.
DD Constrain
Provides drag constraint
functionality.
210. rk components
Drag and Drop Animation IO
I Provides XMLHttpRequest,
DD Manager Base SWF-based cross-domain
Anim Base requests, and file upload
Provides base DD manager Provides foundational
functionality to make a Node support.
animation support for
draggable. animating properties on the
style object of an element.
t DDM Shim
Cookie
Provides cookie management
Extends DD manager to allow Anim Color support.
elements to be dragged over Extends animation
iframes and other functionality to support
mousetraps. animations of color values.
JSON
DD Drag Anim Curve
nd Provides DD functionality for Stringify
Extends animation Convert JavaScript
simple drag operations on a
functionality to support objects to JSON strings.
Node.
animations of element
position along a curved path.
DD Drop Parse
Provides drop-target Safely convert strings to
ve
functionality. Anim Easing JavaScript objects.
an
Extends animation
functionality to support easing
DD Proxy effects.
Provides proxy-drag
functionality.
...and more
More utility (low-level)
Anim Scroll components are provided in
Extends animation the YUI 3.0 preview release 1
DD Constrain functionality to support build. Future preview
211. rk components
Drag and Drop Animation IO
I Provides XMLHttpRequest,
DD Manager Base SWF-based cross-domain
Anim Base requests, and file upload
Provides base DD manager Provides foundational
functionality to make a Node support.
animation support for
Improved granularity
draggable. animating properties on the
style object of an element.
t DDM Shim
Cookie
Provides cookie management
Extends DD manager to allow Anim Color support.
elements to be dragged over Extends animation
iframes and other functionality to support
mousetraps. animations of color values.
JSON
DD Drag Anim Curve
nd Provides DD functionality for Stringify
Extends animation Convert JavaScript
simple drag operations on a
functionality to support objects to JSON strings.
Node.
animations of element
position along a curved path.
DD Drop Parse
Provides drop-target Safely convert strings to
ve
functionality. Anim Easing JavaScript objects.
an
Extends animation
functionality to support easing
DD Proxy effects.
Provides proxy-drag
functionality.
...and more
More utility (low-level)
Anim Scroll components are provided in
Extends animation the YUI 3.0 preview release 1
DD Constrain functionality to support build. Future preview
212. rk components
Drag and Drop Animation IO
I Provides XMLHttpRequest,
DD Manager Base SWF-based cross-domain
Anim Base requests, and file upload
Provides base DD manager Provides foundational
functionality to make a Node support.
animation support for
Improved granularity
draggable. animating properties on the
style object of an element.
t DDM Shim
Cookie
Provides cookie management
Extends DD manager to allow Anim Color support.
Improved performance
elements to be dragged over Extends animation
iframes and other functionality to support
mousetraps. animations of color values.
JSON
DD Drag Anim Curve
nd Provides DD functionality for Stringify
Extends animation Convert JavaScript
simple drag operations on a
functionality to support objects to JSON strings.
Node.
animations of element
position along a curved path.
DD Drop Parse
Provides drop-target Safely convert strings to
ve
functionality. Anim Easing JavaScript objects.
an
Extends animation
functionality to support easing
DD Proxy effects.
Provides proxy-drag
functionality.
...and more
More utility (low-level)
Anim Scroll components are provided in
Extends animation the YUI 3.0 preview release 1
DD Constrain functionality to support build. Future preview
