Mashup Guide » Chapter 08 http://blog.mashupguide.net A blog about Raymond Yee's Book Pro Web 2.0 Mashups: Remixing Data and Web Services Wed, 23 Feb 2011 13:35:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 http://blog.mashupguide.net http://blog.mashupguide.net/favicon.ico Mashup Guide Learning about JavaScript libraries using the Google Ajax Libraries API http://blog.mashupguide.net/2008/11/25/113/ http://blog.mashupguide.net/2008/11/25/113/#comments Tue, 25 Nov 2008 17:22:50 +0000 raymond.yee http://blog.mashupguide.net/?p=113 In Chapter 8 of my mashup book, I wrote Ideally there would be one obvious choice for an excellent JavaScript library, and everyone would use it. The current situation is that there are many JavaScript libraries, and it is not at all obvious how they compare. I was hoping that in the course of writing [...]]]>

In Chapter 8 of my mashup book, I wrote

    Ideally there would be one obvious choice for an excellent JavaScript library, and everyone would use it. The current situation is that there are many JavaScript libraries, and it is not at all obvious how they compare.

I was hoping that in the course of writing my book, I would have had an opportunity to do my in-depth study of various JavaScript libraries (of which there are many, judging from the table in the Wikipedia entry Comparison of JavaScript frameworks). I raised the question of how to choose a JavaScript library during a panel on OpenAjax as a way of studying the implications of such initiatives as OpenAjax -- that is, does OpenAjax make it easier to figure out what JavaScript library to choose -- or does it allow one to pick and choose the best parts from a whole range of libraries? These are questions I plan to raise in my spring 2009 Mixing and Remixing Information course.

At any rate, I recently had a chance to take a closer look at AJAX Libraries API - Google Code, which is "a content distribution network and loading architecture for the most popular, open source JavaScript libraries", which at present, include:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

From a pedagogical point of view, the Google AJAX Libraries API, by providing a single common library call (google.load) simplifies getting set up with each of the libraries, which otherwise, would require a different setup. Of course, there are reasons that you might not want to depend on Google to host JavaScript libraries you use -- but not having to take care of hosting these files yourself helps beginners jump right in.

I'm pleased to see that The Yahoo! User Interface Library (YUI) recently became part of the Google API. I use that library in my course and in my book. The post on Google AJAX Search API Blog announcing this inclusion gave a short code example on how to use YUI with the Google AJAX Libraries API -- it did not actually show any visible in the user interface. Here I show to elaborate the example slightly to actually show something visible in the UI.

To do so, you should take look at the YUI docs for the calendar widget and understand a bit about what the YUILoader (Yahoo! UI Library: YUI Loader Utility does. One thing to note is that google.load('yui', '2.6.0'); creates an instance of a global YAHOO object. Secondly, YUILoader takes care of loading the pieces of YUI required to use the widget that you want to use -- see Getting Started for more details. You will also want to load in the default CSS to get started (through the line <body class="yui-skin-sam">). The modified code I came up with is:

<head>
  <script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  google.load('yui', '2.6.0');
  function init() {
    var loader = new YAHOO.util.YUILoader({
      require: ["button", "calendar"],
      base: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
      onSuccess: function() {
        // start playing with buttons and calendars!
        var cal = new YAHOO.widget.Calendar("calContainer");
        cal.render();
      }
    });
    loader.insert();
  }
  google.setOnLoadCallback(init);
  </script>
</head>
<body class="yui-skin-sam">
  <div id="calContainer"></div>
</body>

which you can run at http://labs.mashupguide.net/doc/2008/11/google.ajaxlib.yui.eg.html

]]> http://blog.mashupguide.net/2008/11/25/113/feed/ 1 New chapters posted: Seeking readers! http://blog.mashupguide.net/2007/05/02/new-chapters-posted-seeking-readers/ http://blog.mashupguide.net/2007/05/02/new-chapters-posted-seeking-readers/#comments Wed, 02 May 2007 17:20:27 +0000 raymond.yee http://blog.mashupguide.net/2007/05/02/new-chapters-posted-seeking-readers/ I posted today first drafts of 5 more chapters for my book.   Take a look -- I'd love to get some feedback on these drafts.   (Send me email at raymondyee AT mashupguide DOT net.):   Chapter 3: "Tagging and Folksonomies." (2007-05-02 07:58:41) Chapter 4: "RSS and Atom and syndication; integration with news readers" (2007-04-24 17:52:20) [...]]]>

I posted today first drafts of 5 more chapters for my book.   Take a look -- I'd love to get some feedback on these drafts.   (Send me email at raymondyee AT mashupguide DOT net.):

 

Chapter 3: "Tagging and Folksonomies." (2007-05-02 07:58:41)

Chapter 4: "RSS and Atom and syndication; integration with news readers" (2007-04-24 17:52:20)

Chapter 5: "Integration with Weblogs and Wikis" (2007-05-02 08:08:41)

Chapter 8: "Learning AJAX/Javascript widgets and their APIs" (2007-04-06)

