HackU 2013 University of Dundee February 2013
May 26, 2015
HackU 2013 University of Dundee
February 2013
What exactly is YUI?!?
HackU 2013 – University of Dundee
A Javascript Library or a Japanese singer?
HackU 2013 – University of Dundee
More than just a library, it has become a full-fledged CSS & Javascript framework
How does it compare to JQuery?
HackU 2013 – University of Dundee
Let’s go through their features
HackU 2013 – University of Dundee
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
…and the list goes on
HackU 2013 – University of Dundee
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…
One last fundamental difference…
HackU 2013 – University of Dundee
§ 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!
Let’s write some code!
HackU 2013 – University of Dundee
§ 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.
Project directory structure
HackU 2013 – University of Dundee
§ 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
Code overview & demo time!
HackU 2013 – University of Dundee
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
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