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/

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

2. Community-Supported
Web Publishing

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

4. Live Demo

5. YUI 3 at TipTheWeb

6. A Lot of YUI 3
56YUI 3 Modules

7. http://www.flickr.com/photos/curiousexpeditions/489992128/

8. Top-Level Components
• Manage interactions within page
• Extends Y.Base uses ATTRS, Custom Events
•Y.BaseComponentMgr
•Y.Resource

9. Component Management
• Y.Base extension
• Adds COMPONENTS to Y.Base, think ATTRS
• Dependencies & Instances on-demand
• this.useComponent('foo', callback);

10. 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));

11. RESTful Client
• RESTful HTTP semantics
• JSON in, JSON out
• Resource-scoped Events

12. 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
! ! !
! ! }
! }
});

13. Lots of Overlays

14. Overlay Extras
• Y.Plugin.OverlayModal
• Y.Plugin.OverlayKeepaligned
• Y.Plugin.OverlayAutohide

15. YQL at TipTheWeb

16. 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

17. URL Processing — Targeting Tips

18. 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"

19. Determine Integration, If Any
http://bit.ly/Bb6g0
bit.ly Matches?

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

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

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

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

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

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

26. Determine Integration, If Any
http://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");

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

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

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

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

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

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

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

34. • 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"
}

35. 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

36. 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

37. 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;
!
});

38. http://www.flickr.com/photos/monkeyc/231565309/

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

40. Timeout
• Preventing table lock!
• request.timeout(25000);
• y.rest(url).timeout(25000);
• y.query(query, params, 25000);

41. 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 );
! ! }
! };
}());

42. Summary
• YUI 3 & YQL— enabling small teams
• YUI 3 top-level components
• YQL— cache, timeout, access via browser

43. Invite Code: yuiconf
Eric Ferraiuolo
@ericf
http://tiptheweb.org