Jenny Donnelly

1,758 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,758
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jenny Donnelly

  1. 1. Bringing Data To Lifein the Browser<br />Jenny Han Donnelly<br />YUI Library<br />
  2. 2.
  3. 3.
  4. 4. Abstract data retrieval to support the mix-and-match of transports and formats<br />
  5. 5. 101010101010101010101010101010<br />transport<br />parse<br />normalize<br />
  6. 6. The DataSource is YUI&apos;s data retreival<br />abstraction layer.<br />
  7. 7. Data Transports<br />Local<br />Application data<br />External sources<br />
  8. 8. Data Formats<br />Arrays<br />Hashes<br />Markup<br />XML<br />JSON<br />JSONP<br />Delimited text<br />
  9. 9.
  10. 10. Using YAHOO.util.DataSource<br />The transport<br />The response format<br />The schema<br />
  11. 11. DataSource provides a<br />consistent, predictable API to the data.<br />
  12. 12. DataSource subclasses<br />LocalDataSource<br />XHRDataSource<br />ScriptNodeDataSource<br />FunctionDataSource<br />
  13. 13. DataSource responseType<br />TYPE_JSARRAY <br />TYPE_JSON <br />TYPE_XML<br />TYPE_TEXT <br />TYPE_HTMLTABLE<br />
  14. 14. {&quot;query&quot;: <br /> {&quot;count&quot;:&quot;44&quot;, &quot;created&quot;:&quot;2009-09-10T01:08:04Z&quot;, <br /> &quot;lang&quot;: &quot;en-US&quot;, &quot;updated&quot;:&quot;2009-09-10T01:08:04Z&quot;,<br /> &quot;results&quot;: {<br /> &quot;Result&quot;: [<br /> {&quot;id&quot;:&quot;28787054&quot;,<br /> &quot;Title&quot;:&quot;Jinmi Restaurant&quot;,<br /> &quot;Address&quot;:&quot;1627 Hollenbeck Ave&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;, State:&quot;CA&quot;,<br /> &quot;Latitude&quot;:&quot;xyz&quot;, &quot;Longitude&quot;:&quot;abc&quot;,<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;4&quot;, &quot;TotalRatings&quot;:&quot;5&quot;} <br /> },<br /> {&quot;id&quot;:&quot;21323987&quot;,<br /> &quot;Title&quot;:&quot;Totoro&quot;,<br /> &quot;Address&quot;:&quot;841 Villa St &quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;, State:&quot;CA&quot;,<br /> &quot;Latitude&quot;:&quot;xyz&quot;, &quot;Longitude&quot;:&quot;abc&quot;,<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;5&quot;, &quot;TotalRatings&quot;:&quot;9&quot;} <br /> },<br /> ...<br /> ]<br /> }<br /> }<br />}<br />{&quot;results&quot;: <br /> [<br /> {&quot;Title&quot;:&quot;Jinmi Restaurant&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;,<br /> &quot;Phone&quot;:&quot;(408) 481-0709&quot;,<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;4&quot;} <br /> },<br /> {&quot;Title&quot;:&quot;Totoro&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;,<br /> &quot;Phone&quot;:&quot;(408) 481-0709&quot;,<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;5&quot;} <br /> },<br /> ...<br /> ]<br />}<br />
  15. 15. var ds = new YAHOO.util.LocalDataSource(portfolio);<br />ds.responseType = YAHOO.util.DataSource.<br /> TYPE_JSARRAY;<br />ds.responseSchema = [<br /> fields: [&quot;company&quot;, &quot;cost&quot;, &quot;shares&quot;, &quot;symbol&quot;, &quot;value&quot;]<br />];<br />
  16. 16. DataSources easily interface with<br />AutoCompletes, Charts, and<br />DataTables.<br />
  17. 17. var chart = new YAHOO.widget.Chart<br /> (&quot;chart&quot;, ds, {...});<br />var ac = new YAHOO.widget.AutoComplete(&quot;input&quot;, &quot;suggestions&quot;, ds, {...});<br />var dt = new YAHOO.widget.DataTable(&quot;container&quot;, cols, ds, {...});<br />
  18. 18. protocol<br />The data transaction lifecycle<br />datasource<br />cache<br />data<br />widget<br />requestEvent<br />cacheRequestEvent<br />cacheResponseEvent<br />responseEvent<br />doBeforeParseData<br />doBeforeCallback<br />responseEvent<br />
  19. 19. Performance considerations<br />Keep it local<br />Or enable caching<br />ds.maxCacheEntries = 100;<br />Perform cacheable data transformations with doBeforeParseData() or doBeforeCallback()<br />Keep request queries consistent<br />
  20. 20.
  21. 21. {&quot;query&quot;: <br /> {&quot;count&quot;:&quot;44&quot;, &quot;created&quot;:&quot;2009-09-10T01:08:04Z&quot;, <br /> &quot;lang&quot;: &quot;en-US&quot;, &quot;updated&quot;:&quot;2009-09-10T01:08:04Z&quot;,<br /> &quot;results&quot;: {<br /> &quot;Result&quot;: [<br /> {&quot;id&quot;:&quot;28787054&quot;,<br /> &quot;Title&quot;:&quot;Jinmi Restaurant&quot;,<br /> &quot;Address&quot;:&quot;1627 Hollenbeck Ave&quot;, ...<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;4&quot;, &quot;TotalRatings&quot;:&quot;5&quot;} <br /> },<br /> {&quot;id&quot;:&quot;21323987&quot;,<br /> &quot;Title&quot;:&quot;Totoro&quot;,<br /> &quot;Address&quot;:&quot;841 Villa St &quot;, ...<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;5&quot;, &quot;TotalRatings&quot;:&quot;9&quot;} <br /> },<br /> ...<br /> ]<br /> }<br /> }<br />}<br />
  22. 22. var myDS = new YAHOO.util.ScriptNodeDataSource(&quot;http://query.yahooapis.com/v1/public/yql?format=json&quot;);<br />myDS.responseType = YAHOO.util.DataSource.TYPE_JSON;<br />myDS.responseSchema = {<br /> resultsList:&quot;query.results.Result&quot;,<br /> fields: [&quot;Title&quot;, &quot;City&quot;, &quot;Phone&quot;, &quot;Rating.AverageRating&quot;]<br />};<br />
  23. 23. var columns = [<br /> {key:&quot;Title&quot;},<br /> {key:&quot;City&quot;},<br /> {key:&quot;Phone&quot;},<br /> {key:&quot;Rating.AverageRating&quot;}<br />];<br />var myDT = new YAHOO.widget.DataTable(&quot;datatable&quot;, columns, myDS, {initialRequest: &quot;&q=select * from local.search(0) where query=&apos;korean restaurant&apos; and location=&apos;sunnyvale, ca&apos;&quot;});<br />
  24. 24.
  25. 25. &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;query xmlns:yahoo=&quot;http://www.yahooapis.com/v1/base.rng&quot; yahoo:count=&quot;44&quot; yahoo:created=&quot;2009-09-10T06:00:20Z&quot; yahoo:lang=&quot;en-US&quot; yahoo:updated=&quot;2009-09-10T06:00:20Z&quot;&gt;<br /> &lt;results&gt;<br /> &lt;Result xmlns=&quot;urn:yahoo:lcl&quot; id=&quot;28787054&quot;&gt;<br /> &lt;Title&gt;Jinmi Restaurant&lt;/Title&gt;<br /> &lt;Address&gt;1627 Hollenbeck Ave&lt;/Address&gt;<br /> ...<br /> &lt;Rating&gt;<br /> &lt;AverageRating&gt;4&lt;/AverageRating&gt;<br /> &lt;TotalRatings&gt;5&lt;/TotalRatings&gt;<br /> &lt;/Rating&gt;<br /> &lt;/Result&gt;<br /> &lt;Result xmlns=&quot;urn:yahoo:lcl&quot; id=&quot;21323987&quot;&gt;<br /> &lt;Title&gt;Totoro&lt;/Title&gt;<br /> &lt;Address&gt;841 Villa St&lt;/Address&gt;<br /> ...<br /> &lt;Rating&gt;<br /> &lt;AverageRating&gt;5&lt;/AverageRating&gt;<br /> &lt;TotalRatings&gt;10&lt;/TotalRatings&gt;<br /> &lt;/Rating&gt;<br /> &lt;/Result&gt;<br /> ...<br /> &lt;/results&gt;<br />&lt;/query&gt;<br />
  26. 26. var myDS = new YAHOO.util.ScriptNodeDataSource(&quot;http://query.yahooapis.com/v1/public/yql?format=xml&quot;);<br />myDS.responseType = YAHOO.util.DataSource.TYPE_XML;<br />myDS.responseSchema = {<br />resultNode:&quot;Result&quot;,<br /> fields: [&quot;Title&quot;, &quot;City&quot;, &quot;Phone&quot;, &quot;Rating.AverageRating&quot;]<br />};<br />
  27. 27. {&quot;results&quot;: <br /> [<br /> {&quot;Title&quot;:&quot;Jinmi Restaurant&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;,<br /> &quot;Phone&quot;:&quot;(408) 481-0709&quot;,<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;4&quot;} <br /> },<br /> {&quot;Title&quot;:&quot;Totoro&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;,<br /> &quot;Phone&quot;:&quot;(408) 481-0709&quot;,<br /> &quot;Rating&quot;:{&quot;AverageRating&quot;:&quot;5&quot;} <br /> },<br /> ...<br /> ]<br />}<br />
  28. 28. Jinmi Restaurant|1627 Hollenbeck Ave|Sunnyvale|... <br />Totoro|841 Villa St|Mountain View|...<br />...<br />
  29. 29. var myDS = new YAHOO.util.ScriptNodeDataSource(&quot;http://query.yahooapis.com/v1/public/yql?format=text&quot;);<br />myDS.responseType = YAHOO.util.DataSource.TYPE_TEXT;<br />myDS.responseSchema = {<br />recordDelim : &quot; &quot;,<br /> fieldDelim : &quot;|&quot;,<br /> fields: [&quot;Title&quot;, &quot;City&quot;, &quot;Phone&quot;]<br />};<br />
  30. 30. {&quot;results&quot;: <br /> [<br /> {&quot;Title&quot;:&quot;Jinmi Restaurant&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;,<br /> &quot;Phone&quot;:&quot;(408) 481-0709&quot;} <br /> },<br /> {&quot;Title&quot;:&quot;Totoro&quot;,<br /> &quot;City&quot;:&quot;Sunnyvale&quot;,<br /> &quot;Phone&quot;:&quot;(408) 481-0709&quot;} <br /> },<br /> ...<br /> ]<br />}<br />
  31. 31. 101010101010101010101010101010<br />transport<br />parse<br />normalize<br />
  32. 32. YUI 3<br />http://developer.yahoo.com/yui/theater/<br />
  33. 33.
  34. 34. Image Credits<br />http://www.flickr.com/photos/dan4th/301092024/<br />http://www.sxc.hu/photo/465451<br />http://www.sxc.hu/photo/548373<br />http://www.flickr.com/photos/wilhei/109403331/<br />http://www.flickr.com/photos/wilhei/109403357/<br />http://www.yuiblog.com/blog/2009/08/10/in-the-wild-for-august-10-2009/<br />http://yuiblog.com/blog/2009/04/23/wild-20090423<br />http://www.yuiblog.com/blog/2009/07/31/implementation-focus-short-reckonings/<br />http://www.yuiblog.com/blog/2009/05/26/in-the-wild-for-may-26-2009/<br />
  35. 35. Thanks!<br />

×