Build your web apps with yql and yui

Build your web apps with

YQL and YUI

Application = Data manipulation

+

Data visualization

Yahoo! Presentation Template, Confidential 2

What are we going to cover?

YQL

Why and what of YQL

Overview of YQL features

YQL Console

Community

YUI

What is YUI

YUI3

Community


Why YQL - My application

My awesome application

The trouble with Data

You need to find data API

Get Access, sign up

Find data endpoint

Read docs to learn the API

Get data in different formats

Use data after converting and filtering

Keep up with API changes

Multiply by number of APIs

Deal with multiple connections


To make data

accessible,

Yahoo! Created YQL


Why – Entering the world of YQL

• Single API spec

• SQL-like

• select/insert/update/delete

• Optimization

• Powerful

• Extensible

my awesome application

bindings

What is YQL

The Yahoo! Query Language is an expressive SQL-like

language that lets you query, filter, and join data across

Web services.

Select * from internet

SQL-Like Language

› Familiar to developers

› Synonymous with data access

Through the SHOW, DESC commands and the console,

we enable developers to discover the available data

sources and structure without opening another Web

browser. Yahoo! Presentation Template, Confidential 8

What can YQL do

show: lists the supported tables

desc: describes the structure of a table

select: fetches data

insert/update/delete: modify data

use: use an Open Data Table

set: define key-values across Open Data Tables


Filtering, paging, projection

Table data can be filtered in the WHERE clause

YQL presents data as “rows”

› Abstracts away “paging” views of data sources

In YQL fields are analogous to the columns of a table,

multiple fields are delimited by commas

select Title,Address from local.search where

query="sushi" and location="san francisco, ca" and

Rating.AverageRating="4.5" LIMIT 2


Joining across sources

Sub-select works the same as normal select

Example: How to get weather forecast of Hong Kong?

Join two services from different companies:

select * from weather.forecast where location in (select id

from xml where

url=“http://xoap.weather.com/search/search?where=hong+

kong”)

Parallelizes execution


Post-query manipulation

YQL includes built-in functions such as sort, unique, truncate, tail,

reverse.

Simple post-SELECT processing can be performed by appending

the “pipe” symbol to the end of the statementSELECT … |

sort(field=item.date)SELECT … | unique(field=item.title) | …

Functions only operate on the data being returned by the query,

nothing to do with the tables or data sources themselves

select * from social.profile where guid in (select guid from

social.connections where owner_guid=me) | sort(field="nickname")


Benefits


YQL Tables

Built-in Tables

› Maintained by Yahoo!

› fantasy sports, weather, answers, flickr, geo, music,

search, upcoming, mail …

› Data Tables

• Specialized tables to fetch raw data from the web

• csv, html, json, xml …

YQL Tables

Open tables

› Brings the power of YQL to any API

Community tables

› Someone may have done the work for you already

› http://datatables.org

› Tables are hosted on GitHub

• https://github.com/yql/yql-tables

http://datatables.org

http://datatables.org

YQL console

http://developer.yahoo.com/yql/console/

Hosted site which executes YQL queries

IDE (Swiss Army Knife) for YQL Developers

Quickly discover tables and iterate on queries

Design, build, and debug


YQL Console

Console tables

Query builder and Explorer

YQL usage

Launched October 28, 2008

167 tables and 1244 community tables

Powered Yahoo! properties like Livestand, many mobile apps,

universal headers notifications, my Yahoo, toolbar. Processing over

100 billion requests a month.

Free external community cluster servers 10 billion requests a

month.


YQL Tables on GitHub

Contributing Process for adding/updating tables on Git

1. Fork the YQL Tables project

2. Clone your Fork

3. Make your changes

4. Push Changes / Commit

5. Make Pull Request

6. YQL Table Admin will moderate and merge changes and generate

new push to datatables.org

Steps 1-5 are standard Git procedures, step 6 is unique

Git Tutorials

› http://help.github.com/forking

› http://thinkvitamin.com/code/starting-with-git-cheat-sheet


Information

All YQL info on http://developer.yahoo.com/yql/

Latest updates on yqlblog.net

› Some recent updates:

• New enhancements to console.

• YQL Table Health and YQL Lint

• Streaming.


http://developer.yahoo.com/yql/






http://yqlblog.net/

http://yqlblog.net/

Conclusion

More easily build applications

› Fewer lines of code

› Data processing done away from app

