So, what’s new in this version of Jaxer? Quite a bit, actually, and if you’ve been using 0.9x releases of Jaxer until now, a lot has changed for you as well. As usual, Jaxer is available bundled into studio (starting with the recently released 1.2 version), as well as the usual stand-alone. Read on for a full summary of what’s new…

So, here’s a quick run-down of the shiny new version of Jaxer:

• Application context settings that allowing for easier app configuration, app properties, database settings, etc…
• Database API enhancements with richer APIs for working with result sets.
• Server-side image manipulation including server-side canvas support and ability to convert to other image types.
• Native command execution API so that you can run system commands and handle the output from those.
• Asynchronous server-side JavaScript processing lets you implement callbacks in your server-side code too.
• Ability to return custom content types (e.g. json, xml, gif, html, etc…)
• Full control of the request/response lifecycle including setting redirects, headers, content, etc…
• Secure sandbox supporting cross domain calls, sandboxed JavaScript execution, META refreshes, …
• Serialization support for JavaScript objects to and from XML, E4X and JSON

Pretty cool stuff, huh? What’s really exciting to me (outside the functionality that was already there previously, such as database and filesystem access), is the ability to return custom content types, specifically JSON. JSON returns are nice since the server-side is already natively JavaScript, as well as the fact that this means creating JSON data services for your existing apps becomes a snap. If JSON’s not your cup of tea (and you’re crazy if it isn’t), or perhaps you need to deal with XML for whatever reason, the E4X (native XML for JS) support being baked in is also nice. This essentially means that you can use Jaxer as a JSON or XML service provider to not only Ajax clients, but other things like flash / flex, Silverlight, and more. Writing your own RESTful API in JavaScript = crazy delicious!

Another interesting feature that I have yet to play with personally is the new secure sandbox. What this essentially lets you do is load pages (or page fragments) on the server from other domains and let their JS execute without giving them access to the Jaxer API, or any of your other server-side code. Why is this neat, you may ask? Well, if you are aggregating content from a site (news.com in several of the Jaxer samples), the content you’re retrieving may have some JS code that could get evaluated. Before the sandbox existed, this meant a bunch of JS errors would bubble up to the client-side related to this JS code. No longer… and obviously this is also important as it means nobody could try and compromise your system by modifying the content you fetch to try and execute destructive statements (i.e. “DROP DATABASE”). Obviously, there’s a lot of room for neat mash-ups with this new goodness, and Uri Sarid has written a nice article on DOM Scraping with Jaxer.

I hope to be cooking up some new articles related to this release in the coming days, and will definitely be covering this stuff in my upcoming speaking engagements. For now, enjoy these links:

• Download Aptana Studio w/ Jaxer 1.0 RC B
• Download Jaxer 1.0 RC B Server and Stand-Alone
• Learn about all the new goodness, and how to migrate from 0.x releases of Jaxer
• Tell us what you love, or hate in the forums

Read the full entry for details on the session, but here’s a little introductory overview (for the sake of not re-writing everything, I have just copied and pasted the announcement)…

Server-side JavaScript (SSJS) is growing in popularity fast since developers realize it can drastically simplify Web app creation by letting you use using the same technology stack on both the client and the server. While server-side JavaScript is not new - it was a part of Netscape’s vision 10 years ago - times have significantly changed with 10x faster hardware and networks, making that original vision for the Web now a reality.

In this session delegates will learn how to:

• Overcome common hurdles and pitfalls of client-side only JavaScript development.
• Speed up development time by cutting out extra server-side code and processing scripts that are no longer necessary.
• Clean up your code base by reducing (or even eliminating) the number of languages needed to leverage to accomplish common tasks (i.e. Why bother with server-side PHP scripts to fetch database results when you can do it all in JavaScript on the server? Why mess with Curl to fetch content that your JavaScript code can grab in one line?)

Selby will also get hands-on with a live demonstration of how to:

