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