› Consistent and familiar syntax for all data

access

› Iterative environment for developing the

queries


Conclusion

Applications that run faster

› Service in the cloud does the work

• Conversion, filtering, parallel requests

› Smaller network footprint

• Fewer client calls

• Smaller data amounts

• Closer to the data, fatter pipes

YQL = select * from internet


Introduce YUI 3

Presenter

• Name – Zordius

– 陳建宏

– 小Z

• Job – 2003 ~ now @ Yahoo!

– SDE

– F2E

2012/3/12

News

Movie

Music

Homepag

e

Lifestyle Joke

Comic

Auto

Pulse

Wretch

WretchCa

m

Map

Blog

Music

Download

WHAT IS YUI

2012/3/12 28

What is YUI

• YUI is a free, open source JavaScript and

CSS framework for building richly

interactive web applications

• Homepage – http://yuilibrary.com/

2012/3/12

What is YUI

• Why use YUI? – Modular architecture

– Small, fast

– Handle X browsers for you

• May I use other frameworks? – Yes … for small projects

– YUI help you more in a large project: modular

design, i18n, sandbox, plugins…

2012/3/12

What is YUI

• jQuery VS YUI 3

2012/3/12

jQuery YUI 3

core Dom + Event light

Load modules manual include auto

DOM access CSS3 selector CSS3 selector

operations OO, chaining OO, chaining

Versioning strict sandbox

Extensions Plugin site YUI gallery

What is YUI

• jQuery code

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>

$("a").click(function(event) {

event.preventDefault();

alert('Hello World!');

});

</script>

2012/3/12

What is YUI

• jQuery code

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="moduleA.js"></script>

<script src="moduleBrequireA.js"></script>

<script>

$("a").click(function(event) {

event.preventDefault();


});

</script>

2012/3/12

What is YUI

• YUI 3 code

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

<script>

YUI().use('node', 'event', function (Y) {

Y.one('a').on('click', function (E) {

E.preventDefault();


});

});

</script>

2012/3/12

What is YUI

• YUI 3 code

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

<script>

YUI().use('node', 'event', 'moduleBrequireA', function (Y) {

Y.one('a').on('click', function (E) {

E.preventDefault();


});

});

</script>

2012/3/12

YUI 3

• Reset – removes the browser-provided styling for HTML elements

• Base – consistent and basic cross-browser styling

• Fonts – applies a baseline font treatment to all HTML elements

(Arial , 13px size , 16px line-height)

• Grids

2012/3/12

YUI 3

• Reset

2012/3/12

YUI 3

• Reset

2012/3/12

YUI 3

• Reset + Font

2012/3/12

YUI 3

•Javascript modules –Utilities, Extensions

–Plugins

–Widgets

•Dynamic loaded

2012/3/12

YUI 3

2012/3/12

yui-min.js CORE,

Module System

20.3 K

YUI().use()

Dynamic

loading Dependency

checking

Browser

specific

Module Module Module Module

Lazy

loading

YUI 3

•Plugin • Add / remove feature

• Simple

• Configurable

• Y.one(‘#dragdiv’).plug(Y.Plugin.Drag);

• Y.all(‘.resize’).plug(Y.Plugin.Resize);

2012/3/12

Plugin.Align

Plugin.AutoComplete

Plugin.Base

Plugin.Cache

Plugin.CalendarNavigator

Plugin.ConsoleFilters

Plugin.CreateLinkBase

Plugin.DDConstrained

Plugin.DDNodeScroll

Plugin.DDProxy

Plugin.DDWindowScroll

Plugin.Drag

Plugin.Drop

Plugin.NodeFX

Plugin.Resize

Plugin.ResizeConstrained

Plugin.ResizeProxy

Plugin.ScrollViewList

Plugin.ScrollViewPaginator

Plugin.ScrollViewScrollbars

Plugin.Shim

Plugin.SortScroll

Plugin.WidgetAnim

plugin.NodeFocusManager

plugin.NodeMenuNav

YUI 3

YUI 3

•Widgets • AutoComplete

• Calendar

• Charts

• Dial

2012/3/12

COMMUNITY

Community

YUI Gallery › 405 modules

2012/3/12

Community

Contribute › Host on github

› Anyone can fork / request push

2012/3/12

Community

Visit

http://yuilibrary.com/

2012/3/12

Yahoo! Developer Network

Thank you!

Technology

Build your web apps with yql and yui