Carsonified » AJAX

5 Ways to Optimize AJAX in Ruby on Rails

Shanti Braford — Mon, 02 Jul 2007 08:42:15 +0000

Any sufficiently advanced technology is indistinguishable from magic.
- Arthur C. Clarke

When Google first unveiled GMail, then GMaps, a firestorm of interest and activity was generated — not just in those Google applications, but the technologies that powered them.

These web programming techniques (now, of course, known collectively as AJAX) have become incredibly popular, especially among Web 2.0 startups and their early adopters.

The developers of Ruby on Rails recognized early on that allowing RoR developers to easily AJAX-ify their webapps would be a great addition to the framework.

With the addition of RJS Templates to Rails core, the AJAX bar was lowered even further.

Simple AJAX requests like incrementing the number of diggs a story has received, or splicing a comment into a blog, are remarkably fast, not to mention user friendly.

What we’ll be addressing today, though, is optimizing ever more complex AJAX requests that might involve a multitude of SQL calls and JavaScript rendering techniques.

Not all of the techniques are strictly JavaScript/browser-oriented. The list was actually derived from the steps that we took to optimize Mailroom, the first app in the Sproutit suite for small businesses.

Mailroom is built for use with small teams; it can be used to manage shared email accounts such as support@ and sales@. It combines an ajax-rich front end with features like tagging, saved replies (for later reuse) and shared internal conversation notes.

When we first launched Mailroom, the service was reasonably fast. As we grew and our server got busier, however, some customers started to complain about how long it took for some of our AJAX functions to complete.

The following optimization techniques, though not complete by any means, were just a few of the methods we used over the course of several weeks to bring Mailroom, literally, up to speed.

