World Internet Developers' Summit 2012 (March 6-7, 2012) Internet Society Hong Kong

1. Build your web apps with
YQL and YUI

2. Application = Data manipulation
+
Data visualization
Yahoo! Presentation Template, Confidential 2

3. 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
Yahoo! Presentation Template, Confidential 3

4. Why YQL - My application
My awesome application

5. 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
Yahoo! Presentation Template, Confidential 5

6. To make data
accessible,
Yahoo! Created YQL
Yahoo! Presentation Template, Confidential 6

7. Why – Entering the world of YQL
• Single API spec
my awesome application
• SQL-like
• select/insert/update/delete
• Optimization
• Powerful
• Extensible
bindings

8. 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

9. 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
Yahoo! Presentation Template, Confidential 9

10. 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
Yahoo! Presentation Template, Confidential 10

11. 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
Yahoo! Presentation Template, Confidential 11

12. 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 statement SELECT … |
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")
Yahoo! Presentation Template, Confidential 12

13. Benefits
Yahoo! Presentation Template, Confidential 13

14. 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 …

15. 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

16. 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
Yahoo! Presentation Template, Confidential 16

17. YQL Console

18. Console tables

19. Query builder and Explorer

20. 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.
Yahoo! Presentation Template, Confidential 20

21. YQL Tables on GitHub

22. 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
Yahoo! Presentation Template, Confidential 22

23. 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.
Yahoo! Presentation Template, Confidential 23

24. 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
Yahoo! Presentation Template, Confidential 24

25. 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
Yahoo! Presentation Template, Confidential 25

26. Introduce YUI 3

27. Presenter
• Name WretchCa
News
– Zordius m
– 陳建宏
Auto Music
Joke
– 小Z Lifestyle
Blog
• Job Movie
Comic
– 2003 ~ now @ Yahoo! Map Pulse
– SDE Homepag
Wretch e Music
– F2E Download
2012/3/12

28. WHAT IS YUI
28 2012/3/12

29. 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

30. 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

31. What is YUI
• jQuery VS YUI 3
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
2012/3/12

32. 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

33. 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();
alert('Hello World!');
});
</script>
2012/3/12

34. 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();
alert('Hello World!');
});
});
</script>
2012/3/12

35. 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();
alert('Hello World!');
});
});
</script>
2012/3/12

36. 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

37. YUI 3
• Reset
2012/3/12

38. YUI 3
• Reset
2012/3/12

39. YUI 3
• Reset + Font
2012/3/12

40. YUI 3
• Javascript modules
– Utilities, Extensions
– Plugins
– Widgets
• Dynamic loaded
2012/3/12

41. YUI 3
Dynamic
yui-min.js loading
CORE, Dependency
YUI().use() checking
Module System
Browser
20.3 K specific
Lazy
loading
Module Module Module Module
2012/3/12

42. 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

43. YUI 3
 Plugin.Align  Plugin.NodeFX
 Plugin.AutoComplete  Plugin.Resize
 Plugin.Base  Plugin.ResizeConstrained
 Plugin.Cache  Plugin.ResizeProxy
 Plugin.CalendarNavigator  Plugin.ScrollViewList
 Plugin.ConsoleFilters  Plugin.ScrollViewPaginator
 Plugin.CreateLinkBase  Plugin.ScrollViewScrollbars
 Plugin.DDConstrained  Plugin.Shim
 Plugin.DDNodeScroll  Plugin.SortScroll
 Plugin.DDProxy  Plugin.WidgetAnim
 Plugin.DDWindowScroll  plugin.NodeFocusManager
 Plugin.Drag  plugin.NodeMenuNav
 Plugin.Drop

44. YUI 3
• Widgets
• AutoComplete
• Calendar
• Charts
• Dial
2012/3/12

45. COMMUNITY

46. Community
 YUI Gallery
› 405 modules
2012/3/12

47. Community
 Contribute
› Host on github
› Anyone can fork / request push
2012/3/12

48. Community
Visit
http://yuilibrary.com/
2012/3/12

49. Yahoo! Developer Network

50. Thank you!