Javascript, APIs and Mashups

13,490 views

Published on

Adding JavaScript to your portfolio used to mean more work. Thanks to the wide range of APIs springing up from the likes of Google (Mail, Maps, Ads, Calendar, Search, etc.), Yahoo! (Flickr, Maps, Search, etc.) and Microsoft (Virtual Earth), JavaScript can actually save you a lot of work these days. JavaScript veterans Cameron Adams (The Man In Blue) and Kevin Yank (SitePoint) will take a whirlwind (and somewhat irreverant) tour of the "free stuff" you get from JavaScript today, and the creative things people are doing with it.

4 Comments
30 Likes
Statistics
Notes
  • Interesting. A lot to be learned. I’m Ana Mui Stanley, working on my latest site on lyrics, www.lyrics-search.org/ . I enjoy reading the slide.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have discovered interesting information in your presentation. Well done!

    http://www.riding-mower.org/

    http://www.riding-mower.org/husqvarna-lawn-tractor-22-hp-46in-deck-model-yth2246/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Excellent job. You make it fun to read.

    John.
    www.freeringtones.ws/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The usage of imagery in this presentation is really effective. You've done a fantastic job here friend.

    Janie
    http://financejedi.com
    http://healthjedi.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,490
On SlideShare
0
From Embeds
0
Number of Embeds
292
Actions
Shares
0
Downloads
0
Comments
4
Likes
30
Embeds 0
No embeds