• Create JSON data services for your Ajax, Flash, Flex and Silverlight apps
• Implement JavaScript RMI
• Use your favorite Ajax libraries server-side.
• Manipulate the DOM server-side
• Talk to databases, file systems, networks, and remote sites or services (cross-domain XHRs are now a possibility!

The session will show Web developers how they can put their JavaScript skills to work on the server side using technologies like Mozilla Rhino and Aptana Jaxer, which embeds the entire Mozilla browser on the server side.

About AjaxWorld…

AJAXWorld RIA Conference & Expo 2008 West
The days when AJAX is the only game in town are over, and the 6th International AJAXWorld RIA Conference & Expo in San Jose, CA, on October 20-22, 2008 is your chance to come and see it and hear it for yourself.

Because it’s easy to misjudge priorities and invest in the wrong technology, AJAXWorld will help you invest in the right one for your particular business. It will help you find the optimal balance between business needs, technology potential, and enhanced user experience. AJAXWorld RIA Conference & Expo 2008 West is where you can find what you’re going to need for business survival and Web success in 2008, 2009 and beyond.

AJAXWorld’s 80+ technical sessions, Keynotes, Power Panels and General Session Demos will help you determine which Rich Internet Technology will provide the most meaningful impact in your business, organization or service. The conference program aims to inform and inspire you toward the detailed implementation plan that you’re going to need in the next 12 months in your own initiative whether that’s SaaS, financial services, healthcare, enterprise portals, ISV applications, or whatever.

The Expo floor additionally will allow you to follow up on the premier solutions already available and to choose which best suits your needs.

http://www.ajaxworld.com/

Before we dig in to the notifications, let’s do a little work to set up an example and some assumptions we’ll be operating under for the sake of this article. First, as prototype is my weapon of choice, that’s what we’ll be using. We’ll also be using prototype as Object.Event uses it as well! Now, let’s pretend that we have a website that has some social networking aspect of some kind. We want to display a short list of who’s currently online (say the 6 most recently active people) in some sort of side bar, and perhaps a count of the total members online in a footer element. Rather than having both these elements poll the server at some interval to update their information, let’s create a little data model that these areas can use instead.

Step 1 - Create a Data Model

For the sake of brevity, this will be stubbed out in a lot of places, but we’ll create enough functionality to get the concepts across.

var WhosOnlineSummary = Class.create(
{
    initialize: function initialize()
    {
        this.totalOnlineUsers   = 0;
        this.whosOnline         = new Hash();
        this.loading            = true;
 
        // do our initial fetch
        this.fetchUsers();
 
        // set this up to poll for new data every thirty seconds...
        this.dataPoller = new PeriodicalExecuter(function(pe)
        {
            this.fetchUsers();
        }.bind(this), 30);
    },
 
    fetchUsers: function fetchUsers()
    {
        // this would probably do some other stuff too
 
        new Ajax.Request('/your/data/service', 
        {
            onComplete: function(response)
            {
                this.update(response.responseText);
            }.bind(this)
        })
    },
 
    update: function update(data)
    {
        // and you'd have some sort of logic
        // here to update the data... here's a stub..
 
 
        // I'm assuming the data returned is a JSON object here...
 
        if('totalOnlineUsers' in data)
        {
            this.totalOnlineUsers = data.totalOnlineUsers;
        }
 
        // and update our "who's online" stuff...
        if('onlineUsers' in data)
        {
            // simple way to refresh, just kill the current list :)
            this.whosOnline = new Hash();
 
            // pretend online users is an array of json objects here...
            // [ { id: userId, name: username, etc.}, {...}, ... ]
            data.onlineUsers.each(function(user)
            {
                this.whosOnline.set(user.id, user);
            }.bind(this));
        }
 
        if(this.loading)
        {
            this.loading = false;
        }
    }
});
 
// get this globally namespaced... we'll just declare it here for
// the sake of keeping things easy... you probably shouldn't do 
// this in real life ;)
var whosOnline = '';
 
Event.observe(window, 'load', function() {
    whosOnline = new WhosOnlineSummary();
});

OK, as you can see, we’ve got a very simple data model that updates itself every thirty seconds, and that our other “widgets” can easily tap into for their information. I’m not going to write these widgets out to any great extent, but I will create a small stub for the total online users functionality to help us out here.

Step 2 - Create Some Widgets

Now that we have a model, let’s start leveraging it to do something meaningful. As I just mentioned, this is only a stub, but it should give you a nice idea of where we’re going…

var TotalOnlineUsers = Class.create(
{
    initialize: function(element)
    {
        this.domElement = element;
 
        // any other useful variables could go here...
 
        this.parseOnlineUsers();
    },
 
    parseOnlineUsers: function parseOnlineUsers()
    {
        // nice and simple ;)
        this.domElement.update('Currently ' + whosOnline.totalOnlineUsers + ' users online');
    }
});

And now we’re essentially ready to do some fun stuff. As you can see, all this looks nice, but our TotalOnlineUsers widget has no way of knowing when it needs to update the display, as there’s no way to know when the data model has changed. Enter Object.Event…

Step 3 - Make Your Data Model Smart

So, we need to get our data model publishing events that our widgets can listen for. This is actually pretty darn simple since all the heavy lifting has been done for us. Let’s go ahead and leverage the power of Object.Event (I’ll provide download links at the end of this article). The first thing we need to do is provide the data model with the “event” functionality. This is a simple one-liner that we can put right after our class declaration. It looks like this:

...
 if(this.loading)
        {
            this.loading = false;
        }
    }
});
 
