TipTheWeb.org - Heavy Duty YUI 3 & YQL

3,937 views

Published on

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/

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,937
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
23
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

TipTheWeb.org - Heavy Duty YUI 3 & YQL

  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

×