HackU 2013University of Dundee         February 2013
What exactly is YUI?!?HackU 2013 – University of Dundee
A Javascript Library or a Japanese singer? More than just a library, it has become a full-fledged CSS & Javascript framewo...
How does it compare to JQuery?HackU 2013 – University of Dundee
Let’s go through their features Feature                            YUI   JQuery   Alternative (not exhaustive list) DOM Ma...
…and the list goes on Feature                                 YUI   JQuery   Alternative (not exhaustive list) Asynchronou...
One last fundamental difference…§  Every bit of code is sandboxed ie. wrapped in the YUI().use method  §  Limits conflic...
Let’s write some code!§  Exercise: create HTML from an AJAX request & a template file§  Skills: HTML, JS, YUI, AJAX, YUI...
Project directory structure§  index.html§  js/  §  yui-min.js§  models/  §  demo.json  §  …JSON files asynchronously...
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 o...
YUI Jedi linksUser guides: http://yuilibrary.com/yui/docs/guides/Full modules list: http://yuilibrary.com/yui/docs/yui/mod...
Upcoming SlideShare
Loading in …5
×

Dundee University HackU 2013 - YUI

499
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
499
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dundee University HackU 2013 - YUI

  1. 1. HackU 2013University of Dundee February 2013
  2. 2. What exactly is YUI?!?HackU 2013 – University of Dundee
  3. 3. A Javascript Library or a Japanese singer? More than just a library, it has become a full-fledged CSS & Javascript frameworkHackU 2013 – University of Dundee
  4. 4. How does it compare to JQuery?HackU 2013 – University of Dundee
  5. 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 UnderscoreHackU 2013 – University of Dundee
  6. 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. 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. 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. 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 fileHackU 2013 – University of Dundee
  10. 10. Code overview & demo time!HackU 2013 – University of Dundee
  11. 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. 12. YUI Jedi linksUser guides: http://yuilibrary.com/yui/docs/guides/Full modules list: http://yuilibrary.com/yui/docs/yui/modules.htmlGallery of contributions: http://yuilibrary.com/gallery/Demo Code: http://bit.ly/YDNHHd HackU 2013 – University of Dundee

×