YUI()

1
YUI()
2
YUI 2s Perfect. What More Could I Want?

• Lighter
• Finer Grained Modules/Sub-Modules
• Emphasis on Code Reuse Common Base, Plugins,
  Extensions
• Easier
• Consistent API
• Base, Selector, Widget, IO/Get/DataSource
• Convenience
• each, bind, nodelist, queue, chainability,
  general sugar
• Faster
• Opportunity to re-factor core performance pain
  points

3
From YAHOO to YUI()
YAHOO
new YAHOO.util.Anim()
var Y YUI()
new Y.Anim()

• Sandboxed App Development
• Your own protected YUI environment
• Ability to reach out to other instances if
  required
• Future Explicit Versioning support

4
Not Only Protected Self-Populating Too

• YUI().use("anim")
• Built-in, Optimal Dependency Loading
• Makes finer grained modules practical
• No more file order concerns
• Self-Healing

5
Enough With The Bullet Points, Show Us Something
With Curly Braces
6
Protected

• So, a user chooses to include your "Stock Tracker
  App" on a portal page...
• ltscript src"http//yui.yahooapis.com/3.4/build/
  yui/yui-min.js"gt
• ltscriptgt
• YUI().use("overlay", function(Y)
• Y.on("click", function()
• new Y.Overlay(...).render()
• , "button")
• )
• lt/scriptgt
• Then they add the "My Favorite Jonas Brother
  App"...
• ltscript src"http//yui.yahooapis.com/3.0/build/
  overlay/overlay-min.js"gt
• ltscriptgt
• YUI().use("overlay", function(Y)
• new Y.Overlay(...).render()
• )

7
Self-Populating
ltscript src"http//yui.yahooapis.com/combo?oop-
min.jsevent-min.js.."gt ltscript
src"oop-min.js"gt ltscript src"event-min.js"gt lts
cript src"attribute-min.js"gt ltscript
src"base-min.js"gt ltscript src"dom-min.js"gt ltscri
pt src"node-min.js"gt ltscript src"anim-min.js"gt

• ltscript src"yui-min.js"gt
• ltscriptgt
• YUI().use("anim", function(Y)
• )
• lt/scriptgt

var a new Y.Anim(...) a.run()
8
Avoiding The Kitchen Sink

• YUI 2
• The foosball table, PS3, relaxation fountain,
  throw pillows, scented candles and the kitchen
  sink
• YUI 3
• The foosball table and the PS3
• The relaxation fountain, throw pillows and the
  scented candles

9
Sub-Modules

• io All IO functionality (7.4K)
• io-base Core XHR functionality (3.3K)
• io-form Form mining support (1K)
• io-queue Transaction Queuing support (0.7K)
• io-upload File upload support (1.7K)
• io-xdr Cross domain support (0.7K)

YUI().use("io-base", function(Y)
) YUI().use("io-xdr", function(Y)
) YUI().use("io", function(Y) )
10
IO K-Weight Breakup
11
Plugins and Extensions

• The Flexibility To Mix and Match Features

Positioning
Adv. Positioning
myOverlay
Shimming/Stacking
Overlay
Header/Body/Footer
Animation
IO Binding
Tooltip
12
Extensions "Class" Based Flexibility
Create An Overlay Class Y.Overlay
Y.Base.build(Y.Widget, Widget-Position,
// Positioning Widget-Position-Ext, // Adv.
Positioning Widget-Stack, //
Shim/Stack Support Widget-StdMod //
Header/Body/Footer )
Instead of Extending Overlay, Reuse Just The
Feature Extensions Tooltip Needs Y.Tooltip
Y.Base.build(Y.Widget, Widget-Position,
// Positioning Widget-Stack //
Shim/Stack Support )
13
Plugins Instance Based Flexibility
Base Overlay instance with IO Support var
ioOverlay new Y.Overlay(...)
ioOverlay.plug(Y.OverlayIOPlugin, url
"http//foo/getData" )
ioOverlay.io.refreshContent() Base Overlay
instance with Animation Support var
animOverlay new Y.Overlay(...)
animOverlay.plug(Y.WidgetAnimPlugin)
animOverlay.show() animOverlay.hide()
14
Custom Events Now With Flavor Crystals!
The Enhanced Custom Event System Is An Integral
Part of YUI 3s Goal To Be Lighter, Allowing For
Highly Decoupled Code

• Event Facades
• Built-in on and after moments
• Default Behavior (preventDefault)
• Event Bubbling (stopPropagation)
• Detach Handles

