An introductory talk how to build quick mashups and products by using YQL to get information of the Web and YUI to build the interface. By building on top of proven concepts and systems that are in use in large web sites and applications you have the time to concentrate on what you want to achieve with your application rather than making it work for browsers.

1. YQL and YUI
Building blocks for quick applica8ons
Chris8an Heilmann, Yahoo internal talk, Sunnyvale, California, 02/02/2010

2. I am known to be able to
quickly build cool demos.

3. hIp://keywordfinder.org/

4. hIp://isithackday.com/hacks/guardian/

5. hIp://icant.co.uk/geomaker/index.php

6. hIp://github.com/codepo8/QuickTrans

7. hIp://icant.co.uk/goohoobi/index.php?research

8. hIp://uk‐house‐prices.com/

9. The reason is that I am
building with things that
work.

10. And that gives me 8me to
concentrate on the
important things.

11. One thing I am bored of is
wri8ng CSS layouts.

12. Which is why I am using a
very simple solu8on.

13. hIp://developer.yahoo.com/yui/grids/builder/

14. hIp://developer.yahoo.com/yui/grids/builder/

15. The reason is that
I want to support
browsers ‐ not work
for them.

16. I’d rather be able to update
a CSS URI than re‐write my
CSS when a new browser
comes around.

17. Things we spend far too
much 8me on:
Hacks to make browsers work.
Op8mising prematurely.
Using our pet language/environment/library
Reading badly wriIen tutorials and
incomplete documenta8on.
Using bleeding edge effects and interfaces
and then trying to create a fallback solu8on.
Flashy effects.

18. What we really should
start with is the data.

19. This is where APIs and web
services come in.

20. The issue is that all of
these are wriIen
differently, expect different
authen8ca8on and give
back different data.

21. YQL hIp://developer.yahoo.com/yql/console/

22. YQL hIp://developer.yahoo.com/yql/console/
select {what} from {where}
where {condi8ons}

23. hIp://isithackday.com/hacks/frankfurt

24. http://github.com/yql/yql-tables

25. A few examples...
select * from flickr.photos.search
where text="donkey"

26. A few examples...
select * from flickr.photos.search
where text="donkey" and license=4

27. A few examples...
select * from craigslist.search where
loca8on="s`ay" and type="sss" and
query="flower pot"

28. A few examples...
select * from google.news where
q="healthcare"

29. A few examples...
select * from query.mul8 where
queries in (
'select * from nyt.ar8cle.search where
query="healthcare"',
'select * from microsoc.bing.news where
query="healthcare"',
'select * from google.news where q="healthcare"'
)

30. A few examples...
select content from html where
url="hIp://www.foxnews.com/" and
xpath="//h2/a"

31. A few examples...
select * from google.translate where q
in (
select content from html where
url="hIp://www.foxnews.com/" and
xpath="//h2/a"
) and target="fr"

32. A few examples...
insert into wordpress.post
(8tle, descrip8on, blogurl, username,
password)
values ("Test Title", "This is a test
body", "hIp://yqltest.wordpress.com",
"yqltest", "password")

33. Using YQL has a lot of
benefits:
No 8me wasted reading API docs
Using the console makes crea8ng complex
queries dead easy.
Data filtering down to the least amount
necessary.
Fast pipes.
Caching + conver8ng
Server‐side JavaScript

35. Using YQL is easy! (PHP)

36. Using YQL is easy! (JavaScript)

37. What I tend to do with YQL
is build APIs that render
out HTML.

40. The reason: re‐use.

41. An “API” like this allows
you to build a non‐script
version and re‐use it with
Ajax for a slicker
experience.

42. Furthermore, you can offer
it to the outside world
later :)

43. And to build the interface,
I use libraries.

44. Libraries.
(...)

45. NESS
A D
H E M
OP T
ST

46. Build interfaces that work!

49. hIp://icant.co.uk/csscharts/

50. hIp://uk‐house‐prices.com/graphs.php?
bloc=230&bstart=50&bend=54&start=50&end=54&loc=230

51. hIp://developer.yahoo.com/yui/ar8cles/hos8ng/#configure

52. hIp://developer.yahoo.com/yui/examples/autocomplete/
ac_basic_array.html

53. hIp://developer.yahoo.com/yui/examples/slider/
slider_dual_with_highlight.html

58. Preview 8me!

59. Kids these days...
hIp://www.flickr.com/photos/jamin2/3851031112/
hIp://www.flickr.com/photos/codepo8/311805104/

60. By using out‐of‐the‐box
solu8ons and keeping a
pragma8c mind you can
quickly build something.

61. And if that is not crea8ve
enough for you, you could
help improving the
libraries that enable others
to do so.

62. Only by using, tes8ng and
improving we can build
beIer solu8ons.

63. So, give the things I
showed a go, and feed
back to us what needs
improvement!

64. Chris8an Heilmann
hIp://wait‐8ll‐i.com
Thanks!
hIp://developer‐evangelism.com
hIp://twiIer.com/codepo8