Thursday, August 14th, 2008

YUI 3: The goals are lighter, faster, consistent, power, secure

Category: JavaScript, Yahoo!

>YUI 3 has a preview release for us to check out.

The goals are:

  • lighter (less K-weight on the wire and on the page for most uses)
  • faster (fewer http requests, less code to write and compile, more efficient code)
  • more consistent (common naming, event signatures, and widget APIs throughout the library)
  • more powerful (do more with less implementation code)
  • more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Caja or ADsafe)

What’s New

  • Sandboxing: Each YUI instance on the page can be self-contained, protected and limited (YUI().use()). This segregates it from other YUI instances, tailors the functionality to your specific needs, and lets different versions of YUI play nicely together.
  • Modularity: YUI 3 is architected to use smaller modular pieces, giving you fine-grained control over what functionality you put on the page. If you simply want to make something draggable, you can include the dd-drag submodule, which is a small subset of the Drag & Drop Utility.
  • Self-completing: As long as the basic YUI seed file is in place, you can make use of any functionality in the library. Tell YUI what modules you want to use, tie that to your implementation code, and YUI will bring in all necessary dependencies in a single HTTP request before executing your code.
  • Selectors: Elements are targeted using intuitive CSS selector idioms, making it easy to grab an element or a group of elements whenever you’re performing an operation.
  • Custom Events++: Custom Events are even more powerful in YUI 3.0, with support for bubbling, stopping propagation, assigning/preventing default behaviors, and more. In fact, the Custom Event engine provides a common interface for DOM and API events in YUI 3.0, creating a consistent idiom for all kinds of event-driven work.
  • Nodes and NodeLists: Element references in YUI 3.0 are mediated by Node and NodeList facades. Not only does this make implementation code more expressive (Y.Node.get("#main ul li").addClass("foo");), it makes it easier to normalize differences in browser behavior (Y.Node.get("#promo").setStyle("opacity", .5);).
  • Chaining: We’ve paid attention throughout the new architecture to the return values of methods and constructors, allowing for a more compressed chaining syntax in implementation code.

Some example snippets

javascript
< view plain text >
  1. // Creates a YUI instance with the node module (and any dependencies) and adds the class "enabled" to the element with the id of "demo".
  2. YUI().use('node', function(Y) {
  3.     Y.get('#demo').addClass('enabled');
  4. });
  5.  
  6. // Creates an instance of YUI with basic drag functionality (a subset of the dd module), and makes the element with the id of "demo" draggable.
  7. YUI().use('dd-drag', function(Y) {
  8.         var dd = new Y.DD.Drag({
  9.         node: '#demo'
  10.     });
  11. });
  12.  
  13. // Adds the class "enabled" to the all elements with the className "demo".
  14. Y.all('.demo').addClass('enabled');
  15.  
  16. // Sets the title attribute of all elements with the className "demo" and removes the class "disabled" from each.
  17. Y.all('.demo').set('title', 'Ready!').removeClass('disabled');
  18.  
  19. // Adds the Drag plugin to the element with the id "demo", and enables all of its h2 children drag as handles.
  20. Y.get('#demo').plug(Y.Plugin.Drag, {
  21.     handles: 'h2'
  22. });
  23.  
  24. // Attaches a DOM event listener to all anchor elements that are children of the element with the id "demo". The event handler prevents the anchor from navigating and then sets a value for the innerHTML of the first em element of the clicked anchor.
  25. Y.on('click', function(e) {
  26.     e.preventDefault();
  27.     e.target.query('em').set('innerHTML', 'clicked');
  28. }, '#demo a');

Very exciting stuff to the team. I look forward to seeing a full up code repository too!

Related Content:

11 Comments »

Comments feed TrackBack URI

This is awesome. I like to see this type of enhancement the YUI team is adding to the library.

I’m in agreement with their goals for 3.0 and the changes and code they’ve released so far. Hopefully this will be ready the first quarter of 2009, and I’m sure this will boost up YUI’s usage in the wild!

Comment by eferraiuolo — August 14, 2008

very interesting… very compact! I would consider use it now that its a “write less, do more” js lib too. :D

Comment by RodrigoCardoso — August 14, 2008

Looks great, even for a Spry and Raw javascript junky like me.

Comment by V1 — August 14, 2008

should not every framework in any language should have these goals? :D

Comment by Aimos — August 14, 2008

As an example, I like to compare Prototype to Steve Jobs. He’s hip, he’s cool, he’s easy to use, but he can’t stand up to getting drilled on technical issues by an engineer.

On the flip-side, YUI has always been like that super-technical geek with absolutely no social skills. Brilliant, sure, but nobody wants to spend time with him because he’s boring and clunky.

YUI 3, however, looks to be a fairly solid cross between the two… like MooTools or jQuery.

Comment by Skyzyx — August 14, 2008

@Skyzyx:
Can you list some relevant problems with Prototype?

Comment by eyelidlessness — August 14, 2008

YUI is, overall, the best of all of the javascript frameworks. It does the basic fantastically, has ALOT of useful components and best of all has EXTENSIVE documentation

I really can’t work out why it’s usage rates aren’t that high. If you’re not already, do yourself a favor and switch to it.

Comment by stevesnz — August 14, 2008

so there’s a CVS repo with nothing in it?

Wake me up with the YUI team actually gets with the whole “open development” thing for real.

Comment by slightlyoff — August 14, 2008

MooTools, overall, the best of all of the javascript frameworks. It does the basic fantastically, has ALOT of useful components and best of all has EXTENSIVE documentation
I really can’t work out why it’s usage rates aren’t that high. If you’re not already, do yourself a favor and switch to it.

Comment by Jordan — August 15, 2008

Compared to some of the other frameworks like jQuery, MooTools and Prototype, which have taken a youthful, hip, even fun approach to coding but haven’t necessarily reinforced good coding behaviours, YUI has seemed a bit like the college professor father encouraging his children to eat their vegetables, respect their elders, and learn best practices before bending all the rules.

By adding function chaining to its well-structured codebase, YUI is popping his disc of bootlegs and mashups into the CD player of the Prius and proving to the kids that he can be “phat” too. I can’t wait for YUI 4 when he and the Mrs. start making out on the couch with my KISS records on the hi-fi.

(Too much metaphor?)

Comment by furf — August 15, 2008

I hate the terse syntax of jQuery that YUI looks to be adopting. I prefer method names that actually describe what they do. Maintaining code is more important than being able to type it quickly.

Comment by richtaur — August 18, 2008

Leave a comment

You must be logged in to post a comment.