Delivering Next Generation User Interfaces for Business Intelligence Using AJAX A White Paper by Rado Kotorov, Ph.D. Diane Sklar Table of Contents 1 Introduction 2 AJAX – A Core Web 2.0 Technology 2 Web 2.0: Technology Evolution 3 User Experience Gap: Web Versus Desktop Applications 5 Economic Benefits: Lower Total Cost of Ownership 7 Next Generation of Business Intelligence Applications and User Interfaces 8 Why AJAX? 8 Power Painter Architecture 8 Legacy WebFOCUS Components 9 AJAX Front-End Architecture 10 AJAX Component Architecture 15 Conclusion Introduction Information Builders has released an AJAX-based thin-client report authoring application called WebFOCUS Power Painter that allows business analysts to develop print-ready, compound, coordinated reports. The application’s robust functionality required a rich and responsive user interface (UI), similar to desktop applications. This paper explains why Information Builders chose to implement Power Painter using a component-based AJAX architecture. The first section puts AJAX in the context of the emerging Web 2.0 technologies; the trends in UI, interaction, and Web application design; and the productivity gains that drive the development and deployment of zero-footprint applications. The second section focuses on the overall AJAX architecture and how Information Builders used it to leverage the development of Power Painter. 1 Information Builders AJAX – A Core Web 2.0 Technology Web 2.0 has been promising to deliver productivity gains by offering a second generation of Web services, which let people work, collaborate, and share information online. Web 2.0 applications, also known as Rich Internet Applications (RIA), use a variety of techniques, such as Web services, Asynchronous JavaScript and XML (AJAX), Really Simple [Web] Syndication (RSS), and others. Of these technologies, AJAX has attracted the most attention recently because it enables many of the Web 2.0 productivity applications. What follows describes AJAX in the context of evolving Web standards. Web 2.0: Technology Evolution Like every maturing medium, the Web is continuing to evolve. So far development has occurred in three major stages (see Figure 1): Web 1.0 – Content delivery and communication. This early stage profoundly changed the dissemination of information via two key innovations – HTML pages and e-mail. Information that was hard to reach became easy to get, and local content became as easily available as national- or international-level content. Web 1.5 – Content personalization and multilevel communication. In this phase, search and personalization made the dissemination of information more efficient, and chat rooms and instant messaging expanded communication in real time. Web 2.0 – Authoring and collaboration. This current stage is not about dissemination of information, but about productivity – accomplishing work-related tasks in a virtual space with tools and applications that are available anywhere, at any time, and can be shared collaboratively. Web 2.0 is about distributed productivity tools. In addition, distributed productivity tools have become available on demand via the Web. Evolution of Web Technologies Web 1.0 Web 1.5 Web 2.0 Static Pages Personalized Pages HTML Dynamic HTML Static/animated images Search engines Hyperlinks XML Multimedia publishing Content Publishing Content Publishing Authoring Rich Internet Collaboration Applications (RIA) Authoring Asynchronous JavaScript (AJAX) and XML Live Office Really Simple Syndication (RSS) Communications Communications Chat rooms Instant messaging E-mail VOIP Live meeting Richness of Interface Productivity Low High Figure 1. Web content publishing and communications technologies have become more dynamic and have merged with each other, giving birth to a generation of authoring tools that serve both purposes. 2 Delivering Next Generation User Interfaces for BI Using AJAX Web 2.0 is driven by a need for resource utilization and productivity gains as was the development of factories during the Industrial Revolution. The first factory was built on a river to utilize the power of the water, in a city for the labor supply, and in a single building to give workers immediate access to machine resources. The emergence of Web 2.0 technologies has been driven by the expectations of users to have immediate, consistent access to files and applications and a certain level of performance. Like the factory, Web 2.0 is driven by a need for efficient resource utilization and productivity goals but it exists in a much more complex world of distributed global enterprises. User Experience Gap: Web Versus Desktop Applications What is the role of AJAX in Web 2.0 and why is there so much excitement about it? AJAX is an enabling technology that fills the gap between the user experience with Web and desktop applications. Web applications’ lack of responsiveness and dearth of controls offset all the advantages of thin-client tools. Historically, desktop developers have leveraged two capabilities of Windows that make applications more intuitive and user friendly than Web counterparts: I Richness. When a robust set of UI components are combined, they make the user interface natural, informative, and intuitive to use. I Responsiveness. The ability of the application and the user interface to quickly adapt to user actions creates a seamless interactive experience. From a user perspective, a rich and responsive interactive design lowers an application’s learning curve, which in turn drives faster adoption. Like the desktop interactive paradigm, the Web 2.0 interactive paradigm also allows for self-learning of advanced features via visual aids. For example, well-organized dialogs with visual aids and icons allow users to accomplish specific tasks, and also provide information about additional options. These options are presented to the user interactively while the target task is accomplished. Contrast this approach with searching for functions and options in an API manual, which requires prior knowledge of a function or a procedure. Overall, an interactive design reduces the application information burden on users and allows more to be accomplished with less effort. The user experience gap between Windows and the Web was due to the limitations of the early Web client-server application model where the Web server was the platform for all processing logic and the browser was the client handling nothing more than data display. This model lacked responsiveness, which in turn constrained the richness of its Web applications. In the client-server architecture, users interact with HTML pages and each action triggers a request to the server. When the request is processed, a new page is generated and loaded in the browser. The reloading of the page has two consequences that severely limit the experience. First, reloading the page causes discontinuity in the cognitive experience (see Figure 2), which is a well-known problem in early Web applications. Flipping from page to page causes disorientation, 3 Information Builders while the allocation of tasks on different page views causes loss of context. The result is the user often gets lost. The second consequence, the reloading of the page also causes a broken and rigid interactive flow. The user cannot initiate a new interaction or change the workflow until the next page. For example, in a shopping basket or any other Web form application, the user cannot correct the quantity of an item without returning to page one. This limitation compounds as the complexity of the applications and the variations in the user interaction patterns increase, i.e., when different users have different routines and take alternative step sequences to accomplish similar tasks. User Experience in a Client-Server Web Application BrowserWeb Server BrowserWeb Server Browser Page 1 Page 2 Page 3 Task1 Task 2 Task 3 Rigid WorkflowRigid Workflow Loss of Context User Experience With an AJAX Web Application Browser Page 1 Web Server Task 1 Task 2 Task 3 | Figure 2: Comparison of user experiences. To illustrate the drawbacks of creating a more sophisticated application in Web client-server mode, imagine the user experience of writing a document in a client-server application. For each paragraph, the user must open a dialog, enter the text in an input box, and wait for the changes to be applied to the document when the page is refreshed. These steps must be repeated for every edit, format change, and copy-and-paste command. The client-server model requires rigidly structured workflows that fit in the page-action-new-page paradigm. They lack the ability to adapt to the natural workflows of diverse users. Therefore, the semi-static nature of client-server applications requires not only more clicks to accomplish a task, but also more process training. Unlike client-server technologies, AJAX uses a combination of techniques, such as asynchronous JavaScript, the Document Object Model (DOM), XMLhttpRequest, XHTML, and CSS to make 4 Delivering Next Generation User Interfaces for BI Using AJAX JavaScript calls to the server and update any element of the application that resides within the browser incrementally. In other words, the user never leaves the application since no action triggers the reload of a full page. This seemingly small change has actually had a profound effect on interaction and usability. Transferring more of the interaction to the client side not only improves the workflow, it also allows more enriching UI components to be added, bringing the user experience