Successfully reported this slideshow.

Dundee University HackU 2013 - YUI

638 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×