Caridy's Codex

Getting up to speed with YUI 3

Few folks asked me about YUI 3 and how they can get up to speed with this new version of Yahoo! User Interface Library. Well, here is a quick guide to get up to speed in 3 days. Yes you heard me right, only 3 days, assuming you already know JavaScript and YUI 2. ;-)

First block (day one) – General Architecture

In the first day, you will have to expend around 4 hours watching videos, getting a lot of information. There is not time to tackle this little by little, hahahaha. It’s better to get the whole insight in a row.

(Day 1, Task 1). General Concepts

Let’s start with a general talk by Nicholas. He really explores some of the basic design principles used to build YUI 3. He didn’t mention YUI 3, but I believe if you understand these general concepts, will be easy for you to understand YUI 3.

Nicholas C. Zakas — Scalable JavaScript Application Architecture
Frontend architecture for complex, modular web applications with significant JavaScript elements.
http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture

Then you can jump for the real stuff. These 3 videos were recorded during YUI Conf 2009, and are essential in the process of understanding the underlying concepts behind YUI 3.

(Day 1, Task 2). YUI Infrastructure

Eric Miraglia — Welcome to YUI 3
YUI engineer Eric Miraglia provides a high-level introduction to key concepts underlying the YUI 3 codeline.
http://developer.yahoo.com/yui/theater/video.php?v=miraglia-yuiconf2009-yui3

(Day 1, Task 3). Events Infrastructure

Luke Smith — Events Evolved
YUI engineer Luke Smith provides a deep introduction to the YUI 3 event system including its support for DOM events, event delegation, synthetic events, and custom events.
http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events

(Day 1, Task 4). Widget Infrastructure

Satyen Desai — A Widget Walkthrough
YUI engineer Satyen Desai provides a detailed tour of the YUI 3 widget subsystem. (Slides).
http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets

Second Block (day two) – Experimenting

In this second block you will be able to get some insight, checking some real examples, and getting some feeling about the new code style and the new infrastructure.

(Day 2, Task 1). Playing with the Official Examples

You should spend some time checking some of these examples. Keep in mind that for every example in the library we have a page with the full explanation, this can help you to understand better how things work. Here is an example, and has you can see, there is a link to display the working example in a new page, or you can see it within the iframe and the description is below that.

YUI 3: Index of Examples
YUI 3 ships with a series of 130 examples that illustrate the implementation of its components. The examples can be starting points for your exploration, code snippets to jump-start your own programming, or simply inspiration as to how various interaction patterns can be enabled in the web browser via YUI.
http://developer.yahoo.com/yui/3/examples/

(Day 2, Task 2). Checking the state of the library

It’s important to understand the state of the library, the list of available modules, and the state of each module. Keep in mind that every module contains a landing page with some information (the most important), but there are some more pages and the API Docs with tons of valuable info. Don’t spend too much time digging from here, it’s better to explore each component when needed, having a real use-case in mind. http://developer.yahoo.com/yui/3/

Try to focus on “Core” and “Component Infrastructure” sections. Also, spend some time reviewing the dependency configurator tool, it will give you some feeling about the granularity and the organization.
http://developer.yahoo.com/yui/3/configurator/

(Day 2, Task 3). Debugging

Now that you have nailed down some of the general concepts, and you will start checking some examples and putting some examples on your own, it’s important to know how the debug your code. YUI 3 offers a variety of tools and utilities to help you during the development process:

Luke Smith — Debugging in YUI 3
YUI engineer Luke Smith discusses the fine art of debugging web applications, looking at general tools and techniques and providing a few specific hints about debugging in YUI 3.
http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-debugging

(Day 2, Task 4). Performance Implications

With YUI 3 we are trying to beat all the barriers in terms of performance. Normally is not recommended to introduce performance optimization in the early stages for a project, it’s important to know the general concepts behind YUI 3 Loading process, and how to leverage YUI 3 infrastructure to create hight performance web applications.

Matt Sweeney — YUI 3 Performance
YUI architect Matt Sweeney reviews principles of high-performance web development and looks at how best to implement those principles in YUI 3-based projects.
http://developer.yahoo.com/yui/theater/video.php?v=sweeney-yuiconf2009-performance

After that, you should be able to continue with the library documentation and the examples.

Third Block (day three) – Extending and Contributing

(Day 3, Task 1). Creating your own modules

Caridy Patino – Building YUI 3 Custom Modules
Learn how to leverage the YUI 3.x infrastructure to create custom code that can be loaded easily and efficiently onto any page. Also discover how these mashups can combine YUI widgets and utilities with your own code and how to reuse code between different YUI instances.
http://www.slideshare.net/caridy/building-yui-3-custom-modules

(Day 3, Task 2). A real world use-case

In every project, is always good to get a different angle, a different perspective, and outsider insight:

Eric Ferraiuolo — Web App Development with YUI 3
Eric Ferraiuolo of Oddnut Software talks about the nuances of deploying real-world web applications using YUI 3.
http://developer.yahoo.com/yui/theater/video.php?v=ericf-yuiconf2009-webapps

(Day 3, Task 3). How to contributing to YUI

If you’re really into YUI, you should take the time to check this awesome video from Dav Glass:

Dav Glass — Contributing to YUI
YUI engineer Dav Glass introduces you to the YUI Gallery and steps through the process of making contributions to the YUI project.
http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing

Check the YUI 3 gallery here:
http://yuilibrary.com/gallery/

Few more thoughts

There is a bunch of videos in the YUI Theater, make sure that you check them, some of them are really useful, other are very technical or diving into an specific subject. Also, there are a bunch of them explaining in details some of the tools created by YUI Team as well.
http://developer.yahoo.com/yui/theater/

YUI Blog is another good reason to keep you updated about the library. Including some good articles (again, some technical deep dive).
http://www.yuiblog.com/

And finally, you can join us thru the community. This site, with such a great organization, provides multiple ways to get in contact with YUI Core Team, YUI Contributors and the community in general.
http://yuilibrary.com/

Written by @caridy | November 16, 2009
Tags: yui, javascript, all