Following the performance boost, Mailroom’s response times for a Load Conversation call (via AJAX), went from 2-8 seconds to averaging less than half a second. Once we added pre-caching (technique #5) on the client side via JavaScript, clicking on a message resulted in a near-instantaneous load; sometimes faster than Outlook or Apple Mail.

Possible Sources of Latency

When building out your AJAX application, it’s a good idea to keep in mind the different sources of latency that can slow down the user experience. These include:

The Database (both in memory and filesystem swap)
App Server Execution & Rendering
The Webserver
The Network
The Browser (only in really complex AJAX apps)

There are others, but we hope this broadly covers them all. We’ll only be taking a look at a few of these sources, but it’s useful to keep them all in mind as you build out your app.

5 Ways You Can Optimize Your Ruby on Rails/AJAX Application

Optimal Database Indexing
Eliminate Redundant SQL Queries
Fragment Caching
Response Text Compression/Minimization
Pre-rendering and Client-side JavaScript Caching

1. Optimal Database Indexing

For many applications, database indexing will be the biggest performance booster of them all.

Sample output from a Rails log file:


  Completed in 8.29523 (0 reqs/sec) | Rendering: 2.68176 (32%) | DB: 5.38202 (64%) | 200 OK [http://railsapp.org/action]

This action would be an ideal candidate for database optimization. If, however, you see something like DB: 0.05 (5%), the action is already spending most of it’s time rendering and there’s probably not a lot you can do in the way of database indexing.

It used to be somewhat difficult to pinpoint the exact function call in your Rails app that was generating an SQL query. But with last year’s release of Nathaniel Talbot’s QueryTrace plugin for Rails, this query back tracing process got a whole lot simpler.

After you install the QueryTrace plugin your Rails app (in the ‘development’ environment) will give you output like this in your log/development.log:


 Conversation Load (0.001538)   SELECT * FROM conversations WHERE (conversations.id = 23453) LIMIT 1
    app/models/feed_observer.rb:14:in `after_create'
    app/controllers/conversation_controller.rb:162:in `send_to'
    script/server:3

As you can see, it’s now trivial to find the exact call that’s generating the SQL database hit.

Adding Indexes via Migrations

The following is a migration’s self.up method to both create an articles table and add a few indices:


def self.up     # brings db schema to the next version
  create_table :articles do |t|
    t.column :title,      :string
    t.column :author_id,  :integer
    t.column :body,       :text
    t.column :is_live,    :boolean, :default => false
  end
  add_index :articles, :author_id
  add_index :articles, [ :author_id, :is_live ], :name => 'author_live_idx'
end

This would create both a single-column index on the author_id, as well as a multi-column index on author_id and is_live.

When in doubt, use a tool like railsbench or the Ruby Performance Validator to see where the bottlenecks are in your Rails app.

2. Eliminate Redundant SQL Queries

Note: this one is more of a “gotcha” applicable to those of us who are new to Ruby on Rails. (Since I’ve fallen victim to this mistake several times, I thought it was worth mentioning here.)

It’s always a good idea to keep a ‘tail -f log/development.log’ open when you are developing your Rails apps. (Win32 users can get tail, etc. here or use Cygwin )

You might be surprised at what you find if you are not in the habit of checking your query logs.

Ever written a quick hack like this?


  class ApplicationController < ActionController::Base
    def current_member
      return Member.find(@session[:member])
    end
    helper_method :current_member
  end

Only to discover that you’re actually calling current_member more than once in a particular controller/view combination? (thus generating multiple SQL calls for the same unchanged ActiveRecord object)

Here’s how to cache the variable in a per-request instance variable so that the Member.find(session[:member_id]) database query only gets called once per request:


  class ApplicationController < ActionController::Base
    protected
      def current_member

        @current_member ||= Member.find(session[:member_id])
      end

      helper_method :current_member
    end
  end

3. Response Text Compression/Minimization

Before attempting the below technique, the simplest way to reduce the number of bits sent across the wire is to enable gzip compression in your web server.

Some links on gzip compress: mod_deflate (apache 2.2), thread on configâ€™ing lighty with gzip, apache 2.2 mod_deflate tutorial.

In the initial version of Mailroom, we were loading the tag conversation HTML module via AJAX for every load conversation request.

There was quite a bit of superfluous HTML that was being returned, when all we really needed was the specific tags that this particular conversation had been tagged with.

By the way, this kind of optimization is helpful when you have one master page load (where it’s OK to take 1-2 seconds longer), followed by many successive AJAX requests that you want to be rendered as quickly as possible.

We’re also targeting the size of the AJAX response text sent back by the server. A 4k response text is of course more preferable to a 16k one.

Initially, this was the HTML snippet being returned for every load conversation AJAX call:



Choose from the tags below:


         … lots of tags  …
    

or enter some new tags:


 …

Instead of returning this whole chunk of HTML each call, we are going to load a static, hidden HTML div once on the initial page load, and return (via AJAX, each call) just the bare essential tag data needed to render this static HTML into a per-conversation tag editor.

First we create a simple Tags object in javascript (with a little help from Prototype):


  Tags = Class.create();
  Tags.prototype =  {
    initialize: function(conversation_id, tag_str, tag_ids) {
      this.conversation_id  = conversation_id;
      this.tag_str          = tag_str;
      this.tag_ids          = tag_ids;
    }
  }

In your main page load, we render a static version of the tag editor template that stays in a hidden div.

The static HTML in a hidden div:




        Tags: #TAGS# 
      … a lot more static HTML.  this olds a static list of tags   checkboxes for this organization  …

When a conversation is loaded, the contents of the hidden div will be read in via JavaScript. Regular expressions are performed against it on the fly to replace elements like #TAGS# with actual per-conversation data returned via the AJAX request.

Here we create a simple JavaScript function that pulls in the contents of the hidden div, performs regex replacements on it, and completes with a Prototype Insertion call of the newly rendered HTML.


  loadTagEditor: function(tags) {
    var tags_static = $('tag-editor-static').innerHTML;
    var regex = /-static/g;
    tags_static = tags_static.replace(regex, '');  # Strip out the "-static" portion of the ids

    var tags_regex = /#TAGS#/;
    tags_static = tags_static.replace(tags_regex, tags.tag_str);
    ...
    new Insertion.After('the-widget-before-tag-editor', tags_static);
  }

Now whenever a conversation is selected, we just need to make sure the “loadTagEditor(tags)” method is called.

There are a few gotchas you’ll want to watch out for with this technique, such as not ending up with duplicate ids in your HTML.

In the hidden, static divs, one way to avoid duplicate ids is to append all your id names with ”-static” and then strip out the ”-static” when you load in your hidden div HTML. (that’s what we do above with the Regular Expression)

Now, our original chunk of HTML (which can really add up if you have 20 – 50 tags) that was previously being returned back with each Load Conversation AJAX request—is now replaced with a few simple lines of JavaScript:


  tags = new Tags(460857, 'home Marketing Development', new Array(1251, 1252, 1460));
  loadTagEditor(tags);

This is the Rails RJS (inside show_conversation.rjs, perhaps) that would be used to generate the above JavaScript:


  page << "tags = new Tags(#{@conversation.id}, '#{@conversation_tags * ' '}', new
Array(#{@conversation_tag_ids.inspect_raw}));"
  page << "ch.loadTagEditor(tags);"

4. Fragment Caching

Here we’ll use the ever so Web 2.0 example here of the tag cloud. These little beauties can be expensive to calculate in SQL. Once you’re site has been TechCrunched, you’ll want to make sure that your tag cloud (especially miniature versions loaded on heavily-trafficked pages, or via AJAX) gets cached as a Rails HTML fragment.


  class TagController < ApplicationController

    def tag_cloud
      fragment = read_fragment("myrailsapp.com/tagcloud")
      if not fragment
        setup_tag_cloud
        fragment = render :template => “tag/tag_cloud”
        write_fragment(”myrailsapp.com/tagcloud”, fragment)
      else
        #logger.info “Fragment cache read: #{fragment}”
        render :text => fragment and return
      end
    end

    private
      def setup_tag_cloud
        # Expensive SQL queries here …
      end
  end

Uncomment the logger.info call to verify that your fragment really is being read from the cache!

Admittedly, fragment caching in Rails can make your code less maintainable. It’s a technique that should really only be used for expensive-to-compute, fairly static portions of your site.

There are several helpful rails caching plugins on the Plugins page on the RoR wiki.

One simple but effective plugin is the Timed File Store which allows you to set an expiration (e.g. 15 minutes) on your cached fragments.

5. Client-side JavaScript Caching and Pre-rendering

If you really want to wow your users, pre-cache commonly called AJAX components into hidden divs so that the only time necessary to load them is the time it takes their browser to execute (eval) the pre-rendered JavaScript.

In the following example, we’ll cache conversations into hidden divs so that whenever a user clicks on a conversation, it’ll load almost instantaneously.

The pre-caching functions will all access a single global JavaScript variable that holds an array. That array will be populated on the first page load with the conversation IDs that should be cached.

Here’s the inline JavaScript (placed at the bottom of the main rendered HTML page):

Here are the JavaScript functions that do the preloading/caching:


  // Uses JavaScript's "setTimeout" function to call the "loadFirst" method (once per id).
  //    This method handles the logic of delaying the first load (to give the parent HTML page
  //    time to load) and putting a delay between each AJAX load so as to not overwhelm
  //    the browser & server.
  function preLoader() {
    var cnt = 0;
    var offset = 250;              # Milliseconds to delay the initial load
    var delay_per_load = 500;      # Milliseconds between each load
    ids.each(
      function (id) {
        setTimeout("loadFirst()", (offset   (cnt * delay_per_load)));
        if (id > 0) {
          cnt  = 1;
        }
      }
    );
  }
  // Pops off the first element in the 'load_ids' array and loads it
  function loadFirst() {
    var id = load_ids.pop();
    if (id > 0) {
      preloadConversation(id);
    }
  }
  // Preloads the conversation specified by creating a new AJAX request -- Note the use of Prototype's
  //   "onComplete" method to specify that "cacheConversation" should be called when the AJAX request
  //   has been completed and its data returned.
  preloadConversation = function(conversation_id) {
    new Ajax.Request('/mailroom/conversation/'   conversation_id   '?preload=true', {asynchronous:true, evalScripts:false, onComplete: cacheConversation});
  }
  cacheConversation = function(originalRequest) {
    // ... omitting some "clever" hacks used to get the conversation id ('conv_id' variable) ...
    var hidden_div_id = 'pre-'   conv_id;
    // Set the Inner HTML of a hidden div to the JavaScript passed back that was generated by Rails RJS templates:
    $(hidden_div_id).innerHTML = encode(originalRequest.responseText);
  }

The following is the JavaScript function used to either A) load the cached conversation, or B) if the cache is not present, load the conversation directly off the server:


  loadConversation: function(id) {
    if ($('pre-'   id).innerHTML != '') {
      var decoded = decode($('pre-'   id).innerHTML);
      eval(decoded);
    } else {
      // Load the conversation via a new Ajax call (eval'ing the result by setting "evalScripts:true",
      //    then caching it via the onComplete parameter).
      new Ajax.Request('/mailroom/conversation/'   id, {asynchronous:true, evalScripts:true, onComplete: cacheConversation});
    }
  }

Phew. Well, there you have it. JavaScript, long the domain of cut n’ paste HTML jockeys, has proven in recent years to be a formidable challenger to Flash (and Applets, remember those), once hailed as the future of interactive web applications. Of course, each has their place and own unique advantages and disadvantages.

While most applications wouldn’t need the kind of firepower described in this technique, hopefully you’ve learned a little bit about JavaScript, Rails and RJS along the way.

Footnote

The inspect_raw method used in technique #5 is a custom method we added to the Array class. Go here to learn more about this method and how we implemented it.

Book: 'Bulletproof Ajax' by Jeremy Keith

Gareth Rushgrove — Tue, 24 Apr 2007 10:35:46 +0000

Ajax has been a hot topic for quite a while now, and there seems to be a new book with the eponymous Greek warrior in its title pretty much every week. Coming in at just 207 pages, Jeremy Keith’s new book, Bulletproof Ajax, is the latest to join the fray. With only 200 odd pages how does he plan to cover such a complex subject you may be asking? Well, here’s the secret – Ajax is really quite simple when you get down to it.

Jeremy’s previous book, DOM Scripting, stands as a fantastic introduction to JavaScript in general and DOM Scripting in particular and Bulletproof Ajax follows on from that title to some degree. Although you get a short introduction to the JavaScript language it’s just enough to understand the examples (I’d recommend you have at least a passing knowledge of JavaScript before reading this book). Also if you are coming to Ajax as a server side programmer then this book is probably not what you’re looking for, but worth reading at a later date. Given the client-server nature of Ajax there are server-side code examples (in PHP) but these are generally brief and serve only to support the examples rather than look at real world usage. Again, it would be useful to have at least a passing familiarity with a server side language and to be able to know if you already have a web server handy to experiment with.

The book features plenty of sample projects – for instance a simple address book is built up, showing off how to use XML, JSON and HTML as data sources and introducing the central XMLHTTPRequest object. There’s lots of focus, as you would expect, on making these examples bulletproof, in this case making sure they work even if JavaScript is unavailable using a method called Hijax.

To go from simple inline event handlers through to completely unobtrusive, object-based code and discussions of closures in JavaScript would be pretty good going for a book twice the size. It’s testament to the clear, no-nonsense and eminently readable writing style that this never bogs down the examples. Some people are bound to complain about the use of the proprietary innerHTML property and the minimal coverage of XML and JSON in the larger examples. This seems to be a facet of the scope of the book and a pragmatic approach to the problem rather than an unintentional oversight. If you’re looking for an A-Z of building an enterprise Ajax application then you’re probably looking for another book (but you should read this one first anyway!).

An entire chapter is dedicated to Accessibility and Ajax, a hugely important subject and one I’ve not seen mentioned anywhere else to date. Although the chapter lacks equivocal conclusions (mainly because no one seems to have formed any yet) it raises all the important issues for discussion and debate and provides a solid set of references for further reading. Throughout the book everything is anchored on the importance of user experience, rather than simply using technology for technology’s sake; this makes Bulletproof Ajax stand out from the crowd of more technology-focused tomes on the subject.

As a standards savvy developer if you want to get up to speed quickly with the hows and whys of modern Ajax but don’t have the time to wade through an awful lot of blog posts then Bulletproof Ajax is worthwhile reading. If you already know what you’re up to then it’s a perfect book to recommend to your unenlightened colleagues. A perfectly digestible read for one of those long train journeys!

Book Name: Bulletproof Ajax
Publisher: New Riders
Author: Jeremy Keith
URL: http://bulletproofajax.com
Price: $34.99 USD Buy Bulletproof Ajax at Amazon and save 34% off the cover price!
Rating out of 5: 3.5

Create Cross Browser Vector Graphics

Dylan Schiemann — Tue, 19 Dec 2006 08:00:12 +0000

For years, web developers have asked the question, “How can I draw in the browser?”. This simple question has anything but a straightforward answer. While the image tag is great, CSS is amazing, and Flash gets the job done, it still is not enough. What I’ve wanted for almost a decade is the ability to draw and modify non-rectangular, browser-native shapes in my web sites. And I want to do this without having to use a graphics editing tool and reloading images from the server. I simply want the ability to manipulate, draw, and connect events to arbitrary shapes and styles, to create rich, sophisticated web user interfaces.

Landscape changes to web applications have been drastic with the widespread adoption of the XMLHttpRequest and other AJAX and Comet techniques. In my opinion, asynchronous, low-latency data transit (AJAX and Comet) paired with vector graphics opens up a world of new opportunities for web application development. I’m obviously not alone in this desire for browser-based drawing solutions, given the wide variety of image techniques and CSS hacks that have evolved over time.

Despite a history of W3C effort towards the SVG specification, there was little support among browser vendors until now. Apple, the WhatWG, Mozilla, and Opera have been working in parallel on Canvas, a simpler but less feature-rich procedural vector drawing API.

After years of frustration, we finally have enough support to create a simple, unified, cross-browser drawing API: dojo.gfx is the newest piece of the Dojo Toolkit and is an amazingly powerful yet simple way to accomplish these goals. Browser support currently includes Firefox 1.5 , Internet Explorer 6 , and Opera 9. Safari fans fear not – support is underway with the latest WebKit nightlies, and is expected to be functional with the next major release of Safari in 2007.

If you want to skip straight to the examples and source code, there is a collection of resources at the end of this article. Otherwise, sit back and enjoy the code!

What Does dojo.gfx Do?

In a nutshell, dojo.gfx lets you draw natively in the browser with an easy to follow JavaScript API. Let’s start by simply drawing a blue rectangle and a green circle:


var node = document.createElement("div");
document.body.appendChild(node);
var surfaceWidth = 120;
var surfaceHeight = 220;
var surface = dojo.gfx.createSurface(node,surfaceWidth, surfaceHeight);
var rect = { x: 100, y: 0, width: 100, height: 100 };
var circle = { cx: 150, cy: 160, r: 50 };
var group = surface.createGroup();
var blueRect = group.createRect(rect)
	.setFill([0, 0, 255, 0.5])
	.applyTransform(dojo.gfx.matrix.identity);
var greenCircle = group.createCircle(circle)
	.setFill([0, 255, 0, 1.0])
	.setStroke({color: "black", width: 4, cap: "butt", join: 4})
	.applyTransform(dojo.gfx.matrix.identity);

As you can see from this basic example, the first step is to create a gfx surface on which to add nodes that you will be drawing. It’s then possible to add shapes to the surface, and apply styles and transformations in a chainable manner. They are applied in the order defined and provide a concise yet flexible opportunity to style, fill, and transform your nodes. People familiar with vector graphics will immediately notice that we are using the same general concepts found in SVG. You will also notice that we have gone to great lengths to keep our syntax concise, using JavaScript literals for our property definitions.

What Time Is It?

A more complex and engaging example is the Dojo clock widget, developed by Dojo contributors Eugene Lazutkin and Tom Trenka:

The clock widget shows the flexibility of the Dojo widget system in non-HTML namespaces. The following code fragment demonstrates the straightforward method by which hour and minute hands are placed, including realistic shadows:


this.shadows.hour.shadow = this._initPoly(this.surface, hP)
	.setFill([0, 0, 0, 0.1]);
this.hands.hour = this._initPoly(this.surface, hP)
	.setStroke({color: this.handStroke, width:1 })
	.setFill({
		type:"linear",
		x1:0, y1:0, x2:0, y2:-27,
		colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
	});
this.shadows.minute.shadow = this._initPoly(this.surface, mP)
	.setFill([0, 0, 0, 0.1]);
this.hands.minute = this._initPoly(this.surface, mP)
	.setStroke({color: this.handStroke, width:1 })
	.setFill({
		type:"linear",
		x1:0, y1:0, x2:0, y2:-38,
		colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
	});

Circle Frenzy

An example showing the powerful use of the Dojo event model with a complex dojo.gfx layout is the draggable circles demo developed by Dojo contributor Gavin Doughtie:

Two dojo.event.connect calls are used to handle mouse events, which then call some simple functions to detect which shape was selected, handle mousemove events for dragging a circle, and then canceling a mousemove event when the mouse button is released. This is in fact the single biggest advantage of dojo.gfx over Canvas… items drawn with SVG/VML are normal DOM nodes in your document, to which you can easily connect event handlers.


dojo.event.connect(this.domNode, 'onmousedown', this, "handleMouseDown");
dojo.event.connect(this.domNode, 'onmouseup', this, "handleMouseUp");
getShape: function(evt){
	var id = evt.target.getAttribute('shapeid');
	var s = null;
	if (id) {
		s = this.gShapes[id];
	}
	// dojo.debug('target: '   evt.target   ' id: '   id   ' shape: '   s);
	return s;
},
handleMouseDown: function(evt){
	dojo.debug("got an event");
	var shape = this.getShape(evt);
	dojo.debug(shape)
	if (shape) {
		this.gCurrentShape = shape;
		dojo.event.connect(this.domNode, 'onmousemove', this, "handleMouseMove");
		dojo.event.browser.stopEvent(evt);
	}
},
handleMouseMove: function(evt){
	dojo.debug("mouse move");
	dojo.debug(this.gCurrentShape);
	if (this.gCurrentShape) {
		var pos = dojo.html.getAbsolutePosition(this.domNode);
		var x = evt.pageX - pos.x;
		var y = evt.pageY - pos.y;
		dojo.debug(x   "/"   y);
		this.gCurrentShape.setShape({cx: x, cy: y});
		dojo.event.browser.stopEvent(evt);
	}
},
handleMouseUp: function(evt){
	this.gCurrentShape = null;
	dojo.event.disconnect(this.domNode, 'onmousemove', this, "handleMouseMove");
}

Which Features Are Supported?

Strokes

In HTML, we generally call this a border, but in vector graphics, it’s a stroke, because it can be a border of an element, or also the edge of anything, including a custom font. Strokes can be hidden, or set to various colors and widths. We also provide the ability to set join parameters, which define how lines come together at edges. You’ve probably noticed the latter, but had little control over it when using thick borders in HTML elements.

Fills

A fill is both background and foreground rolled into one. Transparent fills are supported though not particularly interesting in this discussion. Solid colors are nice and even more interesting are linear and radial gradients with various starting and stopping points. While you cannot create every imaginable gradient today (because SVG and VML do not yet support gradient fills beyond linear and radial), there are a number of clever techniques, using layers and opacity, to achieve most 2-dimensional gradient effects.

Shapes and Paths

dojo.gfx provides a number of commonly used shapes including rectangle, ellipse, line, and circle, as well as the ability to draw along any path. Shapes are simply a special case of a path, which supports simple point to point options, as well as complex cubic and bezier curves.

Opacity

Most browser implementations of this feature in HTML are limited to an opacity that is the same for background and foreground. With dojo.gfx, we can define full alpha opacity on the stroke and the fill, together or independently, providing much greater design flexibility.

Linear Transformations

Rotation, skew, move, resize, and more, are all possible with linear transformations and are based on standard matrix algebra. dojo.gfx exposes this API to make just about any transformation possible. And while dojo.gfx is a two-dimensional API, I have no doubt that people will become inspired to develop three-dimensional transformations using the two-dimensional transformation API.

Rounded Corners

What drawing API would be complete without the ability to draw rounded corners? dojo.gfx provides a simple API for doing just that. Say goodbye to background image hacks!

Charts

We recently announced that Dojo has APIs for live charting. These APIs are highly specialized and are not currently based on dojo.gfx. Charts were developed before dojo.gfx was ready for production. Nevertheless, they show how much is possible in today’s browsers with vector graphics. An example:

You may have noticed that I mentioned live charts. We will very soon release examples that show animated, dynamic, real-time charting. Greenplum will soon be releasing the Greenplum Monitor, a database monitoring application built on top of this code that provides browser-based server performance information, much like that which you would find in the Apple Activity Monitor or Windows Task Manager.

So, Why Not Canvas?

The number one reason, in my perspective, is that because Canvas does not have a true DOM, you cannot easily attach DOM events to a specific node or layer in a drawing. There are other minor reasons, but this reason alone makes it much easier for JavaScript developers to work with HTML and vector graphical elements seamlessly and in the same web application interface.

Are We Reinventing The Wheel?

I hope not! dojo.gfx is not yet another vector markup language, but instead it is a solid subset of SVG features and nomenclature. Like Canvas, it is a procedural drawing API. dojo.gfx is not intended to solve every drawing need ever conceived – rather, it covers the baseline technology that is widely available across today’s browsers using SVG or VML within Internet Explorer. A major benefit of dojo.gfx is that it abstracts away the numerous inconsistencies across the browser vector graphics implementations. We all know that even the best, most standards-compliant implementations of HTML, CSS, and JavaScript are inconsistent. Vector graphics suffer in a similar manner.

One of the very first design decisions of which I was a proponent was that the Dojo Toolkit not be HTML-centric. After working on several SVG-based intranet applications, I was highly motivated to see Dojo work well with SVG and other namespaces that could become relevant in the future. This decision has helped significantly with the implementation of dojo.gfx, as very little of the Dojo codebase assumes an HTML DOM.

The Future

As you can see from the demos, we are just scratching the surface of what is possible with dojo.gfx. With this simple yet powerful set of options, we have the ability to create sophisticated native user interfaces in the browser. Based on our recent work at SitePen and the expressed interest of our clients, we’re well underway to building a new field of collaborative visualization web applications. I’m really excited about the possible application interfaces that we can build with native vector graphics support in today’s browsers.

Credits

Special thanks to Eugene Lazutkin, Gavin Doughtie, Kun Xi, Tom Trenka, Mozilla Foundation, Greenplum, SitePen, and the entire Dojo developer community for making this advancement possible. Without the strong community behind Dojo, ambitious projects like this would not be ready today.

Resources

Dojo: documentation, book, and download
Clock: demo and source
Circles: demo and source
Charts: demo
Canvas: mozilla tutorial
Comet: Cometd, Lightstreamer, KnowNow, and DWR

Create a Searchable Google map

Mark Lukovsky — Mon, 30 Oct 2006 17:36:59 +0000

The GSmapSearchControl Solution is a simple to use application of the Google AJAX Search API that is designed to let you easily add a searchable map to your pages, sites and blogs. The rest of this page discusses this topic in detail – but if you just want to cut and paste some code, the “hello world” of the Map Search Control solution is available at the end of this article.

This basic sample demonstrates the following features:

A search control that allows you to look up addresses and business listings, plotting the results on a map.
The search control has a programmable center point, and at this center point you can specify a custom title and url.
The search control takes a small amount of verticle space while inactive, the inactive view is a small map with a white center point.
Once a search completes, the map expands and the search result cursors allow you to scroll through the set of search results.
Each search result contains a link to a details page for the result as well as a link to get driving directions from the center point of the map to the current search result.
The clear button in the center of the cursor controls clears the current set of results and sets the control into the idle state.

The solution is designed for extreme ease of use. As a site designer you are able to control the center point location as well as a custom title and url. In addition, you can easily program a collection of “search links” that you can place on your page that when clicked, will drive the search control.

New Functionality Update

If you are already familiar with this solution, you might find the following new functionality helpful and useful.

Custom Icons
Zoom Level Control
Enabling GMapTypeControl

Instructions for adding this to your site

Adding the solution is a simple three step process.

Step 1 – Load AJAX Search API, the Google Maps API, and the Map Search Solution

First you need to load the Google AJAX Search API, the Google Maps API, and the Map Search solution into your application. If you don’t already have a Google AJAX Search API key, your first step is to sign up for a key. With your key in hand, add the following five lines of code to your page or blog template.

Step 2 – Define a location on your page for the Map Search Control

The next step is to define a place on your page for the search control (note: you can have more than one). This is typically done by defining a named

element as we have shown below:

Loading...

You might want to set some styling attributes on this element to constrain the width of the control, set a border or margin, etc. For example, a style rule like this might be useful.

#mapsearch {
  width : 400px;
  margin : 10px;
  padding : 4px;
  border : 1px solid #f9f9f9;
}

