Ajax

A Study of Ajax Performance Issues

Tagged:  

Coach Wei has posted an interesting study of Ajax performance issues, specifically addressing the following issues:

1. Array performance on all browsers in general
2. HTML DOM performance in general
3. Calculating Computed Box Model and Style
4. FireFox: “eval”, Object Creation and “in” Operation
5. “String” Manipulation Performance on IE
6. Safari: “pop” Operation Performance

The article reviews data captured by Robert Buffone at RockStarApps and draws some interesting conclusions.

Visit Couch Wei's blog to read the full study.

Book: The Art & Science of JavaScript

Tagged:  

If you haven't heard, a new JavaScript book is out on the market. The text is published by Sitepoint and is coauthored by James Edwards, Michael Mahemoff, Ara Pehlivanian, Cameron Adams, Dan Webb, Christian Heilmann and Simon Willison.

Who the publisher says the book is for:

This book is targeted at intermediate JavaScript developers who want to take their JavaScript skills to the next level without sacrificing web accessibility or best practice. If you’ve never written a line of JavaScript before, this probably isn’t the right book for you—some of the logic in the later chapters can get a little hairy.

If you have only a small amount of experience with JavaScript, but are comfortable enough programming in another language such as PHP or Java, you’ll be just fine—we’ll hold your hand along the way, and all of the code is available for you to download and experiment with on your own.

And if you’re an experienced JavaScript developer, we would be very, very surprised if you didn’t learn a thing or two. In fact, if you only learn a thing or two, you should contact us here at SitePoint—we may have a book project for you to tackle!

What they say you'll learn:

* Create a slick Google Maps and Flickr mashup.
* Build your own fully accessible 3D maze.
* Have some fun with draggable and sortable table columns.
* Give your site some extra personality with client-side badges.
* Write better code faster using metaprogramming techniques.
* Create stunning vector graphics using the canvas element.
* Become a debugging expert using pro-level Firebug tricks.

What's in the TOC:

Chapter 1: Fun with Tables
Chapter 2: Creating Client-side Badges
Chapter 3: Creating Vector Graphics with canvas
Chapter 4: Debugging and Profiling with Firebug
Chapter 5: Metaprogramming with JavaScript
Chapter 6: Building a 3D Maze with CSS and JavaScript
Chapter 7: Flickr and Google Maps Mashups

Visit the book's homepage at Sitepoint

If you've had a chance to start reading this book, please post your review in the comments.

Building User Interfaces Using Google Web Toolkit (GWT) : Video

Tagged:  

Today I found an interesting video about building user interfaces using the Google Web Toolkit (GWT). This was taken from a presentation at the IndicThreads.com Conference on Java Technology held in Pune, India (I found the video over at IndicThreads.com).

Below is an excerpt from the post:

Chris Schalk's session on 'Building User interfaces using GWT' presented at the IndicThreads.com Conference On Java Technology 2007 held in Oct 2007 in Pune, India.

This session serves as an up to date review of the latest technologies and methodologies for "Building User interfaces using GWT". Specifically covered is - What is Google Web Toolkit (GWT), the potential of Ajax, what GWT brings to Ajax, what GWT focuses on, the Ajax Architectural Shift, building Ajax apps with Java(TM) technology and important GWT applets.

The GWT Mission is to radically improve the web experience for users. This is achieved by allowing developers to use existing Java tools to build no-compromise Ajax for modern browser users.

Speaker- Chris Schalk is a Developer Advocate for Google and helps promote Google Ajax technologies around the world. He is also one of the original members of the OpenAjax Alliance. Prior to Google, Schalk was a Principal Product Manager and Java Evangelist for Oracle's application server and development tools division. While at Oracle, he worked to define the overall Web development experience for Oracle JDeveloper and ADF Faces (Trinidad). He is also the co-author of JavaServer Faces: The Complete Reference published through McGraw-Hill Osborne

To read the full post click here and you can watch the video below.


It is always nice to see more information on the GWT as it is a great tool for Java developers that would like to make Ajax applications.

Build a customizable RSS feed aggregator in PHP

Tagged:  

Over at IBM's developerWorks they have a good post on creating a RSS feed aggregator in PHP. As RSS has become a standard form of syndication for much of the webs content (especially in web 2.0 sites) the ability to aggregate feeds can be a good recourse.

Below is an excerpt from the post:

Functional components

The RSS function described in this article is made up of the following components, explained in the following order:

* Feed reader
* Feed sources input
* Feed aggregator
* Feed results output

These simple components combine to provide a powerful RSS feed aggregator function that can be integrated with other applications in a variety of ways. In the following sections, we will look inside the PHP code snippets that make up each of these components. Figure 2 depicts an overview of these functional components:

Figure 2. Overview of RSS functional components

Observe the following in Figure 2:

* The feed reader component does the bulk of the job and focuses on obtaining feeds provided by a given feed source. A feed source is nothing but a URL at which a particular content provider periodically syndicates the content for a given information category. For instance, a feed source might point to a URL at which the New York Times publishes all its latest news blurbs about the business category/channel using the XML-based RSS format.
* The feed aggregator component takes several user-specified feed sources as input and then it invokes the feed reader component to get all feed items from each customized feed source.
* The feed sources input component defines and reads the details about the user-specified feed sources. The feed source details can be provided in the form of a string stored in system memory, via an input file, or as records in a database.
* The feed results output component stores the aggregated RSS feed item results received from a particular feed source. It can store the results as a string in system memory, into a file, or into database tables.

To simplify our work, we will be combining the feed sources input and the feed results output components to be part of the feed aggregator component. (You can download a fully documented set of PHP source files for these components from the Download section.) You can extract these files to your machine and run them with your own customized set of RSS feed sources. As explained in a previous section, a PHP environment with XML and cURL library support is a prerequisite for doing this. (Refer to the Conclusion section to understand the many ways in which you can use the code for the RSS feed aggregator.)

You can read the full post here

You can download the code here.

As always we would love to hear about any interesting uses of RSS that you may have. You can write about them in this blog by signing up for a free account (once you login click on Create content => Blog Entry).

Alternate Ajax Techniques

Tagged:  

Today I found an interesting post on alternative Ajax techniques (meaning techniques that do not use the XMLHttpRequest object). It is interesting to look at other techniques to load content without a page refresh (although I know that some would say that if you don't use the XMLHttpRequest object that it isn't really Ajax at all).

Below is an excerpt from the post:

Dynamic Script Loading

The first alternate Ajax technique is dynamic script loading. The concept is simple: create a new <script/> element and assign a JavaScript file to its src attribute to load JavaScript that isn't initially written into the page. The beginnings of this technique could be seen way back when Internet Explorer 4.0 and Netscape Navigator 4.0 ruled the web browser market. At that time, developers learned that they could use the document.write() method to write out a <script/> tag. The caveat was that this had to be done before the page was completely loaded. With the advent of the DOM, the concept could be taken to a completely new level.

The Technique

The basic technique behind dynamic script loading is easy, all you need to do is create a <script/> element using the DOM createElement() method and add it to the page:

var oScript = document.createElement("script");

oScript.src = "/path/to/my.js";

document.body.appendChild(oScript);

Downloading doesn't begin until the new <script/> element is actually added to the page, so it's important not to forget this step. (This is the opposite of dynamically creating an <img/> element, which automatically begins downloading once the src attribute is assigned.)

Once the download is complete, the browser interprets the JavaScript code contained within. Now the problem becomes a timing issue: how do you know when the code has finished being loaded and interpreted? Unlike the <img/> element, the <script/> element doesn't have an onload event handler, so you can't rely on the browser to tell you when the script is complete. Instead, you'll need to have a callback function that is the executed at the very end of the source file.

Example 1

Here's a simple example to illustrate dynamic script loading. The page in this example contains a single button which, when clicked, loads a string ("Hello world!") from an external JavaScript file. This string is passed to a callback function (named callback()), which displays it in an alert. The HTML for this page is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Example 1</title>

    <script type="text/javascript">//<![CDATA[

        function makeRequest() {

          var oScript = document.createElement("script");

          oScript.src = "example1.js";

          document.body.appendChild(oScript);

        }



        function callback(sText) {

          alert("Loaded from file: " + sText);

        }

    //]]>

    </script>

  </head>

  <body>

    <input type="button" value="Click Me" onclick="makeRequest()" />

  </body>

</html>

The JavaScript file example1.js contains a single line:

callback("Hello world!");

When the button is clicked, the makeRequest() function is called, initiating the dynamic script loading. Since the newly loaded script is in context of the page, it can access and call the callback() function, which can do use the returned value as it pleases. This example works in any DOM-compliant browsers (Internet Explorer 5.0+, Safari, Firefox, and Opera 7.0+), try it for yourself or download the examples.

More Complex Communication

Sometimes you'll want to load a static JavaScript file from the server, as in the previous example, but sometimes you'll want to return data based on some sort of information. This introduces a level of complexity to dynamic script loading beyond the previous example.

First, you need a way to pass data to the server. This can be accomplished by attaching query string arguments to the JavaScript file URL. Of course, JavaScript files can't access query string information about themselves, so you'll need to use some sort of server-side logic to handle the request and output the correct JavaScript. Here's a function to help with the process:

function makeRequest(sUrl, oParams) {

  for (sName in oParams) {

    if (sUrl.indexOf("?") > -1) {

      sUrl += "&";

    } else {

      sUrl += "?";

    }

    sUrl += encodeURIComponent(sName) + "=" + encodeURIComponent(oParams[sName]);

  }

  var oScript = document.createElement("script");

  oScript.src = sUrl;

  document.body.appendChild(oScript);

}

This function expects to be passed a URL for a JavaScript file and an object containing query string arguments. The query string is constructed inside of the function by iterating over the properties of this object. Then, the familiar dynamic script loading technique is used. This function can be called as follows:

var oParams = {

  "param1": "value1",

  "param2": "value2"

};

makeRequest("/path/to/myjs.php", oParams)

You can read the full post here.

