20. Yahoo! User Interface Libraries (YUI)
Industrial strength
cross-browser
JavaScript and CSS
Generous BSD
license
http://developer.yahoo.com/yui/
21. The Yahoo! User Interface Library
Tree Control AutoComplete Slider
Calendar
TabView Menu Control
Control
Logger Control DHTML Windowing
Animation Drag & Drop
Connection
Event Utility
Manager (Ajax)
Dom Collection
CSS Reset, Fonts, Grids
24. Yahoo! Design Patterns
a pattern describes an optimal solution to a
common problem within a specific context
Yahoo’s design patterns emerge from a rigorous
design process
http://developer.yahoo.com/ypatterns/
30. Apt near Park
Craigslist apartment listings
• For each apartment:
• Click on map link
• Check distance to a park on the map
Tedious
31. Apt near Park
Data is available
• Craigslist apartment RSS feed
• Yahoo! Local API to find Parks
Can do it in about 50 lines of Perl code
#!/usr/bin/perl -w
use strict;
use LWP::Simple;
use XML::Simple;
...
32. Apt near Park
Basically combine feeds + web
services
Yet another custom mashup
• HousingMaps, ChicagoCrime, ...
Would be nice if there was an
easier way...
33. Pipes
A free online service that lets you remix
data and create mashups using a visual
editor
Craigslist
Yahoo! Local
38. Any Output
RSS Readers
Badges
HTML
Your app
here!
39. Any Process
Yahoo! Local
Fetch
Your Web Service
Here!
Sort
40. Open
Craigslist
RSS Readers
Yahoo! Yahoo! Local
Fetch
Badges
Google
Your Web
HTML
Service Here!
Ebay
Your app
Sort
here!
Your data
here!
41. Why use Pipes?
Middleware for mashing data without
having your own web server
Rapid prototyping
Quick to write pipes - no coding or
plugins required
Focus on what you’re trying to build
without solving the trivial
Faster network access to many APIs
42. Pipes lets you...
Grab web data sources
• RSS, JSON, XML, RDF, ICAL, CSV
Manipulate the data
• Mash it up with other data sources
and data services
View the results
Use the Pipe data however you want
43. Pipes on the
iPhone
http://iphone.pipes.yahoo.com
45. Numbers from Yahoo!
Unique users per month: 500+ million
8 percent of all page views on the Internet
globally are on yahoo.com
Pipes numbers:
• 6 million pipes / day
• 170,000 unique sources of data
46. We live and breathe scale.
Every second.
Every day.
47. You can use some of the same
tools and methods we use to
achieve scale
http://developer.yahoo.com/performance/
48. The Performance Golden Rule
80-90% of the end-user response time is spent
on the front-end. Start there.
• Greater potential for improvement
• Simpler
• Proven to work
http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html
49. 14 Rules for High Performance Web Sites
1. Make fewer HTTP requests
2. Use a Content Delivery Network
3. Add an Expires header
4. Gzip components
5. Put CSS at the top
6. Move JS to the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Turn off ETags
14. Make AJAX cacheable and small
More at http://developer.yahoo.com/performance/
52. Hosted YUI
All the benefits of YUI described earlier
Hosted via our CDN, for free
http://developer.yahoo.com/yui/articles/hosting/
53. Hadoop: the open source grid
• Doug Cutting (Lucene, Nutch) founded the
Hadoop project and joined Y! in January
2006
• Y! Hadoop team started March 2006
• Y! continues to make substantial
contributions to the project
• http://lucene.apache.org/hadoop/
• Example usage outside Y!
– NY Times wanted to make 1851-1922
articles available for free as PDF
– Needed to assemble a grid
– 11 million articles processed in under 24
hours using 100 Amazon EC2 instances
– http://open.blogs.nytimes.com/2007/11/01/self-service-
prorated-super-computing-fun/
55. Just a couple of Yahoos
Douglas Crockford:
– “Yoda of lambda programming and
JavaScript” according to Brendan Eich
(Inventor of JavaScript)
Rasmus Lerdorf
– Father of PHP
56. Books by Yahoo! authors
I want to give a shout-out to Yahoo! here for sharing their knowledge, earned
through hard experience running one of the world's largest web sites.
-Tim O’Reilly
http://radar.oreilly.com/archives/2007/10/high_performance_websites.html
65. Hardware hacks
Blogging in motion
• Purse
• Pedometer
• Cell phone
• Flickr API
•http://www.blogginginmotion.com/
ybox
“Simple, friendly, text-based
widget/channels give quick
snapshots of personalized info
downloaded live from the net.”
http://www.uncommonprojects.com/ybox/
67. Everything you need
web services & data from Yahoo!
+ Pipes (data and services from the web)
+ YUI (interface code)
+ Y! design patterns
+ scaling know-how
+ expert knowledge
--------------------
= beautiful, fast, awesome mashups