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!