Any good AJAX framework for Google App Engine apps?

Question

I am trying to implement AJAX in my Google App Engine application, and so I am looking for a good AJAX framework that will help me. Anyone has any idea?

I am thinking about Google Web Toolkit, how good it is in terms of creating AJAX for Google App Engine?

Answer 1

As Google Web Toolkit is a subset of Java it works best when you Java at the backend too. Since Google App Engine is currently Python only I think you'd have to do a lot of messing about to get your server and client to talk nicely to each other.

jQuery seems to be the most popular JavaScript library option in the AJAX Tag at DjangoSnippets.com.

Edit: The above is only true of Google App Engine applications written in Python. As Google App Engine now supports Java, GWT could now be a good choice for writing an AJAX front end. Google even have a tutorial showing you how to do it.

Answer 2

Thanks Dave.

Ah, I suppose that this rules out the potential of using Google Web Toolkit as the AJAX framework for GAE. Too bad!

Is there any other framework?

Answer 3

I'd recommend looking into a pure javascript framework (probably Jquery) for your client-side code, and write JSON services in python- that seems to be the easiest / bestest way to go.

Google Web Toolkit lets you write the UI in Java and compile it to javascript. As Dave says, it may be a better choice where the backend is in Java, as it has nice RPC hooks for that case.

Answer 4

jQuery is a fine library, but also check out the Prototype JavaScript framework. It really turns JavaScript from being an occasionally awkward language into a beautiful and elegant language.

Answer 5

There is no reason why you shouldn't use GAE and Google Web Toolkit (GWT) together. You write your backend code in Python and the frontend code in Java (and possibly some JavaScript), which is then compiled to JavaScript. When using another AJAX framework you will also have this difference between server and client side language.

GWT has features that make remote invocation of java code on the server easier, but these are entirely optional. You can just use JSON or XML interfaces, just like with other AJAX frameworks.

GWT 1.5 also comes with JavaScript Overlay Types, that basically allow you to treat a piece of JSON data like a Java object when developing the client side code. You can read more about this here.

Update:

Now that Google has added Java support for Google App Engine, you can develop both backend and frontend code in Java on a full Google stack - if you like. There is a nice Eclipse plugin from Google that makes it very easy to develop and deploy applications that use GAE, GWT or both.

Answer 6

If you want to be able to invoke method calls from JavaScript to Python, JSON-RPC works well with Google App Engine. See Google's article, "Using AJAX to Enable Client RPC Requests", for details.

Answer 7

I'm currently using JQuery for my GAE app and it works beautifully for me. I have a chart (google charts) that is dynamic and uses an Ajax call to grab a JSON string. It really seems to work fine for me.

Answer 8

You may want to have a look at Pyjamas (http://pyjs.org/), which is "GWT for Python".

Answer 9

Here is how we've implemented Ajax on the Google App Engine, but the idea can be generalized to other platforms.

We have a handler script for Ajax requests that responds -mostly- with JSON responses. The structure looks something like this (this is an excerpt from a standard GAE handler script):

def Get(self, user):
    self.handleRequest()

def Post(self, user):
    self.handleRequest()


def handleRequest(self):        
    '''
    A dictionary that maps an operation name to a command.
    aka: a dispatcher map.
    '''
    operationMap = {'getfriends':               [GetFriendsCommand],
                    'requestfriend':            [RequestFriendCommand, [self.request.get('id')]],
                    'confirmfriend':            [ConfirmFriendCommand, [self.request.get('id')]],
                    'ignorefriendrequest':      [IgnoreFriendRequestCommand, [self.request.get('id')]],
                    'deletefriend':             [DeleteFriendCommand, [self.request.get('id')]]}

    # Delegate the request to the matching command class here.

The commands are a simple implementation of the command pattern:

class Command():
    """ A simple command pattern.
    """
    _valid = False
    def validate(self):
        """ Validates input. Sanitize user input here.
        """
        self._valid = True

    def _do_execute(self):
        """ Executes the command. 
            Override this in subclasses.
        """
        pass

    @property
    def valid(self):
        return self._valid

    def execute(self):
        """ Override _do_execute rather than this.
        """ 
        try:
            self.validate()
        except:
            raise
        return self._do_execute()

    # Make it easy to invoke commands:
    # So command() is equivalent to command.execute()
    __call__ = execute

On the client side, we create an Ajax delegate. Prototype.js makes this easy to write and understand. Here is an excerpt:

/** 
 * Ajax API
 *
 * You should create a new instance for every call.
 */
var AjaxAPI = Class.create({
    /* Service URL */
    url: HOME_PATH+"ajax/",

    /* Function to call on results */
    resultCallback: null,

    /* Function to call on faults. Implementation not shown */
    faultCallback: null,

    /* Constructor/Initializer */
    initialize: function(resultCallback, faultCallback){
        this.resultCallback = resultCallback;
        this.faultCallback = faultCallback;
    },

    requestFriend: function(friendId){
        return new Ajax.Request(this.url + '?op=requestFriend', 
        {method: 'post',
         parameters: {'id': friendId},
         onComplete: this.resultCallback
        });     
    },

    getFriends: function(){
        return new Ajax.Request(this.url + '?op=getfriends', 
        {method: 'get',
         onComplete: this.resultCallback
        });    
    }

});

to call the delegate, you do something like:

new AjaxApi(resultHandlerFunction, faultHandlerFunction).getFriends()

I hope this helps!

Answer 10

A nice way is to use an AJAX library is to take advantage of Google's AJAX Libraries API service. This is a bit faster and cleaner than downloading the JS and putting it in your /static/ folder and doesn't eat into your disk quota.

In your javascript you would just put, for example:

google.load("jquery", "1.3.2");

and/or

google.load(google.load("dojo", "1.3.0");

Somewhere in your header you would put something like:

<script src="http://www.google.com/jsapi?key=your-key-here"&gt;&lt;/script&gt;

And that's all you need to use Google's API libraries.

Answer 11

Google has recently announced the Java version of Google App Engine. This release also provides an Eclipse plugin that makes developing GAE applications with GWT easier.

See details here: http://code.google.com/appengine/docs/java/overview.html

Of course, it would require you to rewrite your application in Java instead of python, but as someone who's worked with GWT, let me tell you, the advantages of using a modern IDE on your AJAX codebase are totally worth it.

Answer 12

try also GQuery for GWT. This is Java code:

public void onModuleLoad() { 
    $("div").css("color", "red").click(new Function() { 
        public void f(Element e) { 
            Window.alert("Hello"); 
            $(e).as(Effects).fadeOut(); 
        } 
    }); 
}

Being Java code resulting in somewhat expensive compile-time (Java->JavaScript) optimizations and easier refactoring.

Nice, it isn't?

Answer 13

In my blog I deal with an easy way to do this - the link is: AJAX with Google App Engine. I include all the javascript and python code I used.