TipTheWeb.org - Heavy Duty YUI 3 & YQL

Heavy Duty YUI 3 & YQL Eric Ferraiuolo http://tiptheweb.org @ericf

Community-Supported Web Publishing

http://www.flickr.com/photos/alper/4094452745/

Live Demo

YUI 3 at TipTheWeb

A Lot of YUI 3 56 YUI 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 statically COMPONENTS : { ! myOverlay : { ! ! requires : ['overlay', 'gallery-overlay-extras'], ! ! initializer : '_initMyOverlay' ! } } // …Somewhere else Y.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 Any http://bit.ly/Bb6g0 bit.ly Matches?

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? No, Request Page

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? No, Request Page SELECT url FROM docresolver WHERE url="http://bit.ly/Bb6g0"

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? No, Request Page Redirected?

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? No, Request Page Redirected? Yes, http://www.youtube.com/watch?v=8410qUT4QtA

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? youtube.com Matches? No, Request Page Redirected? Yes, http://www.youtube.com/watch?v=8410qUT4QtA

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? youtube.com Matches? No, Request Page Yes, Load Integration Redirected? Yes, http://www.youtube.com/watch?v=8410qUT4QtA

Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? youtube.com Matches? No, Request Page Yes, Load Integration y.include("store://youtube.js"); Redirected? Yes, http://www.youtube.com/watch?v=8410qUT4QtA

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL?

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Yes, 8410qUT4QtA

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Yes, 8410qUT4QtA Is YouTube Video?

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Yes, 8410qUT4QtA SELECT title, author FROM youtube.videos where id="8410qUT4QtA" Is YouTube Video?

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Yes, 8410qUT4QtA Is YouTube Video? Yes, Valid YouTube Video

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Gather Video MetaData Yes, 8410qUT4QtA Is YouTube Video? Yes, Valid YouTube Video

Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Gather Video MetaData Yes, 8410qUT4QtA { "author": "…", "title": "…" } Is YouTube Video? Yes, Valid YouTube Video

Cache & Return Results • Cache Result for 1 hour • Return Target Data: { ! "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/

Caching • Cached results are not rate limited! • ?_maxage=3600 • response.maxAge=3600;

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 http://tiptheweb.org @ericf

TipTheWeb.org - Heavy Duty YUI 3 & YQL

by Eric Ferraiuolo on Nov 09, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 14

Statistics

TipTheWeb.org - Heavy Duty YUI 3 & YQL Presentation Transcript