1. Bringing Data To Lifein the Browser Jenny Han Donnelly YUI Library

4. Abstract data retrieval to support the mix-and-match of transports and formats

5. 101010101010101010101010101010 transport parse normalize

6. The DataSource is YUI's data retreival abstraction layer.

7. Data Transports Local Application data External sources

8. Data Formats Arrays Hashes Markup XML JSON JSONP Delimited text

10. Using YAHOO.util.DataSource The transport The response format The schema

11. DataSource provides a consistent, predictable API to the data.

12. DataSource subclasses LocalDataSource XHRDataSource ScriptNodeDataSource FunctionDataSource

13. DataSource responseType TYPE_JSARRAY TYPE_JSON TYPE_XML TYPE_TEXT TYPE_HTMLTABLE

14. {"query": {"count":"44", "created":"2009-09-10T01:08:04Z", "lang": "en-US", "updated":"2009-09-10T01:08:04Z", "results": { "Result": [ {"id":"28787054", "Title":"Jinmi Restaurant", "Address":"1627 Hollenbeck Ave", "City":"Sunnyvale", State:"CA", "Latitude":"xyz", "Longitude":"abc", "Rating":{"AverageRating":"4", "TotalRatings":"5"} }, {"id":"21323987", "Title":"Totoro", "Address":"841 Villa St ", "City":"Sunnyvale", State:"CA", "Latitude":"xyz", "Longitude":"abc", "Rating":{"AverageRating":"5", "TotalRatings":"9"} }, ... ] } } } {"results": [ {"Title":"Jinmi Restaurant", "City":"Sunnyvale", "Phone":"(408) 481-0709", "Rating":{"AverageRating":"4"} }, {"Title":"Totoro", "City":"Sunnyvale", "Phone":"(408) 481-0709", "Rating":{"AverageRating":"5"} }, ... ] }

15. var ds = new YAHOO.util.LocalDataSource(portfolio); ds.responseType = YAHOO.util.DataSource. TYPE_JSARRAY; ds.responseSchema = [ fields: ["company", "cost", "shares", "symbol", "value"] ];

16. DataSources easily interface with AutoCompletes, Charts, and DataTables.

17. var chart = new YAHOO.widget.Chart ("chart", ds, {...}); var ac = new YAHOO.widget.AutoComplete("input", "suggestions", ds, {...}); var dt = new YAHOO.widget.DataTable("container", cols, ds, {...});

18. protocol The data transaction lifecycle datasource cache data widget requestEvent cacheRequestEvent cacheResponseEvent responseEvent doBeforeParseData doBeforeCallback responseEvent

19. Performance considerations Keep it local Or enable caching ds.maxCacheEntries = 100; Perform cacheable data transformations with doBeforeParseData() or doBeforeCallback() Keep request queries consistent

21. {"query": {"count":"44", "created":"2009-09-10T01:08:04Z", "lang": "en-US", "updated":"2009-09-10T01:08:04Z", "results": { "Result": [ {"id":"28787054", "Title":"Jinmi Restaurant", "Address":"1627 Hollenbeck Ave", ... "Rating":{"AverageRating":"4", "TotalRatings":"5"} }, {"id":"21323987", "Title":"Totoro", "Address":"841 Villa St ", ... "Rating":{"AverageRating":"5", "TotalRatings":"9"} }, ... ] } } }

22. var myDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?format=json"); myDS.responseType = YAHOO.util.DataSource.TYPE_JSON; myDS.responseSchema = { resultsList:"query.results.Result", fields: ["Title", "City", "Phone", "Rating.AverageRating"] };

23. var columns = [ {key:"Title"}, {key:"City"}, {key:"Phone"}, {key:"Rating.AverageRating"} ]; var myDT = new YAHOO.widget.DataTable("datatable", columns, myDS, {initialRequest: "&q=select * from local.search(0) where query='korean restaurant' and location='sunnyvale, ca'"});

25. <?xml version="1.0" encoding="UTF-8"?> <query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng" yahoo:count="44" yahoo:created="2009-09-10T06:00:20Z" yahoo:lang="en-US" yahoo:updated="2009-09-10T06:00:20Z"> <results> <Result xmlns="urn:yahoo:lcl" id="28787054"> <Title>Jinmi Restaurant</Title> <Address>1627 Hollenbeck Ave</Address> ... <Rating> <AverageRating>4</AverageRating> <TotalRatings>5</TotalRatings> </Rating> </Result> <Result xmlns="urn:yahoo:lcl" id="21323987"> <Title>Totoro</Title> <Address>841 Villa St</Address> ... <Rating> <AverageRating>5</AverageRating> <TotalRatings>10</TotalRatings> </Rating> </Result> ... </results> </query>

26. var myDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?format=xml"); myDS.responseType = YAHOO.util.DataSource.TYPE_XML; myDS.responseSchema = { resultNode:"Result", fields: ["Title", "City", "Phone", "Rating.AverageRating"] };

27. {"results": [ {"Title":"Jinmi Restaurant", "City":"Sunnyvale", "Phone":"(408) 481-0709", "Rating":{"AverageRating":"4"} }, {"Title":"Totoro", "City":"Sunnyvale", "Phone":"(408) 481-0709", "Rating":{"AverageRating":"5"} }, ... ] }

28. Jinmi Restaurant|1627 Hollenbeck Ave|Sunnyvale|... Totoro|841 Villa St|Mountain View|... ...

29. var myDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?format=text"); myDS.responseType = YAHOO.util.DataSource.TYPE_TEXT; myDS.responseSchema = { recordDelim : "
", fieldDelim : "|", fields: ["Title", "City", "Phone"] };

30. {"results": [ {"Title":"Jinmi Restaurant", "City":"Sunnyvale", "Phone":"(408) 481-0709"} }, {"Title":"Totoro", "City":"Sunnyvale", "Phone":"(408) 481-0709"} }, ... ] }

31. 101010101010101010101010101010 transport parse normalize

32. YUI 3 http://developer.yahoo.com/yui/theater/

34. Image Credits http://www.flickr.com/photos/dan4th/301092024/ http://www.sxc.hu/photo/465451 http://www.sxc.hu/photo/548373 http://www.flickr.com/photos/wilhei/109403331/ http://www.flickr.com/photos/wilhei/109403357/ http://www.yuiblog.com/blog/2009/08/10/in-the-wild-for-august-10-2009/ http://yuiblog.com/blog/2009/04/23/wild-20090423 http://www.yuiblog.com/blog/2009/07/31/implementation-focus-short-reckonings/ http://www.yuiblog.com/blog/2009/05/26/in-the-wild-for-may-26-2009/

35. Thanks!