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/

Live Demo

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