1. HackU 2013
University of Dundee
February 2013

2. What exactly is YUI?!?
HackU 2013 – University of Dundee

3. A Javascript Library or a Japanese singer?
More than just a library, it has become a
full-fledged CSS & Javascript framework
HackU 2013 – University of Dundee

4. How does it compare to JQuery?
HackU 2013 – University of Dundee

5. Let’s go through their features
Feature YUI JQuery Alternative (not exhaustive list)
DOM Manipulation 1 1
AJAX requests 1 1
Event binding 1 1
Model-View-Controller 1 0 Backbone.js
URL Router 1 0 Path.js / Crossroads.js
Viewstate history 1 0 Backbone.js
Charting 1 0 Flot
Client-side templating 1 0 Underscore
Advanced object manipulation 1 0 Underscore
HackU 2013 – University of Dundee

6. …and the list goes on
Feature YUI JQuery Alternative (not exhaustive list)
Asynchronous modules loading 1 0 Require.js
Custom builds 1 0
Table sorting 1 0 Datatables
CSS Scaffolding 1 0 Twitter’s Bootstrap
Cross-browser CSS initializer 1 0 Reset CSS
Native YQL support 1 0
Tabbed views 1 0 Twitter’s Bootstrap
Widgets (tab-views, color/datepicker) 1 0 JQuery UI
Colorpicker widget 1 0 JQuery UI
etc…
HackU 2013 – University of Dundee

7. One last fundamental difference…
§ Every bit of code is sandboxed ie. wrapped in the YUI().use method
§ Limits conflicts with other frameworks/libraries. Only the YUI namespace is taken.
§ Variables inside the sandbox are ONLY available… inside the sandbox.
§ Creating a module is easy as a sandbox can easily be turned into a module:
§ Change the use method to the add one
§ Declare functions as methods
§ Give a name to your module
§ Specify its dependencies
§ Share it with the community!
HackU 2013 – University of Dundee

8. Let’s write some code!
§ Exercise: create HTML from an AJAX request & a template file
§ Skills: HTML, JS, YUI, AJAX, YUI’s Micro-templates
§ Modules we will use:
§ Node for DOM Manipulation
§ IO for making AJAX requests
§ Template for client-side templating
§ Console for debugging (to be removed in a production environment)
§ Step by step flow:
§ Initial HTML page is loaded
§ 1st AJAX request retrieves template source
§ The template source is compiled into a javascript function
§ 2nd AJAX request retrieves data in JSON format
§ Previous data is passed to the compiled function to generate the HTML code
§ New HTML code is inserted into the initial one.
HackU 2013 – University of Dundee

9. Project directory structure
§ index.html
§ js/
§ yui-min.js
§ models/
§ demo.json
§ …JSON files asynchronously loaded (could be from an external server through an API)
§ views/
§ list.handlebars
§ table.handlebars
§ …any other template file
HackU 2013 – University of Dundee

10. Code overview & demo time!
HackU 2013 – University of Dundee

11. With great power, comes… great hacks!
YUI is free so play with it and amaze us :)
(it’s also open-source so don’t hesitate to contribute to the Gallery)
HackU 2013 – University of Dundee

12. YUI Jedi links
User guides: http://yuilibrary.com/yui/docs/guides/
Full modules list: http://yuilibrary.com/yui/docs/yui/modules.html
Gallery of contributions: http://yuilibrary.com/gallery/
Demo Code: http://bit.ly/YDNHHd
HackU 2013 – University of Dundee