Coming in YUI 3.2.0: SimpleYUI
By Eric Miraglia and Adam MooreSeptember 3rd, 2010
The feature described in this article is available as of YUI 3.2.0pr2, and it will be a part of the upcoming 3.2.0 release. You can start playing with it today by following the code in this article.
SimpleYUI is a new way of loading and instantiating YUI 3. The SimpleYUI file contains a rollup of basic Ajax library functionality: DOM tasks, event abstraction, UI effects, and Ajax. Unlike other ways of loading YUI, SimpleYUI creates a YUI instance immediately upon loading and binds all included components to a global Y variable. Using SimpleYUI is easy:
<script type="text/javascript"
src="http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"></script>
<script>
//Y is ready to use; no instantiation necessary:
Y.one("#foo").addClass("highlight");
</script>
This isn’t a “lite” or de-contented version of YUI — you still have access to all of the power and features of the entire library when you start with the SimpleYUI file. However, SimpleYUI does provide a nice convenience by rolling up some common functionality and creating a global instance (Y) that’s ready to use immediately.
Work with the DOM
SimpleYUI gives you all of the standard DOM interactions in the YUI 3 API:
//get an element reference, add a click handler
Y.one('#demo').on('click', function(e) {/*handle click*/});
//add content to an element
Y.one('#demo').append('Additional content added to #demo.');
//listen for any click on any <li> that descends from #demo:
Y.one('#demo').delegate('click', function(e) {/*handle click*/}, 'li');
//move #demo to the location of any click on the document
Y.one('document').on('click', function(e) {
Y.one('#demo').setXY([e.pageX, e.pageY]);
}
);
Create UI Effects
All of the UI effects that are part of the (new-for-3.2.0) YUI Transition module are available in SimpleYUI:
//fade #demo, then remove it from the DOM:
Y.one('#demo').transition({
easing: 'ease-out',
duration: 2, // seconds
opacity: 0
}, function() {
this.remove();
});
Ajax
SimpleYUI provides the IO module’s basic Ajax functionality:
// Make an HTTP request to 'get.php':
Y.io('get.php', {
on: {
complete: function (id, response) {
var data = response.responseText; // Response data.
// ... handle the response ...
}
}
});
The rest of YUI is just a use() away
You aren’t limited to what comes bundled with SimpleYUI. You can bring in any other YUI 3 component, YUI 3 Gallery module, or YUI 2 component with a simple use() statement at any time.
//Use drag and drop, which is not included in the SimpleYUI rollup:
Y.use('dd-drag', function(Y) {
var dd = new Y.DD.Drag({
node: '#foo'
});
});
YUI 3 is good about loading anything you need whenever you need it; just master the use() statement and you’re always just one line of code away from anything in the library that you need.
Use SimpleYUI when…
- …you want to get started fast and learn the ropes of YUI;
- …you want to have basic Ajax library functionality available at any time in the life of the page without creating a new YUI instance.
Don’t use SimpleYUI when…
- …performance matters more than convenience;
- …you want to sandbox portions of your implementation into separate instances;
- …you want to be deliberate about when different components load and what the precise module/submodule makeup is on the page.
September 3, 2010 at 11:23 am
Nice and elegant. Makes YUI apparently simpler to beginners without sacrificing all the goodness that power-users have grown accustomed to. Nice job.
September 3, 2010 at 1:09 pm
Nice, I hate to say it but this seems like the perfect comparison to jQuery. I have always felt the one file jQuery is an elegant inclusion model, something that YUI has lacked, but here it has been rectified.
I like it. As the previous commentator said, I think this will have a larger impact on learning/hacking then anything else.
September 3, 2010 at 1:51 pm
Amazing timing! We had a new front end developer start on Monday, and I’ve walking him through YUI3.
This also makes YUI almost as approachable as jQuery for designers, which is huge.
This is really great. Thanks for this!
September 3, 2010 at 10:52 pm
Related to the remarks on SimpleYUI containing a get-started-fast rollup of YUI functionality that jQuery developers are used to: jQuery – YUI3 Rosetta Stone
September 4, 2010 at 1:23 am
SimpleYUI? QuickYUI? they are the same one?
September 4, 2010 at 1:25 am
It’s SimpleYUI. We had moment of indecision about the name, but SimpleYUI it is.
September 4, 2010 at 7:46 am
I agree with you, swaydeng. FastYUI,……
September 23, 2010 at 11:25 am
Used the SimpleYUI on a recent project, was going very well for simple dom manipulation. Then the pressure to get things done and the need to add some “use” references just did not work, it done forced us to go back to JQuery, which just gets it done.
I like the YUI3 approach but its got to be easier and it needs to provide some useful feedback when it does not work. The documentation need more real world examples. I know it can do what I want but at ttimes what you need to know just is not on the website.
September 23, 2010 at 2:27 pm
@Mike — I appreciate the feedback. We’ll keep our heads down and keep your feedback in mind as we do. -Eric