Chapter 14: "Social Bookmarking and bibliographic systems" (2007-05-02 08:33:09)

]]> http://blog.mashupguide.net/2007/05/02/new-chapters-posted-seeking-readers/feed/ 0 Browser extension mechanisms for various browsers http://blog.mashupguide.net/2007/04/29/browser-extension-mechanisms-for-various-browsers/ http://blog.mashupguide.net/2007/04/29/browser-extension-mechanisms-for-various-browsers/#comments Sun, 29 Apr 2007 21:51:01 +0000 raymond.yee http://blog.mashupguide.net/2007/04/29/browser-extension-mechanisms-for-various-browsers/ I know about the Firefox add-on/extension mechanism but what about the corresponding element of other web browsers? Here's what a series of quick web searches turned up: Firefox Firefox Extension Development Tutorial :: Overview XULPlanet.com Opera Opera widgets: Opera Widgets - Weather, News, and More Opera User Javascript -- Opera's take on Greasemonkey: UserJS.org - [...]]]>

I know about the Firefox add-on/extension mechanism but what about the corresponding element of other web browsers? Here's what a series of quick web searches turned up:

Firefox

Opera

Internet Explorer

Safari

  • Pimp My Safari: about:
      It was started as a reaction to the sites cataloguing Firefox extensions. Many excellent plugins for Safari have been developed, but because Safari doesn’t have an official ‘extension architecture’, many don’t know of these extensions.

I'll see how much 'll be able to cover these various mechanisms in detail in the book.

]]> http://blog.mashupguide.net/2007/04/29/browser-extension-mechanisms-for-various-browsers/feed/ 3 Chapter 8 on the programmable web browser, Javascript, and AJAX http://blog.mashupguide.net/2007/04/02/chapter-8-on-the-programmable-web-browser-javascript-and-ajax/ http://blog.mashupguide.net/2007/04/02/chapter-8-on-the-programmable-web-browser-javascript-and-ajax/#comments Tue, 03 Apr 2007 00:59:24 +0000 raymond.yee http://blog.mashupguide.net/2007/04/02/chapter-8-on-the-programmable-web-browser-javascript-and-ajax/ Starting today, I will be writing much more often on this weblog to narrate the progress of my mashup book. The writing has been going well, but needless to say, there's so much more to do. This week, I am working on two fronts: cleaning up Chapter 1, an overview of mashups, and drafting, Chapter [...]]]>

Starting today, I will be writing much more often on this weblog to narrate the progress of my mashup book. The writing has been going well, but needless to say, there's so much more to do. This week, I am working on two fronts: cleaning up Chapter 1, an overview of mashups, and drafting, Chapter 8 on the programmable Web browser, Javascript, and AJAX. Although I am writing many, many words in a word processor -- many of which I hope will make it into the final draft of my book, I long to write shorter pieces, which will facilitate the development of the book. That's why am I'm taking time out of the book to weblog a bit.

Let me tell you a bit about Chapter 8, whose working title is "Learning Ajax/JavaScript widgets and their APIs." In thinking about the chapter today, I realize that the big idea I want to get at is that the modern web browser is programmable and hence, is a rich platform for mashing up data and services. As a connoisseur of mashups, I would want to figure out all the different ways in which I could extend, change, subvert, and customize the web browser, which is the dominant client-side platform for exchanging information on the Internet. The possibilities are astounding for customization both in how a web server host communicates with others and how you as an end-user could process communications coming at you.

A specific example, and certainly not a surprising one, to cover in Chapter 8 is Google Maps, which I call (without great precision of wording) an Ajax widget. Ajax, because it involves the constant and fluid interchange of data between the browser and the server executed through JavaScript -- and a widget because one can use Google maps without knowing all the inner workings of Ajax. That is, you can use it at a high level of abstraction. (I do use Google maps as a specific instance of Ajax widgets but I cover Google maps again in greater detail in other chapters to emphasize the mapping (functional) aspect of it -- instead of the technical implementation part of it.)

Ajax is a rich subject, as can be seen in by the myriad books that have been published recently on the subject. I would like to put Ajax in the larger context of the programmable Web browser. Here I will admit to struggling with how to piece together a chapter that I believe should at least mention, if not plumb the depths of the following:

  • both how an "ideal" W3C DOM-standards compliant browser works and how various browsers actually work in various areas: how javascript is implemented, object models behavior, CSS, events, etc.
  • Javascript-based APIs, widgets such as Google maps -- what are they, how to use any all.
  • non-browser environments for Javascript, such as Google Gadgets, Yahoo Widgets, Adobe Acrobat
  • extension mechanisms in browsers (Firefox addons, Safari , IE , Opera)
  • Javascript and browser debugging tools like Firebug
  • Javascript libraries: how they relate and what can be intermixed -- and which ones are tied to which web programming frameworks.
  • what people have done already on all these fronts using Javascript and remixing the browser
  • how to write Javascript and Javascript widgets that can be reused by other people, including cross-platform Javascript
  • ideas of what you can do in terms of mashups

I obviously would not be to cover all these topics, nor should I even try! What I plan to actually cover as a way into this big list of topics is the following:

  • the lastest versions of Firefox, instead of looking in depth at all browers -- old and new
  • the Yahoo UI Library, as a specific example of a packaged javascript library
  • a walk-through of how to use Firefox + Firebug / Javascript Shell + YUI Connection Manager
  • to build a Google Map example, as a way to get into Ajax widgets in general
  • how to build a basic AJAX call to Flickr
  • how to write a simple Greasemonkey script to lay the foundation of understanding Google Maps in Flickr , a major example in the book).
]]> http://blog.mashupguide.net/2007/04/02/chapter-8-on-the-programmable-web-browser-javascript-and-ajax/feed/ 0