In addition to this base style, the height of the idle state map and the active state map is easily modified.

/* set height of idle state map */
#mapsearch .gsmsc-idleMapDiv { height : 200px; }

/* set height of active state map */
#mapsearch .gsmsc-mapDiv { height : 300px; }

Step 3 – Create a GSmapSearchControl and bind it to your page

The final step involves creating and configuring the control. The control is very powerful and offers several options. In this section, we will describe the simplest case of adding a control to your page or blog followed several examples that demonstrate more advanced concepts.

The first step is to actually get your code to run. The easiest way to do this is to either extend an existing body onload handler, or create a new one. Find the element on your page and add an onload handler.

Now write your onload handler by adding some code to an existing

Options

Notice in the above example, the value null is passed as the options argument, a Javascript object which is typically specified in object literal form. The following sections describe the possible values for options. These values support the following features:

Setting a special title and url for the map center point.
Specifying a set of hot spots on your page that will trigger searches

Setting a special title and url for the map center point

A special title and url can be programmed into the control and bound to the white center point marker of an active map. A typical use case for this feature might be to specify a conference name and conference url, or a company name and url. In order to request this functionality, the title and url properties of the options argument must be set. The following code snippet demonstrates this.

Setting up hot spots

A common use case for this control is program hot spots on to your page thatwhen clicked will drive the search control. These hot spots might take the form of a list of recommendations, hotels, restaurants, etc. The search control supports this by allowing you to program a list of HTML elements and associated queries. When your users click on the element, the search control is activated with the specified query.

