TipTheWeb.org - Heavy Duty YUI 3 & YQL
43
Heavy Duty YUI 3 & YQL Eric Ferraiuolo @ericf http://tiptheweb.org
-
Upload
eric-ferraiuolo -
Category
Technology
-
view
2.218 -
download
2
description
A look at TipTheWeb (with live demo action), digging into how we built our web application's rich UI on YUI 3 — the project-scale codebase, strategies developed, and YUI Gallery modules that came out of it. Followed up with a dive into TipTheWeb's advanced usage of YQL to process our most important data, URLs; making YQL the place where web service requests are made and data is gathered. http://tiptheweb.org/
Transcript of TipTheWeb.org - Heavy Duty YUI 3 & YQL
Heavy Duty YUI 3 & YQL
Eric Ferraiuolo@ericf
http://tiptheweb.org
Community-SupportedWeb Publishing
http://www.flickr.com/photos/alper/4094452745/
YUI 3 at TipTheWeb
A Lot of YUI 3
56YUI 3 Modules
http://www.flickr.com/photos/curiousexpeditions/489992128/
Top-Level Components
• Manage interactions within page
• Extends Y.Base uses ATTRS, Custom Events
•Y.BaseComponentMgr
•Y.Resource
Component Management
• Y.Base extension
• Adds COMPONENTS to Y.Base, think ATTRS
• Dependencies & Instances on-demand
• this.useComponent('foo', callback);
Y.BaseComponentMgr Example
// Defined staticallyCOMPONENTS : {! myOverlay : {! ! requires : ['overlay', 'gallery-overlay-extras'],! ! initializer : '_initMyOverlay'! }}
// …Somewhere elseY.one('#show').on('click', Y.bind(function(e){ this.useComponent('myOverlay', function(overlay){ overlay.show(); });}, this));
RESTful Client
• RESTful HTTP semantics
• JSON in, JSON out
• Resource-scoped Events
Y.Resource Example
var r = new Y.Resource({ uri: 'path/to/{id}' });
r.GET({! // makes request to: path/to/123! params!: { id: 123 },! on!: {! ! success : function(e){! !! ! ! // e.entity is an Object parsed from JSON! ! !! ! }! }});
Lots of Overlays
Overlay Extras
• Y.Plugin.OverlayModal
• Y.Plugin.OverlayKeepaligned
• Y.Plugin.OverlayAutohide
YQL at TipTheWeb
URLs
• http://925html.com/code/photos-around-you/
• http://www.flickr.com/photos/37592789@N00/5095656356/
• http://www.flickr.com/photos/fwiltrakis/5095656356/
• http://www.youtube.com/watch?v=8410qUT4QtA
• http://bit.ly/Bb6g0
URL Processing — Targeting Tips
Example: http://bit.ly/Bb6g0
1. Determine Integration, If Any
2. Gather URL Data
3. Cache & Return Results
SELECT * FROM targetresolver WHERE url="http://bit.ly/Bb6g0"
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
No, Request Page
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
No, Request Page
SELECT url FROM docresolverWHERE url="http://bit.ly/Bb6g0"
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
Redirected?
No, Request Page
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
Redirected?
No, Request Page
Yes, http://www.youtube.com/watch?v=8410qUT4QtA
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
Redirected?
No, Request Page
Yes, http://www.youtube.com/watch?v=8410qUT4QtA
youtube.com Matches?
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
Redirected?
No, Request Page
Yes, http://www.youtube.com/watch?v=8410qUT4QtA
youtube.com Matches?
Yes, Load Integration
Determine Integration, If Anyhttp://bit.ly/Bb6g0
bit.ly Matches?
Redirected?
No, Request Page
Yes, http://www.youtube.com/watch?v=8410qUT4QtA
youtube.com Matches?
Yes, Load Integration
y.include("store://youtube.js");
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Yes, 8410qUT4QtA
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Is YouTube Video?
Yes, 8410qUT4QtA
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Is YouTube Video?
Yes, 8410qUT4QtA
SELECT title, author FROM youtube.videoswhere id="8410qUT4QtA"
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Is YouTube Video?
Yes, 8410qUT4QtA
Yes, Valid YouTube Video
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Is YouTube Video?
Yes, 8410qUT4QtA
Yes, Valid YouTube Video
Gather Video MetaData
Gather URL Datahttp://www.youtube.com/watch?v=8410qUT4QtA
Matches Video URL?
Is YouTube Video?
Yes, 8410qUT4QtA
Yes, Valid YouTube Video
Gather Video MetaData
{"author": "…","title": "…"
}
• Cache Result for 1 hour
• Return Target Data:
Cache & Return Results
{! "link"! : "http://www.youtube.com/watch?v=8410qUT4QtA",! "title"!: "Chicken Techno by Oli Chang",! "target": "youtube:unicornhunters"}
Requests Made By YQL
1. Requested: http://bit.ly/Bb6g0
2. Redirected: http://www.youtube.com/watch?v=8410qUT4QtA
3. Included: store://youtube.js
4. Requested: Google GData Video Feed
YQL via the Browser
• Thick-clients can do real work
• Off-load YQL requests
• Rate limits become a non-issue
• Server’s resources freed-up
YQL via YUI 3
• Spread load and rate limits to browsers
• Guinea pig for Dav Glass’ YQL module for YUI
• Y.YQL(query, callback);
Y.YQL('SELECT * FROM targetresolver WHERE url="…"', ! function(r) {!! var results = r.query.results;!});
http://www.flickr.com/photos/monkeyc/231565309/
• Cached results are not rate limited!
• ?_maxage=3600
• response.maxAge=3600;
Caching
Timeout
• Preventing table lock!
• request.timeout(25000);
• y.rest(url).timeout(25000);
• y.query(query, params, 25000);
timer.getRemaining()
timer = (function(){! timeout = timeout > 29000 ? 29000 : timeout;! var start = new Date().getTime();!! return {! ! getRemaining : function () {! ! ! var now = new Date().getTime(),! ! ! ! elapsed = now - start,! ! ! ! remaining = timeout - elapsed;! ! ! !! ! ! return ( remaining > 0 ? remaining : 0 );! ! }! };}());
Summary
• YUI 3 & YQL— enabling small teams
• YUI 3 top-level components
• YQL— cache, timeout, access via browser
Invite Code: yuiconf
Eric Ferraiuolo@ericf
http://tiptheweb.org
