3
           YUI
      http://developer.yahoo.com/yui/3
             http://github.com/yui/yui3


http://github.com/davgla...
YUI.use('lighter', function(Y) {
	   Y.all('.faster li').each(function(v) {
	   	    v.set('innerHTML', 'easier');
	   });...
Lighter


        Don't load what you don't need
    

        Don't write code more than once, use it again
    




 ...
Why the change?
What our users asked for:

    • Selectors
    • Chaining
    • Consistancy
    • Sandboxing
    • Better ...
Protected Code

<script src=quot;/3.4/build/yui/yui-min.jsquot;>
<script>
    YUI().use(quot;overlayquot;, function(Y) {
 ...
Protected Code

<script src=quot;/3.2/build/overlay/overlay-min.jsquot;>
<script>
    YUI().use(quot;overlayquot;, functio...
Self Populating


<script src=quot;yui-min.jsquot;>
<script>
    YUI().use(quot;animquot;, function(Y) {



    });
</scri...
Self Populating

<script    src=quot;yui-min.jsquot;>
<script    src=quot;oop-min.jsquot;>
<script    src=quot;event-min.j...
Self Populating

<script src=quot;yui-min.jsquot;>
<script src=quot;http://yui.yahooapis.com/combo?oop-min.js&event-min.js...
Event
The Enhanced Custom Event System Is An
Integral Part of YUI 3’s Goal To Be Lighter,
Allowing For Highly Decoupled Co...
Event
// Dom Event
YAHOO.util.Event.on(quot;clickquot;, function(e) {
     YAHOO.util.Event.preventDefault(e);
});

// Dom...
Event Facade
// Dom Event
linkNode.on(quot;clickquot;, function(e) {
  if (!e.target.hasClass(quot;selectorquot;)) {
    e...
Event Bubbling
var dd = new Y.DD.Drag({ node: '#drag' });

//Listen at a higher level
Y.DD.DDM.on('drag:drag', function(e)...
Event
// Publisher
show : function() {
   this.fire(quot;showquot;);
},

_defShowFn : function(e) {
   node.removeClass(qu...
Node

A single convenient location for working with
HTML Elements
     SelectorBased
     Supports
     Normalizes
    ...
Node

Working with Node:
Y.get('#foo').addClass('selected').
   set('innerHTML', 'Here');
var foo = Y.get('#foo');
foo.on(...
Node

Supports the HTMLElement API
 node.appendChild(aNode)
 node.cloneNode(aNode)
 node.scrollIntoView()
 node.get(quot;p...
Node

Normalizes the HTMLElement API
 node.getAttribute(quot;hrefquot;)
 node.contains(aNode)
 node.getText()
 node.getSty...
Node

Enhances The HTMLElement API
 node.addClass(quot;selectablequot;)
 node.toggleClass(quot;enabledquot;)
 node.getXY()...
Node

Extendable
Plugins can provide app specific features…

  node.plug(IOPlugin);
  node.io.getContent(quot;http://foo/b...
Node

Constrainable
 Node is the single point for DOM access,
 throughout YUI 3
Makes YUI 3 ideal as a trusted source in
q...
NodeList

Used to Batch Node operations
 var items = Y.Node.all(quot;.actions liquot;);
 items.addClass(quot;disabledquot;...
Core Language Addons

    Array Extras

    isString, isNumber …

    Bind

    Each

    Later

    OOP

        Au...
A Common Foundation

Y.Attribute
    Configurable Attributes

         readOnly, writeOnce
     

         validators, g...
A Common Foundation

Y.Base
    The Class From Which YUI 3 Classes Will Be Derived


    Combines Custom Event And Attrib...
A Common Foundation

Y.Widget
    The Base Implementation For All Widgets


    Introduces Common Attributes, Methods

 ...
Code...




 Finally, let's see some code..




              27
3
           YUI
      http://developer.yahoo.com/yui/3
             http://github.com/yui/yui3


http://github.com/davgla...
Upcoming SlideShare
Loading in …5
×

YUI 3

7,062 views

Published on

These are the slides from my YUI3 presentation at Open Hack Day in London.

Code demo can be found here:
http://blog.davglass.com/files/openhackday/openhackday/code/photos/

Published in: Education, Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,062
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
122
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
























































  • YUI 3

    1. 1. 3 YUI http://developer.yahoo.com/yui/3 http://github.com/yui/yui3 http://github.com/davglass/openhackday http://blog.davglass.com @davglass
    2. 2. YUI.use('lighter', function(Y) { Y.all('.faster li').each(function(v) { v.set('innerHTML', 'easier'); }); }); 2
    3. 3. Lighter  Don't load what you don't need  Don't write code more than once, use it again  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
    4. 4. Why the change? What our users asked for: • Selectors • Chaining • Consistancy • Sandboxing • Better Dependency Handling • Versioning 4
    5. 5. Protected Code <script src=quot;/3.4/build/yui/yui-min.jsquot;> <script> YUI().use(quot;overlayquot;, function(Y) { Y.on(quot;clickquot;, function(){ new Y.Overlay({...}).render(); }, quot;#buttonquot;); }); </script> 5
    6. 6. Protected Code <script src=quot;/3.2/build/overlay/overlay-min.jsquot;> <script> YUI().use(quot;overlayquot;, function(Y) { Y.on(quot;clickquot;, function(){ new Y.Overlay({...}).render(); }, quot;#button2quot;); }); </script> 6
    7. 7. Self Populating <script src=quot;yui-min.jsquot;> <script> YUI().use(quot;animquot;, function(Y) { }); </script> 7
    8. 8. Self Populating <script src=quot;yui-min.jsquot;> <script src=quot;oop-min.jsquot;> <script src=quot;event-min.jsquot;> <script src=quot;attribute-min.jsquot;> <script src=quot;base-min.jsquot;> <script src=quot;dom-min.jsquot;> <script src=quot;node-min.jsquot;> <script src=quot;anim-min.jsquot;> <script> YUI().use(quot;animquot;, function(Y) { }); </script> 8
    9. 9. Self Populating <script src=quot;yui-min.jsquot;> <script src=quot;http://yui.yahooapis.com/combo?oop-min.js&event-min.js..quot;> <script> YUI().use(quot;animquot;, function(Y) { }); </script> 9
    10. 10. Event The Enhanced Custom Event System Is An Integral Part of YUI 3’s 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  10
    11. 11. Event // Dom Event YAHOO.util.Event.on(quot;clickquot;, function(e) { YAHOO.util.Event.preventDefault(e); }); // Dom Event YAHOO.util.Event.on(quot;mousemovequot;, function(e) { YAHOO.util.Event.getPageX(e); }); // Custom Event slider.on(quot;valueChangequot;, function(e) { if (someVal < 200) { return false; } }); 11
    12. 12. Event Facade // Dom Event linkNode.on(quot;clickquot;, function(e) { if (!e.target.hasClass(quot;selectorquot;)) { e.preventDefault(); } var x = e.pageX; }); // Custom Event slider.on(quot;valueChangequot;, function(e) { if (e.newVal < 200) { e.preventDefault(); } }); 12
    13. 13. Event Bubbling var dd = new Y.DD.Drag({ node: '#drag' }); //Listen at a higher level Y.DD.DDM.on('drag:drag', function(e) { if (tooFar) { e.preventDefault(); } }); //Set opacity on all drag objects Y.DD.DDM.on('drag:start', function(e) { var dds = Y.all('.yui-dd-draggable'). setStyle('opacity', '.5'); }); 13
    14. 14. Event // Publisher show : function() { this.fire(quot;showquot;); }, _defShowFn : function(e) { node.removeClass(quot;hiddenquot;); ... } // Subscriber overlay.on(quot;showquot;, function(e) { if (!taskSelected) { e.preventDefault(); } } overlay.after(quot;showquot;, function(e) {...}); 14
    15. 15. Node A single convenient location for working with HTML Elements  SelectorBased  Supports  Normalizes  Enhances  Extendable  Constrainable 15
    16. 16. Node Working with Node: Y.get('#foo').addClass('selected'). set('innerHTML', 'Here'); var foo = Y.get('#foo'); foo.on('click', function() { ... }); foo.addClass('selected'); foo.getXY(); foo.setStyle('backgroundColor', 'red'); 16
    17. 17. Node Supports the HTMLElement API node.appendChild(aNode) node.cloneNode(aNode) node.scrollIntoView() node.get(quot;parentNodequot;) node.set(quot;innerHTMLquot;,quot;Fooquot;) 17
    18. 18. Node Normalizes the HTMLElement API node.getAttribute(quot;hrefquot;) node.contains(aNode) node.getText() node.getStyle(quot;paddingTopquot;) node.previous() 18
    19. 19. Node Enhances The HTMLElement API node.addClass(quot;selectablequot;) node.toggleClass(quot;enabledquot;) node.getXY() node.get(quot;regionquot;) 19
    20. 20. Node Extendable Plugins can provide app specific features… node.plug(IOPlugin); node.io.getContent(quot;http://foo/barquot;); node.plug(DragPlugin); node.dd.set(quot;handlequot;, quot;.titlequot;); 20
    21. 21. Node Constrainable Node is the single point for DOM access, throughout YUI 3 Makes YUI 3 ideal as a trusted source in quot;constrainedquot; environments such as Caja and Ad-Safe 21
    22. 22. NodeList Used to Batch Node operations var items = Y.Node.all(quot;.actions liquot;); items.addClass(quot;disabledquot;); items.set(quot;titlequot;, quot;Item Disabledquot;); items.each(function(node) { node.addClass(quot;disabledquot;); node.set(quot;titlequot;, quot;Item Disabledquot;); }); 22
    23. 23. Core Language Addons Array Extras  isString, isNumber …  Bind  Each  Later  OOP  Augment, Extend, Aggregate, Merge, Clone  AOP  Before/After For Methods  23
    24. 24. A Common Foundation Y.Attribute Configurable Attributes  readOnly, writeOnce  validators, getters and setters  Attribute Value Change Events  on/after  Complex Attribute Support  set(quot;strings.label_enabledquot;, quot;Enabledquot;);  24
    25. 25. A Common Foundation Y.Base The Class From Which YUI 3 Classes Will Be Derived  Combines Custom Event And Attribute Support  Manages the quot;initquot; and quot;destroyquot; Lifecycle Moments  Provides Plugin/Extension Management  25
    26. 26. A Common Foundation Y.Widget 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 quot;renderquot; Lifecycle Moment  Establishes A Common Pattern For Widget Development  26
    27. 27. Code... Finally, let's see some code.. 27
    28. 28. 3 YUI http://developer.yahoo.com/yui/3 http://github.com/yui/yui3 http://github.com/davglass/openhackday http://blog.davglass.com @davglass

    ×