Geekup Leeds - Why the YUI?

Slide 1: Y the YUI? Christian Heilmann, GeekUp Leeds, February 2008

Slide 2: Why any library?

Slide 3: Because not everybody likes pain.

Slide 4: Browsers have shifty eyes and will steal your lunch money!

Slide 5: Memory leaks, creative standards support and syntax oddities make your life less fun

Slide 6: So why the YUI?

Slide 7: First of all, please stop the fanboy fights.

Slide 8: All good libraries want to do the same thing: make your life easier.

Slide 9: YUI has one big benefit though:

Slide 10: It is Dr.Martens for the web: Industrial strength for your solutions.

Slide 11: Safety and Maintainability.

Slide 12: Namespacing included.

Slide 13: Let’s guess what the following things are...

Slide 14: YAHOO.util.Dom YAHOO.util.Event YAHOO.widget.ColorPicker

Slide 15: Roll your own: YAHOO.namespace(‘GeekUp’); YAHOO.GeekUp.getRoundIn = function(){...}

Slide 16: Mess around with JavaScript: YAHOO.lang. ...

Slide 17: OO-goodness for JS, Testing for types: isArray, isBoolean, isFunction, isNull, isNumber isObject, isString, isUndefined, isValue

Slide 18: React to User Agents: YAHOO.env.ua if(YAHOO.env.ua.ie === 5){ alert(“you hate developers,right?”); }

Slide 19: OMG! It is so HUGE!

Slide 20: Hosting by YAHOO (CDN, gzipped, minified)

Slide 21: Include on-demand, either with YAHOO loader, get or YAHOO_config.

Slide 22: Take control with Custom Events.

Slide 23: You do know what happens when and how and you can react to it.

Slide 24: Yes, you can use CSS selectors! (as a query and as a filter)

Slide 25: You have full API documentation, examples and cheatsheets - even offline! (Elephants, Tigers and Bears are extra.)

Slide 26: Oh, and the YUI is *not* a JavaScript library!

Slide 27: It is a framework of JS, CSS, Design Patterns and Widgets.

Slide 28: Developed and tested for use in Yahoo! properties, and handed over to you for free! (BSD license FTW)

Slide 29: Go, fetch! http://developer.yahoo.com/yui

Slide 30: Tips for quick YUI development:

Slide 31: Get an IDE that supports it (Aptana, Eclipse, TextMate Bundle)

Slide 32: Make your own shortcuts and nest them in a module pattern.

Slide 33: YAHOO.namespace('geekup'); YAHOO.geekup.doStuff = function(){ function handler(){ if(YAHOO.util.Dom.hasClass(this, 'hl')){ YAHOO.util.Dom.removeClass(this, 'hl'); } else { YAHOO.util.Dom.addClass(this, 'hl'); } } var nav = YAHOO.util.Dom.get('nav'); var lis = YAHOO.util.Selector.query('#nav li') for(var i=0;lis[i];i++){ YAHOO.util.Event.addListener(lis[i], 'click', handler); } }();

Slide 34: YAHOO.namespace('geekup'); YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom, var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; function handler(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } } var lis = $('#nav li') for(var i=0;lis[i];i++){ YE.on(lis[i], 'click', handler); } }();

Slide 35: YAHOO.namespace('geekup'); YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom, var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; function handler(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } } var lis = $('#nav li') for(var i=0;lis[i];i++){ YE.on(lis[i], 'click', handler); } }();

Slide 36: YAHOO.namespace('geekup'); YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; YE.on($('#nav li'),'click',function(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } }); }();

Slide 37: YAHOO.namespace('geekup'); YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; var $ = YAHOO.util.Selector.query; YE.on($('#nav li'),'click',function(){ if(YD.hasClass(this, 'hl')){ YD.removeClass(this, 'hl'); } else { YD.addClass(this, 'hl'); } }); }();

Slide 38: YAHOO.namespace('geekup'); YAHOO.geekup.doStuff = function(){ var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; YE.on(YD.get('nav'),'click',function(e){ var t = YE.getTarget(e); if(t.nodeName.toLowerCase()==='li'){ if(YD.hasClass(t, 'hl')){ YD.removeClass(t, 'hl'); } else { YD.addClass(t, 'hl'); } } }); }();

Slide 39: Thanks, now tell me what you’d like to know.