browser mvc with yql and yui
DESCRIPTION
YQL is a highly rich and dynamic utility for capturing data from any place on the web. When we couple this functionality with YUI we have wonderful functionality for designing apps and sites easily and that scale around MVC design patterns.TRANSCRIPT
Browser MVC with YQL and YUI
Jonathan LeBlanc
Technology Evangelist
Yahoo! Developer Network
Twitter: @jcleblanc
2
Geo Maker
Available At: http://icant.co.uk/geomaker/index.php
3
Yahoo! Social Updates
Available At:
www.nakedtechnologist.com/
php_widget_oauth/
yql_php_widget.html
4
Christian Heilmann’s Website
Available At: http://icant.co.uk/
5
Fetching Dynamic Data with YQL Browser MVC Model Component
6
7
YQL Query Structure SELECT * FROM Internet
8
YQL Test Console
Available At: http://developer.yahoo.com/yql/console
9
SELECT myColumn, myTitle FROM myTable WHERE myColumn = 'value' AND myTitle = 'title‘
LIMIT 3 OFFSET 10
Running Queries - SELECT Query Structure
10
Modify Data on the InternetCreate Tweets, Add Blog Entries, Update Databases
Current Tables Using I/U/DTwitter Status, bit.ly URL Shortner, Yahoo! Profile Status / Update Stream, Amazon SimpleDB
Running Queries - INSERT / UPDATE / DELETE
11
INSERT INTO bitly.shorten (login, apiKey, longUrl)
VALUES (’ME', 'API_KEY', 'http://yahoo.com')
Running Queries - INSERT Query Structure
12
UPDATE social.profile.status
SET status="Using YQL UPDATE"
WHERE guid=“NJFIDHVPVVISDXZKT7UKED2WHU”
Running Queries - UPDATE Query Structure
13
DELETE FROM twittertable
WHERE tweetid="12345" AND username="twitter_username" AND password="twitter_password
Running Queries - DELETE Query Structure
14
SELECT * FROM flickr.photos.search
WHERE (lat, lon)
IN (SELECT centroid.latitude, centroid.longitude FROM geo.places WHERE text="SFO")
Running Queries – Sub-selects with the IN clause
15
Running Queries – Available Tables
YQL Command: SHOW Tables
Number of Standard Tables: 105
Number of Community Tables: 600
Total Number of Tables: 705
Contribute Tables to:
http://www.github.com/yql/yql-tables/
16
Running Queries – Table Syntax
YQL Command: DESC tablename
17
Running Queries – URL Format
http://query.yahooapis.com/v1/yql?[params]
http://query.yahooapis.com/v1/public/yql?[params]
Params• q=[QUERY]• format=[XML / JSON] • diagnostics=[true / false]• debug=[true / false]• env=[.env file link]• callback=[function name]
18
http://query.yahooapis.com/v1/yql?[params]
http://query.yahooapis.com/v1/public/yql?[params]
Params• q=[QUERY]• format=[XML / JSON / JSONP / JSONP-X]• diagnostics=[true / false]• debug=[true / false]• env=[.env file link]• callback=[function name]
Running Queries – URL Format
19
YQL Open Data Tables Wrap Your Own API or Data Source
20
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings></bindings>
</table>
Open Data Tables – XML File Syntax
21
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings></bindings>
</table>
Open Data Tables – XML File Syntax
22
<?xml version="1.0" encoding="UTF-8"?><table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta> <author>Jonathan LeBlanc</author> <description>My Table</description> <documentationURL>www.site.com</documentationURL>
<sampleQuery>SELECT * FROM {table} </sampleQuery> </meta> <bindings></bindings></table>
Open Data Tables – XML File Syntax
23
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings></bindings>
</table>
Open Data Tables – XML File Syntax
24
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings>
<select itemPath="" produces="XML" >
<urls>
<url env="all”>http://www.site.com/{user}</url>
</urls>
<inputs>
<key id="user" type="xs:string" paramType="path"
required="true" /> </inputs>
</select>
</bindings>
</table>
Open Data Tables – XML File Syntax
25
The USE clause
USE 'http://github.com/yql/yql-tables/raw/master/google/google.buzz.updates.xml'
AS buzz.updates;
SELECT * FROM buzz.updates
WHERE user='nakedtechnologist'
Open Data Tables – Invoking a Table Definition
Google Buzz Table
Available At: http://github.com/yql/yql-tables
27
YQL Execute Extending Open Data Tables
28
Augment data- city / state to APIs that just return zip code
Create APIs from web pages- celebrity birthdays scraped from IMDB
Data Transformations- convert the results from xml to Google's kml format
Move business logic of your application to the cloud
YQL Execute – Use Benefits
29
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings>
<select itemPath="" produces="XML" >
<urls></urls>
<inputs></inputs>
</select>
</bindings>
</table>
YQL Execute – XML File Syntax
30
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings>
<select itemPath="" produces="XML" >
<urls></urls>
<inputs></inputs>
<execute></execute>
</select>
</bindings>
</table>
YQL Execute – XML File Syntax
Global Disaster Alert and Coordination System Table
Available At: http://github.com/yql/yql-tables
32
YUI Data Handling & Manipulation Browser MVC Controller Component
33
DATA PROCESSING
GET
Connection Manager
HANDLING & MANIPULATION
DOM
Event
Uploader
YUI Visualization: Controller
34
<script type="text/javascript">//public YQL query URLvar yqlPublicQueryURL = "http://query.yahooapis.com/v1/public/yql?";
//YQL Queryvar sQuery = 'SELECT * FROM maps.map WHERE zip="94085"';
//prepare the URL params for YQL queryvar sURL = yqlPublicQueryURL + "q=" + encodeURI(sQuery) + "&format=json&callback=getYQLDataCallback";
//make GET request to YQL with provided queryvar transactionObj = YAHOO.util.Get.script(sURL, { onSuccess : onYQLReqSuccess, onFailure : onYQLReqFailure, scope : this});
return transactionObj;
</script>
YUI Visualization: Controller (GET Utility)
35
<script type="text/javascript">//YQL Queryvar sQuery = 'select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_profileUrl, publishedTime from social.updates where guid=me | sort(field="lastUpdated") | reverse()';
//prepare the URL & post data for the Yahoo! connection manager POSTvar sURL = "private_data_fetch.php";var postData = "q=" + sQuery;
//define connection manager event callbacksvar callback = { success:parseYQLResults, failure:onYQLReqFailure};
//make POST request to YQL with provided queryvar transactionObj = YAHOO.util.Connect.asyncRequest('POST', sURL, callback, postData);
</script>
YUI Visualization: Controller (Connection Manager)
36
YUI Visualization Browser MVC View Component
37
VISUALIZATION UTILITIES
YUI Visualization: View
AnimationButtonCalendarColor PickerCarouselChartsData TableImageLoader
Layout ManagerMenuProgressBarSliderStylesheetSWF UtilityTabViewTreeView
38
They Go Both Ways
Drag and Drop
ImageCropper
Rich Text Editor
YUI Visualization: Pseudo
39
Build applications faster
(and that run faster)
Conclusion
This Presentation http://www.slideshare.net/jcleblanc
YQL Documentationhttp://developer.yahoo.com/yql
YUI Documentationhttp://developer.yahoo.com/yui
YQL Consolehttp://developer.yahoo.com/yql/console
YQL Github Account (Contribute Tables)http://github.com/yql/yql-tables
41
Thank You Questions?