We all know that the modern user wants to use our applications on any device, from anywhere in the world. This used to be a real challenge for applications using EMC Documentum. The out of the box applications such as WebTop, Administrator and TaskSpace where all designed to be used on a PC or laptop with a big screen. If you try to use those on your smartphone, the usability is going down the drain. And I’m not even mentioning that is uses a browser plugin for file transfers.
With the advent of Documentum 7 and xCP 2, things are looking better. The new xCP application UI works in all major browsers without using plugins. It also scales better to fit on smaller size screens.
However, there is still a way to go before the xCP UI can be called Responsive.
The xCP UI was designed for PC screens, not with ‘Mobile first’ in mind. It uses a lot of screen area by default and tries to shrink and rearrange things on screens that are smaller. For the designer it is difficult to control how things will look on smaller screens.
Fortunately there is another novelty in xCP 2: REST services.
The addition of REST services makes it possible to use any of the popular HTML5 / CCS3 / REST frameworks to write beautiful, responsive client applications.
Since the Bootstrap framework (by Twitter) is one of the most popular UI frameworks and it was highly recommended by the InformedConsulting UX experts, I decided to see how difficult it would be to write an application using Bootstrap.
(Last week at EMCWorld #MMTM14 it was mentioned that EMC is also looking into the use of Bootstrap for the
future responsive UI; seems I am ahead of the game 🙂
Setting up
Bootstrap consists of some CSS styling and some Javascript. You combine that with an HTML page and voila, you have a Bootstrap application. You don’t need a Java application server to host the application, any old webserver will do. To the webserver it is just like serving some static content pages. All the dynamic behaviour is performed in the user’s browser by Javascript calling REST services on the Documentum server.
This means that the initial setup consists of just downloading Bootstrap, an HTML page and maybe some images and javascript to your web server and you’re good to go. In my case I chose to re-use the ROOT webapp on the server that also hosts the REST services. This also removes any cross-site scripting issues that may otherwise occur.
UX Design
To start your application, you will need to do some user interface design. You need to decide where you want to have your header, footer, menu’s, tabs, panels, dialogs etc.
You can do this with an HTML editor, but you can also use one of a growing number of UX Design tools.
For instance you could try out Pingendo
Adding behaviour
Once you have the UX Design, you can add javascript to add the application behaviour. Again this could theoretically be done using a text editor, but tools will make your life easier.
In my case I used Aptana Studio.
This helps with syntax highlighting, syntax checking (have you closed all your braces?), code outline, etc.
Bootstrap uses jQuery for its dynamic behaviour, so calling a Documentum REST service is as easy as using $.ajax(). The Documentum REST services return JSON (Javascript Object Notation), so it if very easy to use
the returned objects in your Javascript code. If you want to add some modern behaviour, such as lazy loading result sets, there are many Bootstrap and jQuery plug-ins that can be used. You should however be carefull that the plug-ins are a responsive to screen size as Bootstrap itself is. Some older plug-ins aren’t very responsive in design.
Testing
Testing the application is easy in some ways and difficult in others.
Whenever you make a change, you just press Refresh in your browser and you can test. No need for lengthy deployments, server restarts and all that. Single-step debugging is also easy. You can use the F12 functionality of your browser (Firebug, or the equivalent functionality in IE). Apart from seeing exactly what code is beeing executed, this will also give you insight into the values of all variables, parameters and javascript objects the code is working with.
What makes it more difficult is that some bugs will just crash your javascript and debugging will give no clue where the error is, so those kinds of bugs can be hard to find.
I also wonder what happens when your codebase grows. Javascript is less structured then Java or .NET, which makes it quick to work with, but could also lead to spaghetti chaos if good design patterns are not used.
Results
For my project the easy setup and easy deployment and testing resulted in the first working application demo after only a day! Most of that day was spent on the UX Design. After this first day, things got a little more involved, with more work being spent on coding and testing.
Now, a week into the project, we have an application with a few tabs, a query builder, a browse tree, right-click menu’s, browser stored history and more. And it looks good too, on my laptop, iPad and smartphone!
Here is what it looks like:
I am really happy with the results so far.
Let me know what you think.