15
Event Facades
// Dom Event linkNode.on("click", function(e)
if (!e.target.hasClass("selector"))
e.preventDefault() ) // Custom
Event slider.on("valueChange", function(e) if
(e.newVal lt 200) e.preventDefault() )
16
On and After Moments YUI 2
// Publisher show function() if
(this.fire("beforeShow"))
YAHOO.util.Dom.removeClass(node, "hidden")
... this.fire("show") //
Subscriber overlay.subscribe("beforeShow",
function(t, args) if (!taskSelected)
return false overlay.subscribe("show",
function(t, args) ...)
17
On and After Moments YUI 3
// Publisher show function()
this.fire("show") , _defShowFn function(e)
node.removeClass("hidden") ... //
Subscriber overlay.on("show", function(e) if
(!taskSelected) e.preventDefault()
overlay.after("show", function(e) ...)
18
Notification Flow On/After/Default
this.fire("select")
ON
ON
e.stopImmediatePropagation()
e.preventDefault()
Default Behavior
After
e.preventDefault()
e.stopImmediatePropagation()
After
After
19
Bubbling Delegation Beyond the DOM
Menu.prototype addItem
function(menuItem) var menu this
... menuItem.addTarget(menu) ,
initializer function()
this.on("menuitemselect", this._itemSelect)
menu.getItem(2).on("select", function(e)
// Handle select for item 2, dont bubble to
Menu e.stopPropagation() ...
20
Notification Flow Bubbling
this.fire("menuitemselect")
Menu
MenuItem
ON
ON
ON
e.stopPropagation()
Def. Behavior
Def. Behavior
After
After
After
After
After
21
Detaching Listeners
// YUI 2 overlay.on("show", myShowHandler, myApp,
true) overlay.unsubscribe("show", myShowHandler,
myApp)
// YUI 3 var handle overlay.on("show",
myShowHandler, myApp, true) handle.detach() //
Or overlay.on("myappshow", myShowHandler, myApp,
true) overlay.on("myapphide", myHideHandler,
myApp, true) overlay.detach("myappshow") overl
ay.detach("myapp")
22
Node An HTML Element Kwik-E Mart
A single convenient location for working with
HTML Elements

• Supports
• Normalizes
• Enhances
• Extendable
• Constrainable

23
Working with HTML Elements YUI 2

• var elms YAHOO.util.Dom.getElementsByClassName(
• "task", "li", "actions")
• for (var i 0 i lt elms.length i)
• var elm elmsi
• if (YAHOO.util.Dom.hasClass(elm, "selectable"))
• YAHOO.util.Dom.addClass(elm, "current")
• YAHOO.util.Event.on(elm, "click", handler)

24
Working with HTML Elements YUI 3

• var elm Y.Node.get(".actions li.task.selected")
  
• elm.addClass("current")
• elm.on("click", handler)

Y.Node.get().addClass("current").on("click",handl
er)
25
Supports the HTMLElement API

• node.appendChild(aNode)
• node.cloneNode(aNode)
• node.scrollIntoView()
• node.get("parentNode")
• node.set("innerHTML","Foo")

26
Normalizes the HTMLElement API

• node.getAttribute("href")
• node.contains(aNode)
• node.getText()
• node.getStyle("paddingTop")
• node.previous()

27
Enhances The HTMLElement API

• node.addClass("selectable")
• node.toggleClass("enabled")
• node.getXY()
• node.get("region")

28
With State Change Events (wip)

• node.on("srcChange", function(e)
• if (!isRelative(e.newVal))
• e.preventDefault()
• )
• node.after("innerHTMLChange", reflow)

29
Extendable

• Plugins can provide app specific features
• node.plug(IOPlugin)
• node.io.getContent("http//foo/bar")
• node.plug(DragDropPlugin)
• node.dd.set("handle", ".title")

30
Constrainable
Node is the single point for DOM
access, throughout YUI 3
Makes YUI 3 ideal as a trusted source in
"constrained" environments such as Caja and
Ad-Safe
31
NodeList Bulk Node Operations
Used to Batch Node operations
var items Y.Node.all(".actions
li") items.addClass("disabled") items.set("title
", "Item Disabled") items.each(function(node)
node.addClass("disabled)
node.set("title", "Item Disabled") )
The Costco to Nodes Kwik-E Mart
32
Core Language Conveniences

• Array Extras
• isString, isNumber
• Bind
• Each
• Later
• OOP
• Augment, Extend, Aggregate, Merge, Clone
• AOP
• Before/After For Methods

33
A Common Component Foundation

• Y.Attribute
• Managed Attribute Support
• Configurable Attributes
• readOnly, writeOnce
• validators, getters and setters
• Attribute Value Change Events
• on/after
• Complex Attribute Support
• set("strings.label_enabled", "Enabled")

34
A Common Component Foundation

• Y.Base
• "this.constructor.superestclass"
• The Class From Which YUI 3 Classes Will Be
  Derived
• Combines Custom Event And Attribute Support
• Manages the "init" and "destroy" Lifecycle
  Moments
• Provides Plugin/Extension Management

35
A Common Component Foundation

• Y.Widget
• A Common Widget API
• The Base Implementation For All Widgets
• Introduces Common Attributes, Methods
• boundingBox, contentBox
• width, height
• visible, disabled, hasFocus
• strings
• show(), hide(), focus(), blur(), enable(),
  disable()
• Manages The "render" Lifecycle Moment
• Establishes A Common Pattern For Widget
  Development

36
Phew!

• Satyen Desai
• sdesai_at_yahoo-inc.com
• _at_dezziness
• Read, http//developer.yahoo.com/yui/3
• Discuss, http//yuilibrary.com/forum/viewforum.php
  ?f15
• Or, just jump in headfirst
• http//github.com/yui/yui3/tree/master

37
Image Attribution

• Sink
• http//www.flickr.com/photos/shazbot/1639273/
• Slushy http//www.flickr.com/photos/yaffamedia/70
  5369091/
• Toothpaste http//www.flickr.com/photos/toasty/41
  2580888/