Jenny Donnelly

  • View
    1.416

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Transcript

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

2. 3. 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
9. 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
20. 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'"});
24. 25.



Jinmi Restaurant
1627 Hollenbeck Ave
...

4
5



Totoro
841 Villa St
...

5
10


...


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/
33. 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!