YUI().use("node", function(Y) {
Y.one("#message").setContent("Hello, World!");
}
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.
YUI 3 is the first ground-up redesign of YUI since 2005, and it brings with it a host of modernizations:
- 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.
- Syntactically terse: Without polluting the global namespace, YUI 3 supports a more terse coding style in which more can be accomplished with less code.
- 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.
- 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):
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.
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.
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.