The options argument contains an optional hotspot property. This property is an array of objects, where each object contains an element property which is a reference to an HTML element on your page, as well as a query property which specifies a query to execute when the element is clicked.

The following code fragment demonstrates the use of this feature including the CSS declarations,HTML fragments, and options programming. If you prefer programming this on your own, perhaps by using tags with javascript: urls, that’s a perfectly reasonable way to proceed. We include this capability in the solution because for some of our users, this is a simpler mechanism that requires less of their time to develop. In the snippet that follows we are going to show sample CSS, HTML, and search control initialization logic.

/* define the CSS used to style the hotspots */
h4.hotspot {
  font-size : 100%;
  font-weight : normal;
  color : rgb(9, 122, 182);
  margin-left : 8px;
  margin-top : 0px;
  margin-bottom : 2px;
  font-style : normal;
  cursor : pointer;
}

h4.hotspot:hover {
  color : rgb(237, 92, 11);
  text-decoration : underline;
}



Loading...
Recommendations
Caffeine
Thai Food
Pizza

Gym
Hotel Avante
Residence Inn
The Four Seasons
The Westin, Palo Alto

New! Setting Custom Center Icon

Applications can either accept the default center location icon, or they can supply their own GIcon and the system will use that Icon to mark the center point of the map.

The options argument contains an optional centerIcon property. When supplied, property must specify a valid GIcon. When specified, this icon is used as the center point marker for both the idle and active map.

