Basis Technologies logo
SAP is the biggest technology company that most people have never heard of. In August 2012 SAP overtook Siemans AG and became Germany's most valuable public company. In the enterprise database market SAP are second only to Oracle and they have plans to change that. Part of their plan is to work with smaller dynamic technology partners as they seek to find a competitive innovation edge.

Brainstorm

One such exciting company, Basis Technologies based in London UK and a Gartner Cool Vendor for 2012, recently asked me to consult, train staff and help with the development of a browser based web interface for one their flagship enterprise products, Transport Express.

Web Interfaces

Basis decided on using Sencha ExtJS as the web front end application framework to match their ground breaking SAP solutions. Choosing to build web application interfaces with ExtJS offers two immediate benefits.
  1. IE 6 compatibility. Much to the chagrin of web developers the world over IE6 is still used as a primary browser in many large companies. This is due in a large part to heavy investment in applications based on Active-X in the not so distance past and many of these are remain in place.

  2. You can reuse much of your code to build a mobile application with Sencha Touch.
Code re-use relies a lot on the design of the architecture of your application. Sencha ExtJS has a built in MVC pattern, of which I think has some shortcomings, and I enjoyed exploring the pros and cons of this while sharing the joys of Javascript and ExtJS with the development team at Basis.

MVC

Through the process some ideas that I think are contrary to the spirit of MVC were found to work well in a Sencha application. For example when it comes to binding Stores directly on to View Components it seems better to look the other way and let ExtJS have its way and have a specific instance on the View know about a specific instance of the Model. This type of application architecture is something I have learned to try and avoid and apart from a few of these situations the application architecture is based on a more traditional decoupled pattern, similar to Robotlegs or PureMVC, and with more reliance on events than the one you will find described on the Secha website.

One of the drawbacks to this decoupling application 'Actors' and using application scope events to communicate is that you may have listeners in more than one place and care needs to be taken to keep them all in mind. The simple solution to all of this is to use constants for your event names. The immediate advantage of this is if you get one wrong you will get a run time error. If you use a String and get it wrong there will be no error but the event will not be handled which is much more difficult to debug.

An excerpt from app.js :


Ext.onReady(function() {

                Ext.create('Ext.application', {

                        name : 'APPLICATION_NAME',

                        config : {


                                // NOTIFICATIONS

                                SHOW_DASHBOARD : "showDashBoardView",
                                SHOW_TASK_LIST : "showDashTaskListView",
                                SHOW_TASK_DETAIL : "showDashTaskDetailView",

                                ...
 

and then listen and fire events using these constants.

In a Controller (which has a reference to this.application) :

fireEvent(this.application.config.SHOW_DASHBOARD );

and

this.application.addListener(

                this.application.config.SHOW_DASHBOARD,
                this.showDashboardViewComponent,
                this

);


Apart from the debugging advantage you can also easily search for these constants. If your editor does not have a multi file search use grep on the command line to find the instances that one of your events is being referenced in your code base.

On a Mac, or Linux, the command to run is :

grep -r this.application.config.SHOW_DASHBOARD ./*


Make sure you do this after changing directory to the top of the source code or you may end up asking grep to look for this string on your entire hard drive.

Apparently there is a Windows command that mirror grep called called FindStr but I have not test it.

Transport Express

SAP applications are massive and they tend to be around for a long time. These sorts of applications are too big to roll out a complete new version, they may even have originally been separate systems.

Updates are managed through 'transports' which handle the dependancies between different parts of an application. In a big organisation a mechanism for managing the transports is necessary as there can be many in effect, at different stages, at one time all with interlinking dependancies.

For many years Transport Express, in the form of a Delphi based Windows desktop application, has simply been the best tool around for this. The advantages of moving this functionality into a browser however are obvious and Basis Technologies have been hard at work developing just that.

If you would like to find out more about about Transport Express get in touch with the Sales Team at Basis Technologies.