This document provides an overview of the Yahoo User Interface (YUI) framework. It discusses that YUI is a collection of JavaScript and CSS resources that simplifies building web applications by providing ready-to-use configurable components like data tables, charts, dialog boxes and widgets. It introduces the YUI global object as the starting point and dependency for all YUI implementations. It also describes how to include YUI on a page and the advantages of using the YUI global object like sandboxing and dynamic loading of modules. Finally, it compares YUI3 to YUI2 and highlights the changes like replacing the global YAHOO variable with YUI and improved modularity with the loader built into the core.
2. What?
Yahoo User Interface
Pronounced “Why-you-eye” or “yooey”
Launched in Feb 2006
It is a collection of javascript and css resources
Simplifies building web applications
Provides ready to use, configurable components
such as datatable, charts, dialog boxes and other
widgets.
3. YUI global object
Starting point of YUI
Dependency for all YUI implementation
Instantiable object- can create as many instances
as we need
5. Putting YUI on Page (1/3)
YUI().use('node', function(Y) {
Y.Node.get('#demo');
});
<script type="text/javascript" src="http://
yui.yahooapis.com/combo?3.0.0pr1/build/oop/oop-
min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/
build/dom/dom-min.js&3.0.0pr1/build/node/node-
min.js"></script>
REUSE : If any of the modules is already present on the page,
then http request is not send
8. YUI global object: Advantages
Instance based: Sandboxing
o Each instance is separate
o Multiple applications per page
o Secure mashups
Dynamic
o Since loader is built into core so we don’t have
to statically include all modules
Namespace – Avoiding naming conflict
10. Global Variable
YAHOO replaced by YUI
Reasons:
Some people don’t like YAHOO in their code
Both the YUI 2 and YUI 3 code can co exist
11. Modularity
Modularity is good but “Sub Modularity” is better.
Datasource
Y UI 2
Y UI 3
Datasource Datasource Datasource Datasource Datasource Datasource
io Local P olling Get jsonschema function
12. Loader
In YUI 3 the loader is built into the core.
In YUI 2, we have a loader utility:
var loader = new YAHOO.util.YUILoader();