The following code fragment demonstrates the use of this feature. It demonstrates the use of both a hand built icon, as well as the G_DEFAULT_ICON two calls:

// use the ridefinder, small yellow icon as the center point marker
var ci = new GIcon();
ci.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
... (rest of initialization omitted)

new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         centerIcon : ci
                       }
                       );

// use the G_DEFAULT_ICON as the center point marker
new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         centerIcon : G_DEFAULT_ICON
                       }
                       );

New! Setting Custom Selected and Unselected Icons

Applications are able to specify the icons for the currently selected search result as well as for all unselected search results using a similar model.

The options argument contains an optional selectedIcon property. When supplied, property must specify a valid GIcon. When specified, this icon is used as the marker for the selected search result.

The options argument contains an optional unselectedIcon property. When supplied, property must specify a valid GIcon. When specified, this icon is used as the marker for all other search results.

The following code fragment demonstrates the use of this feature:

// use the G_DEFAULT_ICON as the for selected and unselected search results
new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         selectedIcon : G_DEFAULT_ICON,
                         unselectedIcon : G_DEFAULT_ICON
                       }
                       );

Controlling the Zoom Level

Applications can control the Zoom Level for the idle map (displayed when no searches are active) as well as for the active map (displayed when a map is showing results). The system defines two constants that are helpful when configuring this aspect of the control:

