When I first started working with Elgg, my whole team was very interested in making a slick webapp out of it. Let’s just say that didn’t go as planned. Long story short, we ended up with a bunch of nasty, unmaintainable, uncacheable javascript. It was not pretty. We realized we needed a more systematic, standardized approach than just slapping on new interactive features using jQuery and jQuery UI. The Elgg Core Team agreed, so in 1.8 we’ve implemented a new javascript framework for Elgg on top of jQuery with the goal of laying a solid foundation for ajax-driven development.

To start with, all of the javascript now lives under one javascript object: elgg.  That means no more hideous pollution of the global scope with ad-hoc functions.  Secondly, we’ve defined several helper functions that provide abstractions for common tasks that developers might want to accomplish on the client side.  Here is a short list of just a few of the functions we've added in Elgg 1.8:

.system_message, .register_error

Give the user feedback using the standard system message UI that Elgg provides, but without refreshing the page.

Example:

    elgg.system_message(“Hello, world!”);

.action(name, options)

Post to an Elgg action via ajax.  This function takes care of inserting valid security tokens and displaying any system messages that are emitted as a result of the action. Also, it will automatically work with your current actions, so there is no need to make your actions “ajax aware” actions before using it.  However, you may find that when calling actions via ajax, you need to return more data than just system messages.  Look for a future post on how to do that!

Example:

    elgg.action("example/action", {

        data: {...},

        success: function(response) {

            //handle the response here

        }

    });

.echo(shortcode, args, lang)

Localize client-side text, including support for argument swapping  Before, i18n in javascript used to mean inline php scattered throughout your javascript. Now you can just use this function and keep your javascript static (and therefore cacheable).  There are no new translations to write in order to get this to work, since it uses the translations defined in the standard languages files.

Example:

    elgg.echo(‘example:shortcode’, [‘arg1’, ‘arg2’]);

There’s a whole host of other features available that we could cover, so if you’d like to dig deeper, feel free to browse the source code at https://github.com/Elgg/Elgg/tree/master/js.  We are so excited to see what you do with these new capabilities!  Keep looking for more 1.8 updates on this blog coming soon.