Introducing Bryntum Robo

Today we are proudly rolling out the first release of Bryntum Robo – a new undo/redo framework for the Ext JS data package.

Undo/redo is not a trivial feature to add to web applications. An application might define complex data processing rules involving data from different collections, and sometimes data can be mistakenly stored in the user interface. Being able to accurately revert the data to an earlier state can be tricky. Thankfully the task is easier for modern Ext JS MVC applications where data is kept in stores and models. In such an application, any change in the Model layer is reflected by the View (user interface) and we only need to track the state of the Model. This means Robo integration can be done with minimal code adaptations. Robo is also very extensible and will work with applications using different architectures.

To see Robo in action please click here.

How it works

Robo works by recording all changes in the data stores it knows about and keeping them in a log. Changes are recorded in batches, called “transactions” which form two queues – an undo queue and a redo queue.

Integrating Robo in your application

To prepare your application for integration with Robo, first you need to include the Robo.data.Model mixin in your data models:

Ext.define('Example.model.Branch', {
    extend      : 'Ext.data.Model',

    mixins      : { robo : 'Robo.data.Model' },
    ...
});

Next, you also need to include the Robo.data.Store mixin in your data stores. It will provide your stores with additional methods making the them aware about the current state of the application – to know whether it is doing normal processing or undo/redo processing.

Ext.define('Example.store.BranchTree', {
    extend      : 'Ext.data.TreeStore',

    mixins      : { robo : 'Robo.data.Store' },
    ...
})

Finally, to enable undo/redo support for your data stores simply create a Robo.Manager instance and configure it with your stores:

var yourStore1  = new Ext.data.Store({ ... });
var yourStore2  = new Ext.data.TreeStore({ ... });

var robo        = new Robo.Manager({
    stores : [ yourStore1, yourStore2 ]
});

// start monitoring
robo.start();

Then somewhere in your user interface, you could add two buttons to invoke undo/redo:

// some toolbar config
tbar    : [
    { xtype : 'roboundobutton', robo : robo },
    { xtype : 'roboredobutton', robo : robo }
]

That’s all! At least for simple cases where there’s no additional data processing and recalculation. For more complex cases please consult our Getting started guide, which explains the possibly required code adaptations.

Well tested

As with all our products, the Siesta test suite ships with the product. To assure Robo works in even extreme situations, we added a serious stress test which tests both flat Stores as well as TreeStores. In the test, a number of data stores are added to an Undo Manager and 30 random CRUD actions are performed on those stores. After actions are completed, the test first undoes and then redoes all the actions and verifies that all stores are in a correct state.

Whats next?

We encourage you to try the Robo examples or download a trial and give Robo a try with your application. As always, your feedback is very welcome in our forum.

We hope you will find the Robo product useful!