GSmapSearchControl.IDLE_MAP_ZOOM – the default zoom level for the idle map
GSmapSearchControl.ACTIVE_MAP_ZOOM – the default zoom level for the active map

The options argument contains an optional idleMapZoom property. When supplied, this property specifies the zoom level for the idle map. A common use of this property is to have the idle map’s zoom level match the default zoom level for the active map. In order to do this, use the constants described above to set idleMapZoom to GSmapSearchControl.ACTIVE_MAP_ZOOM.

The zoom level for the active map is controlled in a similar manner. The options argument contains an optional activeMapZoom property. When supplied, this property specifies the zoom level for the active map. Note: Applications can use these properties independently of each other.

The following code fragment demonstrates the use of this feature.

// set the idle map zoom so that it matches the
// default active map zoom level
new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM
                       }
                       );

// set the active map zoom level up by 1
new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM+1
                       }
                       );

New! Enabling the Map Type Control

The default behavior of the maps created by this control is for them to not contain the GMapTypeControl, the control that allows switching between map, hybrid and satellite mode. This behavior is programmable allowing applications to cause the control to build maps with the GMapTypeControl available on all maps, or just on the active map.

The options argument contains an optional mapTypeControl property. When supplied, this property specifies which maps should be programmed to include the GMapTypeControl.

GSmapSearchControl.MAP_TYPE_ENABLE_ACTIVE – When this value is specified for the mapTypeControlproperty, the active map will contain a GMapTypeControl
GSmapSearchControl.MAP_TYPE_ENABLE_ALL – When this value is specified for the mapTypeControl property, both the active map and the idle map will contain a GMapTypeControl

The following code fragment demonstrates the use of this feature.

// enable a GMapTypeControl on the active map
new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         mapTypeControl : GSmapSearchControl.MAP_TYPE_ENABLE_ACTIVE
                       }
                       );

