Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Beyond web services
   Supporting mashup artists at Yahoo!




Chad Dickerson
Sr. Director, Yahoo! Developer Network
Why I’m particularly glad to be
       here in Dublin
I love technology
. . . but I also love beer

(search for “how to make a
        kegerator”)
Thanks for the step-by-step instructions of
the kegerator. By far the best on the web.

                 - Tim D.
We also really like the “camp”
      concept at Yahoo!
But mostly we like to make
  difficult things easy for
         developers
The web is “the most hostile
 programming environment
       ever devised”
    Douglas Crockford, Yahoo!
        (creator ...
To make it easier for you,
      we provide:
Key building blocks for mashups
Pipes: a tool to mashup the web
Practical lessons/tools for scale
Access to experts
Key building blocks for mashups
developer.yahoo.com

• User interface
  – Yahoo! User Interface Libraries (YUI)
  – ASTRA (ActionScript Toolkit for Rich
 ...
Web services




       del.icio.us



plus 20+ more
Yahoo! User Interface Libraries (YUI)

 Industrial strength
 cross-browser
 JavaScript and CSS


 Generous BSD
 license


...
The Yahoo! User Interface Library
Tree Control      AutoComplete          Slider
   Calendar
                        TabVi...
ASTRA: Flash components
Tree           Menu         TabBar




                              Chart


             AutoComp...
All under a liberal
    BSD License
Yahoo! Design Patterns


a pattern describes an optimal solution to a
common problem within a specific context


Yahoo’s d...
Example: Writing a review
Writing a review (cont.)
Yahoo! Design Patterns
•Search                       •Interact
  – Search pagination             – Invitation
            ...
Pipes: a tool to mashup the web
Apt near Park



How do you find
an apartment
near a park?
Apt near Park



Craigslist apartment listings
  •   For each apartment:
      •   Click on map link
      •   Check dista...
Apt near Park


Data is available
   •   Craigslist apartment RSS feed
   •   Yahoo! Local API to find Parks
Can do it in ...
Apt near Park

Basically combine feeds + web
services
Yet another custom mashup
•   HousingMaps, ChicagoCrime, ...


Would...
Pipes

A free online service that lets you remix
data and create mashups using a visual
editor

                 Craigslis...
Demo



Apartment near Something
Unix Pipes


grep -iv yahoo.com squid.log |
sort | uniq -c | sort -n >
top_sources.txt

Unix Pipes for the Web
Build usefu...
Any Input


Craigslist

 Yahoo!

 Google

  Ebay

Your data
  here!
Any Output


             RSS Readers

               Badges

               HTML

              Your app
               h...
Any Process


                    Yahoo! Local
Fetch




        Your Web Service
             Here!




             Sort
Open


Craigslist
                                              RSS Readers
 Yahoo!                        Yahoo! Local
  ...
Why use Pipes?

Middleware for mashing data without
   having your own web server
Rapid prototyping
     Quick to write pi...
Pipes lets you...


Grab web data sources
  •   RSS, JSON, XML, RDF, ICAL, CSV
Manipulate the data
  •   Mash it up with o...
Pipes on the
       iPhone


http://iphone.pipes.yahoo.com
Practical tools/lessons in scale
Numbers from Yahoo!

Unique users per month: 500+ million

8 percent of all page views on the Internet
  globally are on y...
We live and breathe scale.

      Every second.

       Every day.
You can use some of the same
 tools and methods we use to
         achieve scale




   http://developer.yahoo.com/perform...
The Performance Golden Rule

  80-90% of the end-user response time is spent
  on the front-end. Start there.


• Greater ...
14 Rules for High Performance Web Sites
 1.    Make fewer HTTP requests
 2.    Use a Content Delivery Network
 3.    Add a...
YSlow

performance lint tool
grades web pages for each rule
Firefox extension
Yahoo! internal tool




         http://dev...
Hosted YUI


All the benefits of YUI described earlier


      Hosted via our CDN, for free

http://developer.yahoo.com/yu...
Hadoop: the open source grid
•   Doug Cutting (Lucene, Nutch) founded the
    Hadoop project and joined Y! in January
    ...
Access to experts
Just a couple of Yahoos


Douglas Crockford:
  – “Yoda of lambda programming and
    JavaScript” according to Brendan Eich...
Books by Yahoo! authors




I want to give a shout-out to Yahoo! here for sharing their knowledge, earned
through hard exp...
Just launched: YDN Theater




http://developer.yahoo.com/blogs/theater/
(want to chat on camera after
          my talk?)
We provide lots of ingredients

 …but the rest is up to you!
Some inspiration. . .
Yahoo! Mail Web Service: Locamigos.com




          http://www.locamigos.com/
Locamigos in action
delimport




http://www.ianhenderson.org/delimport.html
AIR Search




http://kentbrewster.com/air-search/
Hardware hacks
          Blogging in motion
          • Purse
          • Pedometer
          • Cell phone
          • Fli...
[your mashup here]
Everything you need
 web services & data from Yahoo!
+ Pipes (data and services from the web)
+ YUI (interface code)
+ Y! ...
Now it’s your turn. . .
Good luck!
             Contact:
       chadd@yahoo-inc.com

    Yahoo! Developer Network:
   http://developer.yahoo.com/
...
Photo credits
• Crane
   – http://www.flickr.com/photos/david_wilmot/28202190/
• Pipes
   – http://www.flickr.com/photos/m...
Beyond web services: supporting mashup artists at Yahoo!
Beyond web services: supporting mashup artists at Yahoo!
Beyond web services: supporting mashup artists at Yahoo!
Beyond web services: supporting mashup artists at Yahoo!
Beyond web services: supporting mashup artists at Yahoo!
Upcoming SlideShare
Loading in …5
×

of

Beyond web services: supporting mashup artists at Yahoo! Slide 1 Beyond web services: supporting mashup artists at Yahoo! Slide 2 Beyond web services: supporting mashup artists at Yahoo! Slide 3 Beyond web services: supporting mashup artists at Yahoo! Slide 4 Beyond web services: supporting mashup artists at Yahoo! Slide 5 Beyond web services: supporting mashup artists at Yahoo! Slide 6 Beyond web services: supporting mashup artists at Yahoo! Slide 7 Beyond web services: supporting mashup artists at Yahoo! Slide 8 Beyond web services: supporting mashup artists at Yahoo! Slide 9 Beyond web services: supporting mashup artists at Yahoo! Slide 10 Beyond web services: supporting mashup artists at Yahoo! Slide 11 Beyond web services: supporting mashup artists at Yahoo! Slide 12 Beyond web services: supporting mashup artists at Yahoo! Slide 13 Beyond web services: supporting mashup artists at Yahoo! Slide 14 Beyond web services: supporting mashup artists at Yahoo! Slide 15 Beyond web services: supporting mashup artists at Yahoo! Slide 16 Beyond web services: supporting mashup artists at Yahoo! Slide 17 Beyond web services: supporting mashup artists at Yahoo! Slide 18 Beyond web services: supporting mashup artists at Yahoo! Slide 19 Beyond web services: supporting mashup artists at Yahoo! Slide 20 Beyond web services: supporting mashup artists at Yahoo! Slide 21 Beyond web services: supporting mashup artists at Yahoo! Slide 22 Beyond web services: supporting mashup artists at Yahoo! Slide 23 Beyond web services: supporting mashup artists at Yahoo! Slide 24 Beyond web services: supporting mashup artists at Yahoo! Slide 25 Beyond web services: supporting mashup artists at Yahoo! Slide 26 Beyond web services: supporting mashup artists at Yahoo! Slide 27 Beyond web services: supporting mashup artists at Yahoo! Slide 28 Beyond web services: supporting mashup artists at Yahoo! Slide 29 Beyond web services: supporting mashup artists at Yahoo! Slide 30 Beyond web services: supporting mashup artists at Yahoo! Slide 31 Beyond web services: supporting mashup artists at Yahoo! Slide 32 Beyond web services: supporting mashup artists at Yahoo! Slide 33 Beyond web services: supporting mashup artists at Yahoo! Slide 34 Beyond web services: supporting mashup artists at Yahoo! Slide 35 Beyond web services: supporting mashup artists at Yahoo! Slide 36 Beyond web services: supporting mashup artists at Yahoo! Slide 37 Beyond web services: supporting mashup artists at Yahoo! Slide 38 Beyond web services: supporting mashup artists at Yahoo! Slide 39 Beyond web services: supporting mashup artists at Yahoo! Slide 40 Beyond web services: supporting mashup artists at Yahoo! Slide 41 Beyond web services: supporting mashup artists at Yahoo! Slide 42 Beyond web services: supporting mashup artists at Yahoo! Slide 43 Beyond web services: supporting mashup artists at Yahoo! Slide 44 Beyond web services: supporting mashup artists at Yahoo! Slide 45 Beyond web services: supporting mashup artists at Yahoo! Slide 46 Beyond web services: supporting mashup artists at Yahoo! Slide 47 Beyond web services: supporting mashup artists at Yahoo! Slide 48 Beyond web services: supporting mashup artists at Yahoo! Slide 49 Beyond web services: supporting mashup artists at Yahoo! Slide 50 Beyond web services: supporting mashup artists at Yahoo! Slide 51 Beyond web services: supporting mashup artists at Yahoo! Slide 52 Beyond web services: supporting mashup artists at Yahoo! Slide 53 Beyond web services: supporting mashup artists at Yahoo! Slide 54 Beyond web services: supporting mashup artists at Yahoo! Slide 55 Beyond web services: supporting mashup artists at Yahoo! Slide 56 Beyond web services: supporting mashup artists at Yahoo! Slide 57 Beyond web services: supporting mashup artists at Yahoo! Slide 58 Beyond web services: supporting mashup artists at Yahoo! Slide 59 Beyond web services: supporting mashup artists at Yahoo! Slide 60 Beyond web services: supporting mashup artists at Yahoo! Slide 61 Beyond web services: supporting mashup artists at Yahoo! Slide 62 Beyond web services: supporting mashup artists at Yahoo! Slide 63 Beyond web services: supporting mashup artists at Yahoo! Slide 64 Beyond web services: supporting mashup artists at Yahoo! Slide 65 Beyond web services: supporting mashup artists at Yahoo! Slide 66 Beyond web services: supporting mashup artists at Yahoo! Slide 67 Beyond web services: supporting mashup artists at Yahoo! Slide 68 Beyond web services: supporting mashup artists at Yahoo! Slide 69 Beyond web services: supporting mashup artists at Yahoo! Slide 70
Upcoming SlideShare
You are the BOSS - HackU 2011
Next

10 Likes

Share

Beyond web services: supporting mashup artists at Yahoo!

Keynote by Chad Dickerson at Mashup Camp Dublin, November 11, 2007

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Beyond web services: supporting mashup artists at Yahoo!

  1. 1. Beyond web services Supporting mashup artists at Yahoo! Chad Dickerson Sr. Director, Yahoo! Developer Network
  2. 2. Why I’m particularly glad to be here in Dublin
  3. 3. I love technology
  4. 4. . . . but I also love beer (search for “how to make a kegerator”)
  5. 5. Thanks for the step-by-step instructions of the kegerator. By far the best on the web. - Tim D.
  6. 6. We also really like the “camp” concept at Yahoo!
  7. 7. But mostly we like to make difficult things easy for developers
  8. 8. The web is “the most hostile programming environment ever devised” Douglas Crockford, Yahoo! (creator of JSON)
  9. 9. To make it easier for you, we provide:
  10. 10. Key building blocks for mashups
  11. 11. Pipes: a tool to mashup the web
  12. 12. Practical lessons/tools for scale
  13. 13. Access to experts
  14. 14. Key building blocks for mashups
  15. 15. developer.yahoo.com • User interface – Yahoo! User Interface Libraries (YUI) – ASTRA (ActionScript Toolkit for Rich Applications) – Yahoo! Design Patterns • Web services • Lots of RSS feeds – http://developer.yahoo.com/rss/
  16. 16. Web services del.icio.us plus 20+ more
  17. 17. Yahoo! User Interface Libraries (YUI) Industrial strength cross-browser JavaScript and CSS Generous BSD license http://developer.yahoo.com/yui/
  18. 18. 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
  19. 19. ASTRA: Flash components Tree Menu TabBar Chart AutoComplete
  20. 20. All under a liberal BSD License
  21. 21. 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/
  22. 22. Example: Writing a review
  23. 23. Writing a review (cont.)
  24. 24. Yahoo! Design Patterns •Search •Interact – Search pagination – Invitation – Transition (animate, •Navigate brighten, collapse, – Breadcrumbs dim, etc) – Links – Tabs •Give Feedback •Read – Ratings and reviews – Page Grids •Customize – Pagination – Drag and drop •Select •Many more. . . . – Auto Complete – Calendar Picker http://developer.yahoo.com/ypatterns/
  25. 25. Pipes: a tool to mashup the web
  26. 26. Apt near Park How do you find an apartment near a park?
  27. 27. Apt near Park Craigslist apartment listings • For each apartment: • Click on map link • Check distance to a park on the map Tedious
  28. 28. 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; ...
  29. 29. Apt near Park Basically combine feeds + web services Yet another custom mashup • HousingMaps, ChicagoCrime, ... Would be nice if there was an easier way...
  30. 30. Pipes A free online service that lets you remix data and create mashups using a visual editor Craigslist Yahoo! Local
  31. 31. Demo Apartment near Something
  32. 32. Unix Pipes grep -iv yahoo.com squid.log | sort | uniq -c | sort -n > top_sources.txt Unix Pipes for the Web Build useful applications from simple primitives
  33. 33. Any Input Craigslist Yahoo! Google Ebay Your data here!
  34. 34. Any Output RSS Readers Badges HTML Your app here!
  35. 35. Any Process Yahoo! Local Fetch Your Web Service Here! Sort
  36. 36. Open Craigslist RSS Readers Yahoo! Yahoo! Local Fetch Badges Google Your Web HTML Service Here! Ebay Your app Sort here! Your data here!
  37. 37. 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
  38. 38. 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
  39. 39. Pipes on the iPhone http://iphone.pipes.yahoo.com
  40. 40. Practical tools/lessons in scale
  41. 41. 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
  42. 42. We live and breathe scale. Every second. Every day.
  43. 43. You can use some of the same tools and methods we use to achieve scale http://developer.yahoo.com/performance/
  44. 44. 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
  45. 45. 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/
  46. 46. YSlow performance lint tool grades web pages for each rule Firefox extension Yahoo! internal tool http://developer.yahoo.com/yslow/
  47. 47. Hosted YUI All the benefits of YUI described earlier Hosted via our CDN, for free http://developer.yahoo.com/yui/articles/hosting/
  48. 48. 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/
  49. 49. Access to experts
  50. 50. 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
  51. 51. 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
  52. 52. Just launched: YDN Theater http://developer.yahoo.com/blogs/theater/
  53. 53. (want to chat on camera after my talk?)
  54. 54. We provide lots of ingredients …but the rest is up to you!
  55. 55. Some inspiration. . .
  56. 56. Yahoo! Mail Web Service: Locamigos.com http://www.locamigos.com/
  57. 57. Locamigos in action
  58. 58. delimport http://www.ianhenderson.org/delimport.html
  59. 59. AIR Search http://kentbrewster.com/air-search/
  60. 60. 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/
  61. 61. [your mashup here]
  62. 62. 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
  63. 63. Now it’s your turn. . .
  64. 64. Good luck! Contact: chadd@yahoo-inc.com Yahoo! Developer Network: http://developer.yahoo.com/ Slides: http://slideshare.net/chaddickerson/
  65. 65. Photo credits • Crane – http://www.flickr.com/photos/david_wilmot/28202190/ • Pipes – http://www.flickr.com/photos/monoglot/275958740/ • Speedometer – http://www.flickr.com/photos/maxim303/41509420/ • Apartments near park – http://www.flickr.com/photos/paytonc/67399288/ • Doug Crockford – http://www.flickr.com/photos/livenature/412141721/ • Rasmus Lerdorf – http://www.flickr.com/photos/chrys/56838713/ (All Creative Commons)
  • jgulla

    Nov. 27, 2009
  • uk4032

    Nov. 25, 2008
  • bruce.gosse

    Nov. 24, 2008
  • slidemania

    Jul. 12, 2008
  • xiaohang

    Jul. 1, 2008
  • iLeo

    Jun. 19, 2008
  • gskousen

    May. 3, 2008
  • exe

    Feb. 8, 2008
  • xian

    Nov. 28, 2007
  • ayman

    Nov. 20, 2007

Keynote by Chad Dickerson at Mashup Camp Dublin, November 11, 2007

Views

Total views

9,551

On Slideshare

0

From embeds

0

Number of embeds

27

Actions

Downloads

0

Shares

0

Comments

0

Likes

10

×