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/

In YUI 2.x, we have two components that can help us to define on-demand rules. These are the YUI Get Utility, and the YUI Loader.

YUI 3.x is a different story, this new version is based on the on-demand philosophy, and because of that, Loader and Get Utility are part of YUI Core.

About this article:

In this article, I will focus on YUI 2.x and specifically, how you can design your application to use the YUI on-demand capabilities in such a way that the transition to YUI 3.x will be straightforward. The main goal is to describe how we can use YUI to organize the code and learn how to deal with on-demand loading processes rather than focus on performance improvements. If you are looking for a performance boost, certainly this technique can help, but I will recommend you to follow the links provided at the bottom of this article.

From my point of view, there are two different types of web applications or pages:

• Monolithic Applications:
  The application and all its features/behaviors are controlled by a single object/script. Modifications in the application usually impact the core and the application in general.
• Granular Applications:
  The application is based on regions/webparts that represent certain areas. Usually some of these regions/webparts can be switched or removed from the application without impacting the rest of the functionalities.

I believe the second option (granular applications) is the way to go, especially for more complex applications. Also, this option will most likely make use of on-demand loading, where each region/webpart should be able to load its requirements and execute its own initialization process when it’s requirements become active and it’s DOM structure becomes available in the DOM.

Note: regions/webparts are atomic units used to build each page. Usually they are represented in the DOM as a simple DIV, and are contained as a granular part in the application. From now on, I will refer to these elements as “regions”.

That said, lets see a couple of diagrams to analyze what is the gain behind the on-demand loading process. These are manually created diagrams representing the loading and execution process for a page.

Application timeline:

These two diagrams represent a page/app in which, for the sake of example, contain only two regions (left-column-renderer and ad-renderer).

Traditional process: inserting tags within default DOM structure of every page.

Default Browser Loader: Loading and Execution Timeline

Notes for this diagram:

• it represents a generic app timeline for a simple page with a bunch of script tags.
• the scripts can be at the top (in the head) or at the bottom of the page (before </body>), and the sequence is more or less the same.
• “yui-modules” represent a set of YUI modules (probably using YUI Combo Handler to include them all using a single call.
• “bubbling” is a 3rd party module that cannot be loaded thru the YUI Combo Handler.
• “swf-object” is a well-known 3rd party component to handle flash movies, and it represents another requirement.
• “…other…” represents other regions in the application.

On-demand loading process: using YUI Loader to load the requirements and YUI Get Utility to execute the initialization processes for each region.

YUI Loader and Get Utility: Loading and Execution Timeline

Notes for this diagram:

• we use some of the elements described in the previous one.
• “yui-loader” is a small file (only 9.4KB) and it packages Yahoo Global Object, Get Utility, and YUI Loader engine.
• “boot” is usually a tiny file with the application logic, the definition of the 3rd party modules (swf-object and bubbling), and the list of other dependencies (initializers and renderers) that should be loaded thru YUI Get Utility (like left-column-renderer, ad-renderer, etc).
• items at the same level can be executed at the same time (JavaScript is a single execution thread, and so, the first to become ready will be the first to be executed).
• swf-object was transformed into a YUI Module to fit this example (it can be also be treated as a component if you want to).
• items in the 3rd block (left-column-renderer, ad-renderer, etc) will be included dynamically by the bootstrap definition.

Lets try to identify differences between these two approaches:

The first difference that you may notice in these two diagrams is the “domready” event. It will be more likely to arrive first in the second approach because those scripts will be injected on-demand without blocking the loading process. It could arrive even before the “bootstrap ready” mark, depending on the complexity (size) of the DOM structure.

In theory, the bootstrap is responsible in defining what should be loaded and executed after the “bootstrap ready” moment occurs. This means that we can control everything at the JS level instead of depending on the default DOM structure. So all the logic will be at the JS layer and we should be able to delay certain initialization processes, or switch between them based on the user preferences, etc. All this granularity will be handled at the JS level.

Lets see some code:

Entry Point (index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Bootstrapping for a Web App using YUI 2.x</title>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body class="yui-skin-sam">
	<p>Web App.</p>
	<div id="mod-left-column">
	  ...
	</div>
	<div id="mod-content">
	  ...
	</div>
	<div id="mod-ads">
	  ...
	</div>
</body>
</html>

Bootstrap script (bootstrap.js):

/*
 * Encapsulation Pattern: Conjuring YUI from thin air (by Chris Heilmann)
 * http://www.wait-till-i.com/2008/08/02/conjuring-yui-from-thin-air/
 */
YAHOO_config = function() {
    /* injecting the YUI Loader in the current page */
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src',
        'http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js');
    document.getElementsByTagName('head')[0].appendChild(s);
    return {
        // true if the library should be dynamically loaded after window.onload.
        injecting: true,
        listener: function(o) {
            // waiting for the loader component
            if (o.name === 'get') {
                window.setTimeout(YAHOO_config.ready, 1);
            }
        },
        ready: function() {
            var loader = new YAHOO.util.YUILoader();
            // defining custom modules
            loader.addModule({
                name: 'bubbling',
                type: 'js',
                fullpath: 'bubbling/bubbling.js',
                requires: ['yahoo', 'event', 'dom']
            });
            loader.addModule({
                name: 'swfobject',
                type: 'js',
                fullpath: 'tools/swf-object.js'
            });
            loader.require(['bubbling', 'swfobject']);
            loader.combine = true;
            loader.insert({
                onSuccess: function() {
                    /* initializers and renderers here */
                    YAHOO.util.Get.script([
                        "left-column-renderer.js", "ad-renderer.js"
                    ], {
                        onSuccess: function() {
                            /* we are ready to roll, now we can
                               do more initializations here */
                        }
                    });
                    /* more initializations here, if
                       you don't want to use Get Utility */
                }
            });
        }
    };
} ();

The developer should define the generic structure for the application within the bootstrap, specifying the requirements, components, and modules for the application. So, basically, the bootstrap would be different for each site, application (or even for page).

Identify what should be loaded using YUI Loader or YUI Get Utility:

The difference between the modules and components/initializers/renderers is that modules are structures based on YUI, with the corresponding registration process, and the components are simple JS files.

All YUI components/utilities/widgets (modules) should be loaded thru the YUI Loader (along with 3rd party modules), and will be loaded on the page once.

YUI Get Utility should load scripts that implement a certain initialization/renderer process for a region in your application, or some kind of delayed routine to enhance the page.

Initialization and renderer processes:

Loader’s “onSuccess” is the first stop in the loading process (”bootstrap ready” in the diagram). At this point we can decide if we want to put all the initialization process within that function, or if we want to load some JavaScript files, and they will carry on with the initialization process for each different region in the page, getting some granularity for each page.

The initialization/renderer process should wait until the DOM structure that represent the region that we want to enhance gets available (onAvailable or onContentReady). If we want to extend/expand that DOM structure, just wait until DOM gets ready (onDOMReady) to avoid malfunctions in IE. Here is an example:

Left Column Renderer (mod-left-column.js):

YAHOO.util.Event.onAvailable('mod-left-column', function (el) {
  /* initialization process here */
});

In this case, we should include all the requirements before this block is executed.

In YUI 3.x, things are a lot easier. For example:

YUI({}).use('node', 'json', 'io', function(Y) {
  var node = Y.get('#mod-left-column');
  /* initialization process here */
});

Instead of including all the necessary requirements (modules) at the bootstrap level, YUI 3.x Loader will do it automatically during each region’s initialization process

Real examples:

• Simple implementation of the above example:
  http://bubbling-library.com/sandbox/yui2/bootstrap/index.html
• Simple implementation (experimental) on top of YUI 3 PR1:
  http://bubbling-library.com/sandbox/yui3/bootstrap/index.html

Final notes:

• The loader object can be used at any time, even during a region initialization part. It’s a good practice in YUI 2.x to have a single reference for the loader. With small changes in the code, we can easily share and re-use the “loader” object thru “YAHOO_config.loader“, across the application.
• CSS files can be loaded thru YUI Loader or YUI Get Utility in the same way as JavaScript files.
• For production, it’s a good practice to minimize the number of request (JavaScript files). In this case you can combine all the 3rd party modules in a single file, and even combine all the components/initializers/renderers in a single file.
• Using inline JavaScript blocks to initialize some of the regions is not a good option; they block the rendering of everything in the page.

More Information:

There are a lot of good articles about on-demand loading and how it helps to improve the performance, as well as its implications. Here are some of them:

• Conjuring YUI from thin air by Christian Heilmann
  http://www.wait-till-i.com/2008/08/02/conjuring-yui-from-thin-air/
• YUI Loader with Combo Handler by Eric Miraglia
  http://yuiblog.com/blog/2008/10/17/loading-yui/
• Loading Scripts Without Blocking by Steve Souders
  http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking
• Positioning Inline Scripts by Steve Souders
  http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/

There are two different ways to define a keylistener in YUI3:

Considering that in YUI3 most of the DOM references are YUI Node objects, using the ‘on’ method for a node object is the most reasonable approach for all kind of listeners, including keylistener.

YUI().use("node", function(Y) {
	Y.get('#my-input-element').on("keypress",  function(e) {
		console.log('keypress when the focus is on the input element');
	});
});

We can use ‘keydown’ or ‘keyup’ to be more specific in the definition.

http://developer.yahoo.com/yui/3/api/Node.html#method_on

Also, we can use the traditional way:

YUI().use("*", function(Y) {
	Y.on('keydown', function(e) {
		console.log('keydown when the focus is on the input element');
	}, '#my-input-element');
});

or we can use the event name ‘key’ and using the 4th argument to be more specific in the event definition, check this example:

YUI().use("*", function(Y) {
	Y.on('key', function(e) {
		console.log('keydown when the focus is on the input element');
	}, '#my-input-element',  'down', Y);
});

http://developer.yahoo.com/yui/3/api/YUI.html#method_on

We can also use [press] or [up], or we can be even more specific describing which key combination we want to listen for, like this combination: [press:65,66+shift+ctrl], this event definition will fire only if keyCode 65 or 66 is detected during a keypress event while shift and control are held down.

Check this advanced example:

YUI().use("*", function(Y) {
	Y.on('key', function(e, myInt, myString, myArray, myObj) {
		console.log('keydown when the focus is on the input element');
	}, '#my-input-element',  'down:65,12,13+shift', Y, 1, '2', [3], {indx:4});
});

In this example, we have a definition for keydown for keyCodes 65, 12 or 13, plus the shift key held down at the same time. The 5th argument represents the execution context (Y), and the rest of the arguments will be passed thru the handler method. More information about this feature here:

http://developer.yahoo.com/yui/3/event/#keylistener

Of course, we can add this kind of event to any DOM element/tag, but it only makes sense if the event can get the focus, usually all kind of form input fields, anchors, images, buttons, etc.

Controlling the event propagation and the default behavior:

YUI3 controls all the events in the same way, wrapping the event object (variable ‘e’ passed thru the handler function) into a more consistent object. This feature allows us to control the object propagation easily. We can use preventDefault and stopPropagation directly, instead of invoking YAHOO.util.Event.stopPropagation or YAHOO.util.Event.preventDefault as we used to do in YUI2.x. Here is a very simple example:

YUI().use("node", function(Y) {
	Y.get('#my-input-element').on("keyup",  function(e) {
		e.preventDefault();
		console.log('the input element never receives this event.');
	});
});

http://developer.yahoo.com/yui/3/api/Event.Facade.html#method_preventDefault

Global keystroke events:

We can also listen for global events. Defining a listener for an especial element called ‘document‘, we will receive a notification for every keystroke.

YUI().use("node", function(Y) {
	Y.get('document').on("keyup",  function(e) {
		console.log('global keyup');
	});
});

http://developer.yahoo.com/yui/3/api/Node.html#method_Y.get

Simulating keystroke events:

Another feature, and this one is new in YUI3, is the event simulation, which means you can simulate user actions like clicks and keystrokes. I hope you don’t need to use it, because I really think that with a good design you don’t need to use this feature other than in a js unit test, but just in case, here is an example:

YUI().use("event-simulate", function(Y) {
	var element = document.getElementById("custom-input-element");
	//simulate a keystroke with Ctrl key down
	Y.Event.simulate(element, "keyup", { keyCode: 65, ctrlKey: true });
});

http://developer.yahoo.com/yui/3/api/Event.html#method_simulate

Examples:

Click here to see a very simple sample of how to use all these concepts.

One final note: some of these concepts can change in the future (examples based on YUI3 PR2).

Also, considering the momentum of the YUI Dispatcher Plugin, and the number of requests, I’m writing the new version of the dispatcher as an stand alone plugin for YUI 3.x. This new plugin should be ready in the next few weeks.

I apologize for the delay between the bubbling 1.5 and 2.x, and specially because of the official examples list (still working on it), but now I’m on the right track again.

The source code and the examples are now on GitHub. Feel free to pull the source from Git.

Unfortunately I was unable to do it during 2008, I moved up to Miami, I got a full time job at Yahoo!, which required time to get up to speed.

Now that everything is back to normally, I want to start blogging here. Also I want to keep blogging at YUIBlog.com from time to time, specially for long post related with the YUI.

The plan is to post twice a week, let’s see what comes.