// enable a GMapTypeControl on the all maps
new GSmapSearchControl(container,
                       "1600 Amphitheatre Parkway, Mountain View, CA",
                       { title : "Googleplex",
                         url : "http://www.google.com/press/factorytour.html",
                         mapTypeControl : GSmapSearchControl.MAP_TYPE_ENABLE_ALL
                       }
                       );

The “Hello World” of GSmapSearchControl

The following page demonstrates a complete page which uses the GSmapSearchControl solution. You can start with this simple page, change internal to the value of your key and be up and running in seconds.




  
  GSmapSearchControl Sample

  
  

  
  
  

  
  
  
  
  


  Loading...

Examples

Like this article? Digg it!

Responsible Asynchronous Scripting

Shaun Inman — Sun, 28 May 2006 08:00:28 +0000

Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now. Originally dependent on proprietary technology like Java applets, ActiveX and Flash or clever combinations of disparate technologies like images and cookies, native support for the XMLHttpRequest (XHR) object in modern browsers has made it easier than ever to make web apps more responsive and more like their desktop counterparts. This lower barrier to entry also makes it easier to make poor decisions and inappropriate use of a powerful technology.

So what’s a well-intentioned web developer to do? Stop and think about the following before dropping that sudsy, lemon-scented bomb on unsuspecting users.

Content or Action?

Using XHR circumvents the browser’s history. As a result asynchronous scripting is most appropriate for actions and transient or conditional data—not navigating content. XHR doesn’t break the back button, misunderstanding user expectation does.

Search results, tags, comments, and data validation are all good examples of transient data. All are given to flux and make perfect candidates for manipulation by AJAX or similar technologies.

On the other hand, avoid replacing traditional navigation with XHR. Doing so breaks an inherent functionality responsible for the success of the web: Universal Resource Locators. Unless we reinvent the wheel and restore this functionality ourselves (hidden iframes and fragment identifiers anyone?), it is impossible to link directly to content included with XHR.

Both HiDefDVD.com and Microsoft’s recently launched Windows Live Shopping make this laughable mistake. By relying on XHR for navigation and providing no alternative they effectively cede any search relevance to the market leader Amazon who appropriately uses the traditional navigation model (remember at the time of this writing search engines don’t parse JavaScript).

To avoid repeating a similar mistake, try this litmus test: If refreshing a page immediately after that page has been updated by remote scripting results in an essentially identical page then you’re doing okay. If not, head back to the drawing board.

Communicating Change

While not directly tied to asynchronous scripting, page content is often replaced unceremoniously in an application that uses XHR. Without the intermediary blank page followed by a browser’s built-in progress indicators informing users that something is happening, the responsibility now falls on the developer to inform the user of pending changes.

Spinners, hourglasses and progress bars build upon users’ experience with desktop applications and indicate that an operation is pending completion. When inserting or replacing content, animation and movement go a long way towards capturing attention and alerting the user that the page has been updated.

These purely visual techniques fall short when the modified content has been scrolled off screen (imagine using an AJAX-ified mobile app) or with a screen reader. Potential solutions to this shortcoming are still being explored but parallels already exist on the desktop. When a background application requires attention in Mac OS X, it may chirp and bounce the dock icon to alert the user. Keyboard shortcuts can be used to navigate to the needy application. Using access keys and audio triggered by an XHR callback function it is possible to mirror this behavior.

Progressive Enhancement

In DOM Scripting, Jeremy Keith coined the term “Hijax.” He suggests that we plan and develop using the traditional “links to GET/forms to POST” model without relying on JavaScript. Then we hijack those links and forms with asynchronous scripting calls using the onclick and onsubmit event handlers, allowing us to bypass intermediate screens and refine existing interaction.

This type of development favors using AHAH or AXAH over JSON or XML-based flavors of AJAX. By including the same HTML generating file that we plan to request using XHR, we keep our business logic out of the JavaScript and on the server where it belongs.

There are a number of JavaScript libraries out there that encapsulate XHR. When choosing a library or framework for our applications we need to be asking ourselves hard questions. A framework might make our lives as developers easier but will it also facilitate making bad decisions? When taking the Hijax approach we may notice that while XHR allows you to POST data to the server, when using an HTML link we don’t actually make use of this feature. Why? There is no analogous to POSTing with a link in the traditional model, that behavior requires an HTML form. We need to keep in mind that a library that allows us to do so allows us to make a mistake that could disable our application when XHR is not supported or JavaScript is disabled.

Once these ideas about AJAX soak in we’ll be producing clean web apps that play nice with search engines, desktop and mobile browsers, and web-enabled dish-washers alike.

Like this article? Digg it!

Create Your Own Ajax effects

Thomas Fuchs — Mon, 10 Apr 2006 12:22:21 +0000

The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own. So let’s get going.

First, download and include Prototype and script.aculo.us on your page as described in the installation instructions.

You’re ready to use the visual effects engine now! Give this short line a try:

Fade me already!

To tweak the effect, try something like this:

Fade me slower!

The cash register effect

You’re now ready to start building your own effects. All the pre-built effects in script.aculo.us really are about changing the style of elements, but there’s nothing to stop you from actually manipulating the contents of elements too. For our homegrown effect, we’ll do exactly that.

Say you have an online shop that uses AJAX for adding and removing products from a shopping basket. Of course, you may display a total for all the products in the basket, that gets automatically updated each time something changes. We want to give the user a clue that this total is correctly updated and reflects the current contents of the basket. You could use the Yellow Fade Technique, but we want to bring our own style in here and use something more snazzy.

So, we want to emulate the look and feel of an old cash register, and display the change in the total with a completely new homegrown effect, that dynamically adjusts the value from the old total to the new.

Without further ado, here’s a demo so you know what I’m talking about.
Plus you can download a zipped example (20KB) to follow along (it includes all the files you need).

Have a plan

To make use of the facilities the effects engine provides, you should sit down and think about what your effect really does. The important thing is to come up with a method that renders exactly one specific frame as the effect engine will ask your method to do that.

