Your SlideShare is downloading. ×
0
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dundee University HackU 2013 - YUI

468

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HackU 2013University 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 frameworkHackU 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 UnderscoreHackU 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 fileHackU 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 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

×