It is always interesting to look at different ways to do things, while a different technique may not be useful in your application it is good to know that they exist for occasions when that become useful (for instance if you want to load data cross domain you can't use the XMLHttpRequest object).

Tatami integrates the Google Web Toolkit and the DOJO framework

The Tatami project is an attempt to integrate the Google Web Toolkit (GWT) and the DOJO JavaScript framework. Tatami pulls in DOJO's rich widgets and utilities (like fisheye, slider, drag and drop functionality) and makes them accessible to the GWT as widgets and helpers. Tatami is compatible with the GWT 1.4 final version.

Check out the demo (may run slowly because files are being served from SVN)

Last month's release of Tatami-1.1 contained some new features, they are:

* DOJO 1.0 wrapped

* DropdownDatePicker and DropdownTimePicker with validation.

* Slider with labels an rule mark.

* The GFX package of DOJO wrapped. (Circle, Rectangle, Path, scaling...)

Visit the Tatami project homepage.

Initial Draft Specification for "OpenAjax Metadata"

Tagged:  

News from the OpenAjax Alliance! The IDE Working Group and Gadgets Task Force have completed an initial draft of the “OpenAjax Metadata Specification". The Metadata spec represents a standard for interoperability across the Ajax toolkits we know and love. Here are the metadata items defined in this first draft version:

  • Ajax widgets - the spec defines two definitions for "widget"
    • UI controls - Some Ajax libraries provide a set of user interface building block components such as combo boxes, menu bars, or charts
    • Mashup components (aka “widgets” and “gadgets”) - Mashup frameworks allow for pre-packaged mini-applications (sometimes called “widgets” or “gadgets”) to be combined together within a composite application (the “mashup”), where the mashup components react to each other intelligently, such as when the user selects an address in one component which causes a different component to display an updated map that shows the given address.
  • Ajax APIs - the spec provides a set of metadata that describes runtime JavaScript APIs (like classes and methods) available for an Ajax library.
  • Ajax libraries - includes metadata fields similar to entries in the OpenAjax Registry

The primary target consumers of OpenAjax Metadata 1.0 are software products. It is expected that these software products will consume and use the metadata to provide enhanced experience for users who building Ajax-powered solutions. In particular:

* Mashup frameworks will use OpenAjax Metadata to use OpenAjax Metadata for widgets, such as the message types that the widget produces and consumes and the customization parameters that the widget supports

* Ajax IDEs will use OpenAjax Metadata to provide the developer with (presumably automatically-generated) API documentation, intelligent code-assist, widget palettes, and widget property editors

The draft specification can be found here.

Click here to read the announcement from the OpenAjax Alliance

Adobe AIR Update for Flash CS3 Professional Beta 3 Released on Labs

Tagged:  

If you are developing AIR applications then this will be good news for you. Adobe has released an update for Flash CS3 Professional so that it can now open .air files. This coincides with the release of Adobe AIR beta 3.

You can download the Adobe AIR beta 3 release here

You can read the full story here.

Game Development using the Yahoo! User Interface

As with many people that get into programming, I started programming because I wanted to make video games (in-fact I have had a few games published about 10 years ago). Now that I am in the web development industry, I from time to time like to look at the developments in Video Game development as it pertains to the web.

The Yahoo! User Interface is a great library for development of JavaScript based applications, including Ajax applications. The library has quite a few methods to help with animation that can be very useful in developing games. Today, I'm not going to go into much detail on using the library to make a game (this will be in a later post), however, I do want to show you how well these games can look.

Check out the below games that where made using the Yahoo! User Interface.

I was amazed at how close these games are to their Flash counterparts. Of course the advantage to using JavaScript over flash is that no plug-in is required to play the game.

You can read more about the Yahoo! User Interface here.

If you've seen any other cool games built using the Yahoo! User Interface I would love to hear about it. If you sign up for a free account you can blog about it on this blog or you can leave them in the comments.

SaphireSteel releases new Ruby on Rails IDE based on VS 2008 Shell

Tagged:  

Ruby In Steel, an IDE for Ruby on Rails, has been released by SaphireSteel. The IDE is based on the Visual Studio 2008 Shell and will sell at a starting price of $49 or $199 for the developer edition (you can get more information here).

Below are the minimum system requirements to run the IDE.

Minimum Requirements: Windows XP (service pack 2) or Vista. Visual Studio 2008 Standard Edition or above is optional - if you don’t own Visual Studio 2008, Ruby In Steel will install a standalone Ruby-language edition of Visual Studio 2008.

You can get a list of all the application features here.

Below are a few excerpts from the InfoWorld article: Ruby on Rails IDE geared to Visual Studio 2008 users.

"We put all our support into Visual Studio so the end-user gets a Ruby-flavored edition of Visual Studio," with its attendant capabilities, Collingbourne said.

Use of the Visual Studio Shell gives SapphireSteel a chance to compete with Eclipse-based IDEs, such as CodeGear's 3rdRail, which also is billed as a Rails IDE, SapphireSteel said.

The IDE is a great tool for those that like the Visual Studio IDE and would like to develop Ruby on Rails applications.

Syndicate content