Simple examples are always difficult to create because while you want to demo some feature, you also want something that seems to make sense. I wanted to try to distill down some of the complexity of creating a Y.App application by building a bare bones two panel app. Here’s the sourcecode:

All I did was create a model, which has three attributes, a view which will render this model, and then built the skeleton of the “app”. We have two pages, both of which use the same view and model structure, and I also used the built-in system for wiring up events. In this case on the “button” tag.

Of course, all this code does is let you switch between to views, but all the work going on behind the scenes to wire up the events, utilize the models, etc is very powerful. This example really just scratches the barest surface of what you are capable with this new framework, and I encourage you to check out a more complex example on the YUI staging site here.

Staring this week, I’m going to be featuring a series of posts called “Make it with YUI”, where I will go out and find many common features you might find on various websites that are javascript based, and remake them in the YUI framework. So things like rotating banners, tickers, twitter posts, etc. The idea will be to feature components built with YUI and ultimately have a nice set of widgets and tools you can use to add to your site.

In addition to this I’m beginning work on my 2nd game, based on the work I did with the first one (CanvasQuest) and I will be posting a developer blog here called Make it with YUI: Game Edition.

So, stay tuned for great stuff this year! And if you have seen some widget or feature of a site that you wish remade via YUI, please let me know!

Intro

I’ve decided to write a few articles about getting starting in YUI, and various things I learn as I go along. There are never enough of these things out on the web, and the chances of the person wanting to learn actually finding good tutorials is low. So perhaps you might find these of some use. I hope to “chain them” meaning when I write article #2 I’ll put a link at the bottom of this one, and so on.

Getting Started

Anyway, let’s get started. I assume you have some sort of need for a javascript library, or perhaps you read about YUI and are basically curious about it. Let me give you a bit of a background. YUI was originally created as a common set of javascript library functions within Yahoo years ago, with the idea of allowing web developers to have a basic set of functionality to use inside Yahoo pages. This naturally grew and expanded – breaking out of just Yahoo and also moving towards and open set of components you see today. Yahoo folks curate the library but take changes and updates from anyone, and you are free to use this code any way you like – as long as you follow the license.

YUI may seem like this giant set of libraries, doing everything from animations to widgets, but in reality the YUI team has tried hard to make it very small, fast, and modular. You only load the bare core when you include the YUI base js (although you can if you want load more via the configurator) and when you need more functionality, you can fetch it on the fly and avoid having long initial download times for your page.

Anatomy of a YUI instance:

Here’s a snippet of code that shows off a very basic YUI instance:

Basically what this does is load the core YUI instance via the script tag.

The line :

Basically says this: Get me a YUI object, call it “Y” and tell it to fetch everything needed for the “node” component, then go run this code (that’s inside the function).
The reason why it uses this funny syntax is so that your “Y” and all the stuff you do in there is protected from the outside javascript code, and it does other things like allow you to run different versions of YUI at the same time, or to have other libraries on your page without worrying about name collisions. One thing you will rapidly learn about YUI is that it is not just a library of code to do javascript stuff, it’s also a great way to learn about best practices for loading efficient javascript and other web technologies. (They have a CSS library as well, but we’ll talk about that later).

So, anyway, load up that gist file and you’ll see that you have some red text. What happened was we called:
Y.one – which basically says “get me the node with this CSS selector”. Then we called on that addClass of “red”.

One of the cool things about YUI is that most of the methods you call are “chainable”. Meaning when we called Y.one we got back something that has YUI methods available to it. We were then able to call addClass. You could go further and do other things to that node like .set(“innerHTML”) or other Node type methods.

This is a lot to get all at once. I know! It took me a long time to grok YUI – but I have to tell you repetition helps! Also, try to come up with a task that you would like to get done via javascript, and start looking at how YUI could do it. There is a whole lot more I could cover this time around but let’s just summarize:

Summary

YUI is a world-class javascript library that allows you to load a small core initially, and load other components as you need them. It allows you to make changes to the DOM in a way that is agnostic to which browser your users have, and it also only loads the components you need. You can chain method calls to build up complex changes and behaviors. You select elements on the page using CSS3 selectors.

Hope this first article offers some insight as to how to get started using YUI. Please send me feedback and I’ll do my best to improve it, and to write better tutorials in the future!

Continue to Part 2.