YUI 3.0.0: First GA Release of YUI’s Next-Generation Codeline

By YUI TeamSeptember 29th, 2009
YUI().use("node", function(Y) {
    Y.one("#message").setContent("Hello, World!");
});

Download YUI 3.0.0We’re pleased to announce today the general-availability release of YUI 3.0.0. YUI 3′s core infrastructure (YUI, Node and Event) and its utility suite (including Animation, IO, Drag & Drop and more) are all considered production-ready with today’s release.

YUI 3 is the first ground-up redesign of YUI since 2005, and it brings with it a host of modernizations:

  1. Selector-driven: YUI 3 is built around one of the lightest, fastest selector engines available, bringing the expressive power of the CSS selector specification into actions that target DOM nodes.
  2. Syntactically terse: Without polluting the global namespace, YUI 3 supports a more terse coding style in which more can be accomplished with less code.
  3. Self-completing: YUI 3′s light (6.2KB gzipped) seed file can serve as the starting point for any implementation. As long as this seed file is present on the page, you can load any module in the library on the fly. And all modules brought into the page via the built-in loader are done so via combo-handled, non-blocking HTTP requests. This makes loading the library safe, easy and fast.
  4. Sandboxed: YUI modules are bound to YUI instances when you use() them; this protects you against changes that might happen later in the page’s lifecycle. (In other words, if someone blows away a module you’re using after you’ve created your YUI instance, your code won’t be affected.)

The code we’re shipping today in 3.0.0 is the same code that drives the new Yahoo! Home Page, and it goes out with confidence that it has been exercised vigorously and at scale. The team is thrilled to be sharing it with you today for the first time in a production-ready release.

Writing Your First YUI 3 App in 3 Easy Steps:

One of the goals of the YUI 3 redesign was to make it easy to use without sacrificing power, performance and configurability. You can have your first YUI 3 app running in less than a minute following three simple steps.

Step 1: Put the YUI seed file on the page, pulling down a slim 6.2KB script file off of the Yahoo CDN:

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

Step 2: Make use of any YUI module or submodule. The seed file will take care of calculating your dependencies and loading any additional scripts you need in (usually) a single combo-handled, non-blocking HTTP request. So, you can use the Drag & Drop plugin to make an element draggable like this:

<div id="demo">I'm draggable.</div>

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('dd-plugin', function(Y) {
    Y.one('#demo').plug(Y.Plugin.Drag);
});
</script>

Step 3: There is no step 3. Relax, grab a soda. Work on your short game. Life is good.

YUI 3: use() Anything, But Not Everything

YUI 3′s simplicity of use (particularly in its ability to use() any module with intrinsic, efficient loading) is paired with new levels of power and control.

For example, one of the characteristics you’ll find throughout the YUI 3 project is an emphasis on granularity. We’ve worked hard to take structures that were monolithic in YUI 2 and break them down into smaller packages in YUI 3. As a result, you’ll find that many modules — component-level packages like IO or Animation — are comprised of various submodules. Usually, all you’ll need is the base submodule.

Charting the evolution of components from YUI 2 to YUI 3 tends to yield visualizations like this one for DataSource (comparing gzipped filesizes):

YUI DataSource package comparison between YUI 2 and YUI 3.

Because any given DataSource implementation is likely to need only one slender submodule from the DataSource family, the savings in terms of performance and K-weight — especially for complex implementations — are often substantial.

Take the time to explore the Dependency Configurator as you’re setting up your YUI().use() statements. Instead of picking top-level modules, explore the submodule structures and see if the featureset you need is encompassed in a submodule. You may find yourself using modules like io-base instead of io and anim-base instead of anim — and saving yourself a lot of K-weight in the process.

Check out Satyen Desai's excellent YUI 3 Dependency Configurator.

YUI Website Updates

Along with the promotion of YUI 3 to general availability with today’s release, we’ve updated the YUI website to better support the growing communities using both YUI 2 and YUI 3. Today, when you visit YUI on the Yahoo! Developer Network you’ll find a meta-page with project-wide links along with direct links into the YUI 2 and YUI 3 areas of the site.

Visit the new YUI homepage on the Yahoo! Developer Network.