No notes for slide
  • Javascript, APIs and Mashups

    1. 1. work you don’t have to do JAVASCRIPT APIS & MASHUPS Kevin Yank www.sitepoint.com Cameron Adams www.themaninblue.com
    2. 5. APIS VS MASHUPS <ul><li>both are very closely linked </li></ul><ul><li>to understand a mashup you first have to understand APIs </li></ul>
    3. 6. WHAT’S AN API? <ul><li>work you don’t have to do </li></ul>
    4. 8. APIS <ul><li>A pplication P rogramming I nterface </li></ul><ul><ul><li>an abstracted interface to 3 rd party programming </li></ul></ul><ul><ul><li>access someone else’s code without having to worry about the details </li></ul></ul><ul><ul><li>a general principle in software development </li></ul></ul><ul><ul><li>http://java.sun.com/j2ee/1.4/docs/api/ </li></ul></ul>
    5. 9. WEB APIS <ul><li>Far sexier than their desktop cousins </li></ul><ul><li>Operate on the same principles </li></ul><ul><li>But why do we need them? </li></ul>
    6. 12. WHAT YOUR WEBSITE LOOKS LIKE TO A PROGRAMMER
    7. 13. WHAT YOUR WEB 2.0 WEB SITE LOOKS LIKE TO A PROGRAMMER
    8. 14. APIS LET PROGRAMMERS GET DATA OUT OF A WEBSITE
    9. 15. Your website is an island
    10. 16. Now it’s part of a true network
    11. 17. WHAT DOES A WEB API LOOK LIKE? <ul><li>usually accessed via HTTP </li></ul><ul><ul><li>you don’t need any special technology to access a Web API, just your browser or a server HTTP connection </li></ul></ul><ul><li>a call to a script on someone else’s server </li></ul><ul><li>http://www.flickr.com/services/api/ </li></ul>
    12. 19. WEB API EXAMPLES <ul><li>work you don’t have to do </li></ul>
    13. 20. MAPPING APIS <ul><li>Google Maps </li></ul><ul><ul><li>best Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>free for free sites </li></ul></ul>
    14. 21. MAPPING APIS <ul><li>Google Maps </li></ul><ul><ul><li>best Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>free for free sites </li></ul></ul><ul><li>Virtual Earth </li></ul><ul><ul><li>good Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>restrictive licensing </li></ul></ul>
    15. 22. MAPPING APIS <ul><li>Google Maps </li></ul><ul><ul><li>best Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>free for free sites </li></ul></ul><ul><li>Virtual Earth </li></ul><ul><ul><li>good Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>restrictive licensing </li></ul></ul><ul><li>Yahoo! Maps </li></ul><ul><ul><li>good Australian images </li></ul></ul><ul><ul><li>Flash or JavaScript </li></ul></ul><ul><ul><li>static image </li></ul></ul>
    16. 23. MAPPING APIS <ul><li>Google Maps </li></ul><ul><ul><li>best Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>free for free sites </li></ul></ul><ul><li>Virtual Earth </li></ul><ul><ul><li>good Australian images </li></ul></ul><ul><ul><li>good Australian maps </li></ul></ul><ul><ul><li>restrictive licensing </li></ul></ul><ul><li>Yahoo! Maps </li></ul><ul><ul><li>good Australian images </li></ul></ul><ul><ul><li>Flash or JavaScript </li></ul></ul><ul><ul><li>static image </li></ul></ul><ul><ul><li>limited Australian maps </li></ul></ul>
    17. 24. MAPPING DEMO
    18. 25. SEARCH APIS <ul><li>Google </li></ul><ul><li>Yahoo! </li></ul><ul><li>MSN </li></ul><ul><li>providers </li></ul><ul><li>services </li></ul><ul><li>web search </li></ul><ul><li>web cache </li></ul><ul><li>spelling </li></ul><ul><li>content analysis </li></ul><ul><li>incoming links </li></ul>
    19. 26. AMAZON <ul><li>product information </li></ul><ul><ul><li>prices </li></ul></ul><ul><ul><li>images </li></ul></ul><ul><ul><li>customer reviews </li></ul></ul><ul><ul><li>affiliate sales </li></ul></ul>
    20. 27. MANY, MANY MORE <ul><li>advertising </li></ul><ul><li>blogging </li></ul><ul><li>bookmarks </li></ul><ul><li>events </li></ul><ul><li>messaging </li></ul><ul><li>music </li></ul><ul><li>news </li></ul><ul><li>photos </li></ul><ul><li>video </li></ul><ul><li>weather </li></ul>
    21. 28. MASHUPS <ul><li>work you don’t have to do </li></ul>
    22. 29. <ul><li>novel UI or application </li></ul><ul><li>enhance data </li></ul><ul><li>combine multiple data sources </li></ul>MASHUPS API API local data
    23. 30. MASHUP EXAMPLES <ul><li>work you don’t have to do </li></ul>
    24. 31. MAAAAAAAAAAAPS! <ul><li>Chicagocrime http://www.chicagocrime.org/ </li></ul><ul><li>Overplot http://persistent.info/overplot/ </li></ul><ul><li>Banned Books http://www.applefritter.com/bannedbooks/ </li></ul><ul><li>Transit Map http://www.brail.org/transit/nycgoogle.html </li></ul><ul><li>World of Warcraft http://mapwow.com/ </li></ul>
    25. 37. IT’S NOT ALL MAPS <ul><li>TagTV http://www.onflex.org/TagTV/ </li></ul><ul><li>Viral Video http://www.viralvideochart.com/ </li></ul><ul><li>Blueorganizer http://www.adaptiveblue.com/ </li></ul><ul><li>Salesforce AdWords http://www.salesforce.com/google/ </li></ul>
    26. 42. BLOWING MY OWN HORN <ul><li>FlickrSVG </li></ul><ul><li>Familiar Faces </li></ul><ul><li>Web Connections </li></ul>
    27. 44. HOW DO I USE AN API? <ul><li>work you don’t have to do </li></ul>
    28. 45. TYPES OF APIS <ul><li>2 general types: </li></ul><ul><ul><li>Interfaces (maps) </li></ul></ul><ul><ul><li>Data (everything else) </li></ul></ul>
    29. 46. MAKING A MAP <ul><li><script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXX&quot;></script> </li></ul>
    30. 47. MAKING A MAP <ul><li>mapObject = new GMap2(document.getElementById(&quot;mapArea&quot;)); </li></ul><ul><li>mapObject.setCenter(new GLatLng(-27.059126, 132.791016), 3); </li></ul><ul><li>var userPoint = new GLatLng(-37.851543, 145.011978); </li></ul><ul><li>var mapMarker = new GMarker(userPoint); </li></ul><ul><li>mapObject.addOverlay(mapMarker); </li></ul>
    31. 48. MAKING A MAP
    32. 49. XML <ul><li>using REST architecture, simply make an HTTP request to a resource on the server </li></ul><ul><ul><li>curl() </li></ul></ul><ul><ul><li>wget() </li></ul></ul><ul><li>returns XML </li></ul><ul><li>you do whatever you want with it! </li></ul>
    33. 51. XML + JavaScript <ul><li>AJAX: Use XMLHttpRequest() </li></ul>
    34. 52. X ML + JavaScript <ul><li>AJA X : Use X MLHttpRequest() </li></ul>
    35. 53. LIMITATIONS & CHALLENGES <ul><li>work you don’t have to do </li></ul>
    36. 54. LIMITATIONS OF APIS <ul><li>restricted to what the provider makes available </li></ul><ul><ul><li>screen scraping </li></ul></ul><ul><li>query size/quantity </li></ul><ul><li>privacy concerns with automation </li></ul>
    37. 55. API LOCK-IN <ul><li>APIs change </li></ul><ul><ul><li>license no longer appropriate </li></ul></ul><ul><ul><li>terms of use change </li></ul></ul><ul><ul><li>can you keep up? </li></ul></ul>
    38. 56. API LOCK-IN <ul><li>APIs change </li></ul><ul><ul><li>license no longer appropriate </li></ul></ul><ul><ul><li>terms of use change </li></ul></ul><ul><ul><li>can you keep up? </li></ul></ul><ul><li>API standards </li></ul><ul><li>meta-APIs </li></ul><ul><ul><li>Mapstraction </li></ul></ul>
    39. 57. CROSS-DOMAIN AJAX <ul><li>same domain policy </li></ul><ul><li>can load </li></ul><ul><ul><li>images </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><li>but not HTML/XML </li></ul><ul><ul><li>browsers designed to protect “content” </li></ul></ul>A
    40. 58. WORKAROUNDS <ul><li>server proxy </li></ul><ul><ul><li>slow if not cached </li></ul></ul><ul><ul><li>bottleneck </li></ul></ul>server
    41. 59. WORKAROUNDS <ul><li>server proxy </li></ul><ul><ul><li>slow if not cached </li></ul></ul><ul><ul><li>bottleneck </li></ul></ul><ul><li>JSON-P </li></ul><ul><ul><li>no POST </li></ul></ul><ul><ul><li>fails silently </li></ul></ul><ul><ul><li>security risk </li></ul></ul>{ name1: value1, name2: value2, … } <script>
    42. 60. WORKAROUNDS <ul><li>server proxy </li></ul><ul><ul><li>slow if not cached </li></ul></ul><ul><ul><li>bottleneck </li></ul></ul><ul><li>JSON-P </li></ul><ul><ul><li>no POST </li></ul></ul><ul><ul><li>fails silently </li></ul></ul><ul><ul><li>security risk </li></ul></ul>callback( { name1: value1, name2: value2, … } ); ?f=callback <script>
    43. 61. WORKAROUNDS <ul><li>server proxy </li></ul><ul><ul><li>slow if not cached </li></ul></ul><ul><ul><li>bottleneck </li></ul></ul><ul><li>JSON-P </li></ul><ul><ul><li>no POST </li></ul></ul><ul><ul><li>fails silently </li></ul></ul><ul><ul><li>security risk </li></ul></ul><ul><li>Flash </li></ul><ul><ul><li>it’s Flash </li></ul></ul>Flash crossdomain.xml
    44. 62. THE FUTURE <ul><li>ContextAgnosticXmlHttpRequest </li></ul><ul><li>no HTTP authentication </li></ul><ul><li>no cookies </li></ul><ul><li>and/or </li></ul><ul><li>cross-domain policy file (like Flash) </li></ul><ul><li>and/or </li></ul><ul><li>HTTP header: X-Allow-Foreign-Hosts </li></ul><ul><li>limited cross-domain XMLHttpRequest </li></ul><ul><li>enhanced JSON </li></ul><ul><li>JSONRequest </li></ul><ul><li>like XHR, but execute JavaScript response </li></ul><ul><li>allows POST requests </li></ul><ul><li>provides status/error info </li></ul><ul><li>and/or </li></ul><ul><li>HTTP header: X-Allow-Foreign-Hosts </li></ul>
    45. 63. DO SOMETHING! <ul><li>open your data </li></ul><ul><ul><li>trust </li></ul></ul><ul><ul><li>let others do the work </li></ul></ul><ul><li>offer an API </li></ul><ul><ul><li>microformats </li></ul></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>JSON-P </li></ul></ul><ul><li>get involved </li></ul><ul><ul><li>W3C Web API WG </li></ul></ul>
    46. 64. QUESTIONS? <ul><li>work you don’t have to do </li></ul>Kevin Yank www.sitepoint.com Cameron Adams www.themaninblue.com

    ×