Bringing Data To Lifein the Browser
Jenny Han Donnelly
YUI Library
Abstract data retrieval to support the mix-and-match of transports and formats
101010101010101010101010101010
1. transport2. parse3. normalize
The DataSource is YUI's data retreivalabstraction layer.
Data Transports
Local
Application data
External sources
Data Formats
Arrays
Hashes
Markup
XML
JSON
JSONP
Delimited text
Using YAHOO.util.DataSource
1. The transport
2. The response format
3. The schema
DataSource provides aconsistent, predictable API to the data.
DataSource subclasses
LocalDataSource
XHRDataSource
ScriptNodeDataSource
FunctionDataSource
DataSource responseType
TYPE_JSARRAY TYPE_JSON TYPE_XMLTYPE_TEXT TYPE_HTMLTABLE
{"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"} }, ... ]}
var ds = new YAHOO.util.LocalDataSource(portfolio);
ds.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
ds.responseSchema = [ fields: ["company", "cost", "shares", "symbol", "value"]
];
DataSources easily interface withAutoCompletes, Charts, andDataTables.
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, {...});
protocol
The data transaction lifecycle
widget
data
datasource
cache
responseEvent
requestEvent
doBeforeParseDatadoBeforeCallback
responseEvent
cacheRequestEventcacheResponseEvent
Performance considerations
Keep it local
Or enable cachingds.maxCacheEntries = 100;
Perform cacheable data transformations with doBeforeParseData() or doBeforeCallback()
Keep request queries consistent
{"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"}
}, ... ] } }}
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"]
};
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'"});
<?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>
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"]
};
{"results": [ {"Title":"Jinmi Restaurant", "City":"Sunnyvale", "Phone":"(408) 481-0709", "Rating":{"AverageRating":"4"} }, {"Title":"Totoro", "City":"Sunnyvale", "Phone":"(408) 481-0709", "Rating":{"AverageRating":"5"} }, ... ]}
Jinmi Restaurant|1627 Hollenbeck Ave|Sunnyvale|... Totoro|841 Villa St|Mountain View|......
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 : "\n", fieldDelim : "|", fields: ["Title", "City", "Phone"]};
{"results": [ {"Title":"Jinmi Restaurant", "City":"Sunnyvale", "Phone":"(408) 481-0709"} }, {"Title":"Totoro", "City":"Sunnyvale", "Phone":"(408) 481-0709"} }, ... ]}
101010101010101010101010101010
1. transport2. parse3. normalize
YUI 3
http://developer.yahoo.com/yui/theater/
0
5
10
15
20
25
30
35
KW
eig
ht
(min
, n
on
-gzi
p)
YUI 2 YUI 3 (rollup) YUI 3 (opt)
cache
datatype-xml
datatype-date
datatype-number
dataschema-text
dataschema-xml
dataschema-json
dataschema-array
dataschema-base
ds-textschema
ds-xmlschema
ds-jsonschema
ds-arrayschema
ds-polling
ds-cache
ds-function
ds-get
ds-io
ds-local
datasource
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/
Thanks!