UI design is all about simplicity. What does it mean to be simple?
This is the first of three blog posts showcasing the kickass job that the XRebel team has done in making the XRebel UI awesome. This was one of the most challenging projects for our developers, but they sure have done a great job! With these changes in the XRebel UI, you can get insight into large Java enterprise applications.
XRebel is the lightweight Java profiler and it has been our aim to deliver information that Java developers need in a simple but useful way!
So what exactly did we do?
Organized I/O Data
It is all about displaying data, data and more data. Hey! We are talking about profilers, remember?
XRebel is great at displaying IO events, including SQL queries, HTTP invocations, NoSQL database queries, and RMI calls. These events can be represented in two ways, either as a call tree or as a list of events.
The call tree in the Calls tab on the XRebel UI provides a trace of all queries from the start of the execution leading to the IO event. This gives the user insight, as to how the query was executed.
Scaling from a long chain of calls to a manageable data set
Visualizing the call tree is probably the most challenging part for all profilers, and the most beneficial for a developer. Didn’t I mention earlier that the main focus of the product is to make it as super useful to the user? We are all accustomed to looking at a call tree, we as a tree, with a main stem and branching from each one of them. So each call is a tab shift to the right. The most common use of XRebel had also been in large enterprise applications and with that comes the problem is that in case of a large number of intermediate nodes – between the root node and the leaf node – the calls tree shifts more and more to the right. Forcing the user to scroll horizontally, which makes it harder to use. Ah! what a pain :(
The very first version of XRebel relied on the user to specify filtering rules, so that only the relevant parts of the tree would be rendered. But this led to the risk that we are perhaps not showing the relevant pieces of data…
The challenge remained: how could we show the relevant pieces of data? And without making the user scroll too much.
So could we do it? The answer is a big proud YES! Simple, XRebel collapses the chains of nodes.
Since the intermediate invocations could potentially provide additional relevant information to the developer, XRebel simply collapses it and allows the user to expand the tree as required. The intermediate nodes are then rendered within the single indentation space, between the two visible nodes.
This design trick allows us to reduce the demand for scrolling the view horizontally – even if the user would expand all collapsed nodes. The result is a much more scalable UI. Nice!
Huge advantage of this approach is that XRebel manages to render call trees generated with enterprise scale applications. To prove that, here is a snapshot of JIRA.
Got larger apps? And use XRebel? We will be happy to see what you’ve got. Tweet us (#XRebel) or post a screen capture in the comments :)
This is one of many highlights in the XRebel UI. Please follow us on Twitter – @zeroturnaround or watch this space for two more posts on the topic. We will talk about how XRebel tracks SQL queries, HTTP invocations and NoSQL queries in a consistent manner, and how users get a choice of viewing information that is most relevant to them. Come back for more!
Ready to explore the awesomeness of XRebel? TRY XRebel for Free Now!