Meanwhile, we continue to build out our project-tracking and forums platform on YUILibrary.com and host the YUI project source code for forking and contributions on GitHub You can also find a lot of YUI folks hanging out in #YUI on Freenode; feel free to drop in and join the conversation as you explore YUI 3.0.0.

Tagged as:

45 Comments

  1. Glad to hear this!

  2. I guess I’ll have to give YUI another go and see if it can replace jQuery in my little projects. The amount of support materials you folks put out for YUI is amazing, if I can get past that “now what?” stage, I’m sure it would be a better base to build my stuff with.

  3. I would be very interested to hear how the YUI3.0 development team compares this release to JQuery. What are the relative strengths/weaknesses of each? Are there areas where YUI3.0 is clearly ahead of JQuery? How about the inverse?

  4. Very cool. Congratulations guys, I will be poring over the GA in the next couple of days.

  5. Congratulations guys – you’ve put a HUGE amount of effort into YUI 3 so it’s good to see it getting it’s first release!

  6. I love the brevity of the bootstrapping. Lazy loading should be much more of a standard nowadays. Works around most performance problems.

  7. I’ve been pretty exclusively jQuery for a year now, but I’m excited to give this a shot to see what else is possible. Great work, guys!

  8. Congratulation! Very nice work, especially around selectors.

  9. [...] YUI 3 is out of beta – the changes to YUI needed to run the new Yahoo homepage, smaller, faster, less code to write. [...]

  10. [...] today is a complete redesign, the framework became faster, lighter and easier to use, quoting Eric Miraglia: “One of the goals of the YUI 3 redesign was to make it easy to use without sacrificing power, [...]

  11. [...] get up to speed on the latest YUI advancements and best practices (with a particular focus on the 3.0.0 release announced earlier today), get the scoop about the road ahead, and share tips and tricks with each [...]

  12. I agree with Chris the (6.2KB gzipped) seed file is really one of the hight points.

    Congratulations YUI team, the redesign was really amazing!

  13. Any idea if/when there will be a YUI Rich Text Editor based on YUI 3?

    Thanks

  14. Congratulations on the new release! I’m a jQuery user too, but very tempted to give YUI a try.

    However, while I see the power of the use() dynamic module include functionality, your Dependency Configurator (DC) doesn’t actually help you with the use() call – it only outputs lines of HTML to make the right JS call… please add an equivalent DC output for use() statements!

  15. @MarcusT–Agreed…Configurator should give you the equivalent use() for your selected modules. No question. We’ll get to it. -Eric

  16. [...] production-ready with today’s release,” Yahoo’s Eric Miraglia said in a blog post Tuesday. “The code we’re shipping today in 3.0.0 is the same code that drives the new [...]

  17. @Johan — What I can tell you about the schedule is that the next significant YUI 3 release (3.1.0) will wrap up the widget infrastructure on which something like Editor would depend. There will be some beta widgets shipping with 3.1.0 (Q1 next year), but I would expect a full YUI 3 Editor to come later. Keep in mind that the top-level editor depends on a lot of sub-components — panels, menus, buttons, etc. So we have a lot of work to do. That said, we’ll probably have some stuff for you to play with before the official Editor ship date. Short answer: Editor in 2.8.0 is still the YUI standard for that widget and it will be for a bit longer. -Eric

  18. Why isn’t IE8 an A grade browser yet? It isn’t beta anymore.

    http://developer.yahoo.com/yui/3/articles/gbs/

  19. great release – congrats guys.

  20. @Alan —

    http://developer.yahoo.com/yui/articles/gbs/

    Sorry — the page you found is an old copy, not the current GBS. My bad.

    -Eric

  21. THANK YOU SO MUCH for fixing so many issues with Google Chrome and IE 8 and the YUI History component!!!! This just made my entire week!!!!

  22. Yuppie!! Cannot wait to use it :) Thank you guys!!

    For my running projects I will stay on 2.8.0 because the missing widgets, meanwhile I will have the time to study and get used to the new version.

  23. Kudos to the yui team! This YUI3 is definitely better than YAHOO.Utils.Dom.Yadda.Yadda.Yadda… Wondering why you left a bug on Node…
    http://yuilibrary.com/projects/yui3/ticket/2528057

  24. What does this mean for YUI 2.x? Will we ever see YUI 2.9 and 2.10, etc with any further improvements, or do we need to start planning migration?

    The roadmap for YUI2 only goes as far as “YUI 2.8.1 if needed”…

  25. [...] da annuncio sul blog ufficiale, è da ieri disponibile a tutti per il download la versione di YUI, il [...]

  26. [...] The YUI team has put out YUI 3.0: We’re pleased to announce today the general-availability release of YUI 3.0.0. YUI 3’s core infrastructure (YUI, Node and Event) and its utility suite (including Animation, IO, Drag & Drop and more) are all considered production-ready with today’s release. [...]

  27. [...] das Javascript- und CSS-Framework von Yahoo!. Eric Miraglia beschreibt ausführlich die Neuerungen von YUI3. In der neuen Version ist die Syntax verändert. Sie ist zwar noch immer nicht so schön [...]

  28. I too wanted to know more information about the plans for YUI 2.x.
    Since YUI 3 is “revolutionary” rather than “evolutionary”, migration is no easy task (especially if I don’t want to run the 2 in parallel).
    Will the YUI team continue to support and develop for YUI 2.x , or will it not be left up to the community?

  29. Ken, Dominykas — We’re spending more time on YUI 3 than on YUI 2 at this point. While we’re continuing to maintain the 2.x codeline, and we expect to do additional releases, major new functionality is likely to come from the community rather than from the core engineering team at Yahoo. Note that we’ve already seen this process underway, with the 2.8.0 release deriving major content from contributors. -Eric

  30. Jean-Paul Cozzatti said:
    September 30, 2009 at 6:53 am

    Awesome work guys!

  31. Im happy that theyve released this and its a significant step in usability of YUI, however until they release YUI 3.0 versions of the widgets I struggle to have motivation to bother upgrading. The widgets are the real place where YUI shines above others because of their standardized look, extremely good documentation, wide range of browser support etc etc. However I still find it better to use jquery or MochiKit for general browser stuff. Maybe when the widgets all come out for 3.0 I will be able to use YUI for everything which would be sweet.

  32. Superb work. Will be playing around with it.

    Thanks

  33. My short game needs lots of work :)

  34. What about YUI Grids? I see the other CSS technologies there (Base, Reset, Fonts) but no grids. Is YUI Grids being discontinued? Should I be looking to another CSS framework?

  35. Peter,

    http://tech.groups.yahoo.com/group/yui3/message/726

    Grids still ships with YUI 2, but we are re-evaluating the approach for YUI 3. We expect to ship a YUI 3 Grids component, but we’re still working on the approach.

    -Eric

  36. Nice work, guys. Can’t wait to play around with it.

  37. Are there exist cheatsheets (in pdf format) for yui 3.0?

  38. Sergey — No, there aren’t any cheatsheets for 3.0.0 as yet. -Eric

  39. Been waiting for this release, big thumbs up for the YUI team, especially for releasing such an API (same that drives the Yahoo home page) to the public.

  40. [...] La nouvelle version de la librairie AJAX et autres animations est disponible. Comme la librairie Google Ajax API, il est possible de ne charger qu’un noyau très léger (moins de 10Ko) et ce noyau prendra ensuite en charge le chargement dynamique des librairies supplémentaires. [...]

  41. I have downloaded YUI 3 library but don’t find date picker control for my purpose, it was in YUI 2.x..?? should i wait for upcoming release for this.

  42. Ashish,

    YUI 2 is still a fantastic library for widgets like Calendar — we’ll get those done for YUI 3 as well (starting in Q1 next year), but for now stick with YUI 2. And you can always use YUI 2 and 3 together:

    http://developer.yahoo.com/yui/3/examples/yui/yui-compat.html

    -Eric

  43. My goodness!!! I started using YUI3 last week, took several hours just to get the hang of the new syntax… but let me tell you, those were hours VERY well spent! I am LOVING YUI3!!! The new approach for custom event handling is SUPERB! The Plugin architecture is amazing! And the “Candy” is so appreciated! I just can’t wait for the widgets to launch!

  44. [...] YUI 2.8.0, YUI 3.0.0, and PHP Loader 1.0.0 beta 1 out the door, the team here is focused on our final big objective for [...]

  45. My short game needs lots of work :)