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.

1. Aditya Gaur
Mentor: Apurba Nath

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

4. Putting YUI on Page (1/3)
<script type="text/javascript"
src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-
min.js"></script>
anim dd
Y UI Object
+ http request
Loader Utility
node json

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

6. Putting YUI on Page (2/3)
<script type="text/javascript"
src="http://yui.yahooapis.com/3.0.0pr1/combo?build/yui/yui-
base.js"></script>
anim dd
Y UI Object Loader
http request Utility http request
node json

7. Putting YUI on Page (3/3)
The Classical way:
<script type="text/javascript" src="http://
yui.yahooapis.com/combo?3.0.0pr1/build/yui-base/yui-
base-min.js&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>
YUI().use('*', function(Y) {
Y.get('#demo');
});

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

9. YUI3 vs YUI2

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();

13. Loader (YUI 2)
Module 1
<script src="module1.js"></script>
<script src="module1.js"></script> Module 2
Module 3
<script src="module1.js"></script>

14. Loader (YUI 3)
YUI().use("module1“, "module2“ , "module3“,)
Y UI seed file
Module 1 Module 2 Module 3

15. That’s it for YUI

16. mViewer Updates
mViewer

17. Thank You