Rapid Implementation with
YUI + YQL
‘cause it’s your code that’s
important
Me.
YUI
• 2
• Around for a while
• Many widgets
• Adding scripts
manually
• Bigger initial load time
• 3
• Small loader, pull ...
YQL
• Cloud data store
• SQL-like syntax (select * from internet)
• REST
• YUI3 module built in
• Console
Puppies!
<html>
<head>
<title>YUI/YQL Flickr</title>
</head>
<body>
<div id="puppyBox">
<ul id="puppies"></ul>
</div>
</bo...
<body class="yui3-skin-sam">
<div id="puppyBox">
<ul id="puppies"></ul>
</div>
<script src="http://yui.yahooapis.com/3.2.0...
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-
min.js"></script>
<script>
YUI().use('yql', 'console', 'dump', ...
YUI().use('node', 'yql', 'substitute', function(Y) {
var flickr = {
template:
'http://farm{farm}.static.flickr.com/{server...
YUI().use('node', 'yql', 'substitute', function(Y) {
var flickr = {
template:
'http://farm{farm}.static.flickr.com/{server...
<html>
<head>
<title>YUI/YQL Flickr</title>
<style type="text/css">
.yui-carousel-element li { height: 75px; width: 75px; ...
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', 'yql', 'substitute'...
Upcoming SlideShare
Loading in …5
×

Rapid implementation with YUI + YQL

997 views

Published on

This is the presentation that I did at BarCamp Philadelphia. Mostly just a code buildup. The complete code, which is probably more interesting, is here:
https://gist.github.com/675645

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
997
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rapid implementation with YUI + YQL

  1. 1. Rapid Implementation with YUI + YQL ‘cause it’s your code that’s important
  2. 2. Me.
  3. 3. YUI • 2 • Around for a while • Many widgets • Adding scripts manually • Bigger initial load time • 3 • Small loader, pull in the modules you need • Granular • Fewer “native” widgets • Gallery 2-in-3: best of both!
  4. 4. YQL • Cloud data store • SQL-like syntax (select * from internet) • REST • YUI3 module built in • Console
  5. 5. Puppies! <html> <head> <title>YUI/YQL Flickr</title> </head> <body> <div id="puppyBox"> <ul id="puppies"></ul> </div> </body> </html> http://www.flickr.com/photos/archangel_raphael/ http://www.flickr.com/photos/fazen/
  6. 6. <body class="yui3-skin-sam"> <div id="puppyBox"> <ul id="puppies"></ul> </div> <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui- min.js"></script> <script> YUI().use('console', function(Y) { new Y.Console().render(); }); </script> </body>
  7. 7. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui- min.js"></script> <script> YUI().use('yql', 'console', 'dump', function(Y) { new Y.Console().render(); Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { Y.each(r.query.results.photo, function(photo) { puppy = Y.log('<li><img src="' + Y.dump(photo) + ‘" height="75" width="75"></li>'); }); }); }); </script>
  8. 8. YUI().use('node', 'yql', 'substitute', function(Y) { var flickr = { template: 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', createLink: function(pieces) { return(Y.substitute(this.template, pieces)); }, }; Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { var puppies = Y.one('#puppies'); Y.each(r.query.results.photo, function(photo) { puppy = Y.Node.create('<li><img src="' + flickr.createLink(photo) + '" height="75" width="75"></li>'); puppies.appendChild(puppy); }); }); });
  9. 9. YUI().use('node', 'yql', 'substitute', function(Y) { var flickr = { template: 'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', createLink: function(pieces) { return(Y.substitute(this.template, pieces)); }, createCarousel: function() { Y.use('yui2-carousel', function(YC) { var YAHOO = YC.YUI2, carousel = new YAHOO.widget.Carousel("puppyBox", { selectOnScroll: false, isCircular: true, carouselEl: 'UL' }); carousel.render(); carousel.show(); }); } }; ….
  10. 10. <html> <head> <title>YUI/YQL Flickr</title> <style type="text/css"> .yui-carousel-element li { height: 75px; width: 75px; } .yui-carousel-element .yui-carousel-item-selected { border: none; } </style> </head> <body class="yui3-skin-sam"> <div class="yui-skin-sam"> <div id="puppyBox"> <ul id="puppies"></ul> </div> </div>
  11. 11. <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> <script> YUI().use('node', 'yql', 'substitute', 'console', function(Y) { … Y.YQL('select * from flickr.photos.search(0,15) where text="puppy"', function(r) { var puppies = Y.one('#puppies'); Y.each(r.query.results.photo, function(photo) { puppy = Y.Node.create('<li><img src="' + flickr.createLink(photo) + '" height="75" width="75"></li>'); puppies.appendChild(puppy); }); flickr.createCarousel(); }); }); </script>

×