Object.Event.extend(WhosOnlineSummary);

That’s it! Now, all that remains for us to do is to create events inside this object that can be observed (we’ll cover the actual observing shortly). This is done through simple additions of “notify” functions. Since we’ve extended our data model class, this is also a cinch. I’ll modify the update function to include two “events”:

...
    update: function update(data)
    {
        // and you'd have some sort of logic
        // here to update the data... here's a stub..
 
 
        // I'm assuming the data returned is a JSON object here...
 
        if('totalOnlineUsers' in data)
        {
            this.totalOnlineUsers = data.totalOnlineUsers;
        }
 
        // and update our "who's online" stuff...
        if('onlineUsers' in data)
        {
            // simple way to refresh, just kill the current list :)
            this.whosOnline = new Hash();
 
            // pretend online users is an array of json objects here...
            // [ { id: userId, name: username, etc.}, {...}, ... ]
            data.onlineUsers.each(function(user)
            {
                this.whosOnline.set(user.id, user);
            }.bind(this));
        }
 
        if(this.loading)
        {
            this.loading = false;
            this.notify('whosOnlineLoaded');
        }
 
        this.notify('whosOnlineUpdate');
    }
...

As you can see, we can create any custom events that we want, and we can name them whatever we want. Pretty cool stuff, huh? So, there’s only one thing that remains, and that’s making our widget listen for these events.

Step 4 - Make our Widgets Listen for Events

You’ll notice I created two events in our data model, but we’re only going to use one for this example. Let’s get right to it, as there’s no real need for explanation here…

var TotalOnlineUsers = Class.create(
{
    initialize: function(element)
    {
        this.domElement = element;
 
        // any other useful variables could go here...
 
        // watch for updates from the data model
        whoseOnline.observe('whosOnlineUpdate', function()
        {
            this.parseOnlineUsers()
        }.bind(this));
 
        this.parseOnlineUsers();
    },
 
    parseOnlineUsers: function parseOnlineUsers()
    {
        // nice and simple ;)
        this.domElement.update('Currently ' + whosOnline.totalOnlineUsers + ' users online');
    }
});

Done. It’s really that easy!

Wrapping Up

Hopefully, you can see the huge benefit of approaching your apps this way, and integrating Object.Event. If you’ll remember, our so-called page also has a who’s online list. You could create a widget that also observes the “whosOnlineUpdate” event, so it will update whenever the model changes as well. We’ve effectively made the load on the server smaller, since we’ve only got one thing calling our data service, instead of 2 (in this case, but I’m sure there are many practical applications that would have many more somewhat redundant calls). We also know that our presentation will be in sync across all the different elements on this page, which leads to a much slicker user experience. The best part of all this? We’ve made very, very small tweaks to our code, and they were very unobtrusive as well. Enjoy, and thank Ryan for his bad-ass javascript kung-fu if you’ve got a moment!

As promised, here are your links to all the required libraries:

• Object.Event - Created by Ryan Johnson
• Prototype Framework