Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

TipTheWeb.org - Heavy Duty YUI 3 & YQL

on

  • 2,691 views

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

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/

Statistics

Views

Total Views
2,691
Views on SlideShare
2,674
Embed Views
17

Actions

Likes
4
Downloads
21
Comments
0

4 Embeds 17

http://lanyrd.com 14
http://www.linkedin.com 1
https://twitter.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Heavy Duty YUI 3 & YQL Eric Ferraiuolo http://tiptheweb.org @ericf
  • 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 56 YUI 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? No, Request Page Redirected?
  • 23. Determine Integration, If Any http://bit.ly/Bb6g0 bit.ly Matches? No, Request Page Redirected? Yes, http://www.youtube.com/watch?v=8410qUT4QtA
  • 24. 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
  • 25. 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
  • 26. 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
  • 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? Yes, 8410qUT4QtA Is YouTube Video?
  • 30. 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?
  • 31. Gather URL Data http://www.youtube.com/watch?v=8410qUT4QtA Matches Video URL? Yes, 8410qUT4QtA Is YouTube Video? Yes, Valid YouTube Video
  • 32. 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
  • 33. 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
  • 34. 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" }
  • 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. Caching • Cached results are not rate limited! • ?_maxage=3600 • response.maxAge=3600;
  • 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 http://tiptheweb.org @ericf