For our cash register effect that means that for the duration of the effect, on each rendering of a frame, it should display the result of the expression start_price + (price_delta * position), where price_delta = end_price - start_price and position refers to how far the effect is completed in a 0 to 1 range.

Example: Assume that the total currently displayed is $100.00 and we want to change that to $150.00. The value to display on position 0.5 (halfway through the effect) would be $125.00 or $100.00 + ($50.00 * 0.5) with price_delta = $150.00 - $100.00 = $50.00.

First frame (position 0):       $100.00
Halfway-through (position 0.5): $125.00
Last frame (position 1):        $150.00

Effect skeleton

The visual effects engine provides a base class to build your own effects.
Effect.Base is used like this:

Effect.CashRegister = Class.create();
Object.extend(Object.extend(Effect.CashRegister.prototype,
  Effect.Base.prototype), {
    // we’ll fill this up later
});

Next, we need to tell our new effect what to do.

The initialize() method

As dicussed earlier we want to have a transition from one price to another, and
need to find out the delta before we start the effect. For convinience, we also just
want to take the value that’s displayed in the element as a starting point, so we
won’t have to remember the “old” price:

initialize: function(element, price) {
  // optional third argument “options”
  var options = arguments[2] || {};

  // $ is a shortcut for document.getElementById in Prototype
  this.element = $(element);

  // find current price and parse it without the dollar sign
  this.startPrice = parseFloat(this.element.innerHTML.substring(1));

  // set finishPrice and precalculate delta
  this.finishPrice = price;
  this.delta = (this.finishPrice-this.startPrice);

  // the start method is provided by the effects engine
  // it should be the last line in your initialize() method
  this.start(options);
},

A short note on using the innerHTML property of a DOM element here: It’s neither good nor evil, it’s just there, in all browsers. So, do use it. It’s much faster than any XML sit-ups with the DOM anyway.

The update() method

For the heavy lifting in our effect, we need to define the update() method. This method is called repeatedly by the visual effects engine for each frame to render. It get’s the position parameter which is in the range of 0 to 1.

update: function(position) {
  // calculate value and convert to dollar/cent array
  var value = (this.startPrice + (this.delta*position)).toString().split(’.');

  // ensure two digits after the comma
  var cent  = value.length==1 ? ‘00′ : (
    value[1].length == 1 ? value[1]+”0″ : value[1].substring(0,2));

  // Element.update from Prototype sets the innerHTML of an element
  Element.update(this.element, ‘$’ + value[0] + ‘.’ + cent);
}

And that’s it. Your effect is ready. To actually use it, call it by using (for example):

new Effect.CashRegister('total',150);

If you want to have a little bit of that “slow motion awe” (where you’ll notice that easing in and out is automatically applied), try:

new Effect.CashRegister('total',150,{duration:10});

Here’s the complete code with the comments removed.

Effect.CashRegister = Class.create();
Object.extend(Object.extend(Effect.CashRegister.prototype,
Effect.Base.prototype), {
  initialize: function(element, price) {
    var options = arguments[2] || {};
    this.element = $(element);
    this.startPrice = parseFloat(this.element.innerHTML.substring(1));
    this.finishPrice = price;
    this.delta = (this.finishPrice-this.startPrice);
    this.start(options);
  },
  update: function(position) {
    var value = (this.startPrice + (this.delta*position)).toString().split(’.');
    var cent  = value.length==1 ? ‘00′ : (
      value[1].length == 1 ? value[1]+”0″ : value[1].substring(0,2));
    Element.update(this.element, ‘$’ + value[0] + ‘.’ + cent);
  }
});

More things to explore

Of course, we’ve only scratched the surface here, so here’s a quick look at various other things waiting for discovery inside the visual effects engine:

Callbacks

At all stages while your effect runs, various callbacks can be used to do further processing. For example, if you want to issue an other effect after your effect has completed, you can use the afterFinish callback:

new Effect.CashRegister('total', 150, {
 afterFinish:function(effect){ new Effect.Highlight(effect.element) }
});

Transitions

Transitions control the easing-in and out of effects, plus can be used for some more advanced control over how an effect should render itself. See the script.aculo.us wiki for more information

Queues

Effect queues are a tool to build powerful, time-line based animation. Here’s a great tutorial.

So what are you waiting for? Get out there and start creating your own wonderful world of visual effects.

About Scriptaculous

Among other things, script.aculo.us includes a fully-featured JavaScript effects engine that provides easy-to-use visual effects on the web. The primary goal is to enable AJAX-powered sites that give visual feedback to users, who otherwise might have no clue that page updates happen behind the scenes. The second use is to make in-page interactivity smoother (for example when a hidden panel opens, it can slide out smoothly instead of just popping up).

The visual effects engine first came to life as a part of Ruby on Rails and particularily the Prototype JavaScript framework, at a time when AJAX was very fresh and the Yellow Fade Technique had a revival. For the launch of script.aculo.us in June 2005, the engine was completely rewritten to provide a solid animation framework that’s easily expandable.

If you never heard about it, have a look at the demo page in the script.aculo.us documentation wiki. For a nice use of rich in-page interactivity visit Apple’s Aperture product web site, and try the “Key Features of Aperture” box at the right of the screen (scroll down a bit to see it), and the wollzelle homepage (try the references in the portfolio section).

For usage in an web application, you might want to check out the fluxiom teaser video (most stuff in the effects engine came out of the development of fluxiom).

What you don’t have to worry about

script.aculo.us’ time-based animation framework takes
care of all the tedious background processing and advanced functionality,
so you never have to worry about things like the rendering speed of the client/browser,
easying in and out and queueing up stuff in timelines.

You’ll automatically get all sorts of tweaking options and callback functionality
to really tune the effects to your liking (of course the provided effects come with
sane defaults, so you can just drop a line of JavaScript code in and you’re all set).

Also, anything is meant to work (and does!) on Internet Explorer 6, Firefox 1.0 and later, plus Safari.