NextWEB: Designing GUI for Web 2.0

This paper was drafted in 2007, as a part of work in Web 2.0

Abstract

Designing a web application with Rich graphics like drag-and-drop, dynamic field validation, transitioning from one screen to the other without page refreshes etc. was unimaginable till sometime ago. If you have used Gmail, Google spreadsheet, Flicker etc. you wonder — how do they do it? Such web applications are also called Rich Internet Application (RIA) or Web 2.0 application. This paper describes typical requirements for a Web 2.0 application and what it takes to build them. Internet browsers are probably the most sophisticated application that runs on every desktop. Today, browsers support technologies like Document Object Model (DOM), Dynamic HTML (DHTML), Cascading Style Sheet (CSS), JavaScript and Asynchronous JavaScript And XML (AJAX) that enable Web 2.0 applications to behave and look like desktop applications.

Problem Definition

Web 2.0 is often termed as a set of technologies and services available for developing and deploying web applications that behave and looks similar to desktop applications. An important characteristic of Web 2.0 application is that it enables collaboration of applications and users to enhance the application functionality. While technologies enabling Web 2.0 applications are around for sometime, the proprietary implementations from browser vendors is converging only recently.

In this paper, I focus on client or browser side web-application requirements that enhance user experience by providing a look-n-feel similar to that of desktop applications. The server side architecture and collaboration function for such application is beyond the scope of this paper.

A GUI intensive application will have more than one screen. Each screen would have a set of fields — some are just informative and some fields are user editable. For user editable fields, user would hit a button to save the data or to execute an action. This is probably over a simplified GUI requirement. Following are some of the important GUI widgets required by web 2.0 applications:

1. Traditional HTML widgets — Text box, Text area, Check box, Table, Drop-down list/Combo box, Frames with scroll bars, Hyperlinks etc. and smooth transition from one screen to another etc.
2. Complex/Rich GUI widgets — Dynamic field validation, Dynamic combo boxes, Tabs, Context Menu, Automatic field updates, Rich graphics — with drag and drop, large trees with lazy loading/checkbox/dynamic tree nodes.

Secondly, how to manage data displayed and updated by user? Managing involves validating data entered by users, identifying fields that are updated (dirty), prompting user for unsaved data, saving partial (draft) data, invoking backend calls to retrieve more data or to validate field etc. In a multi-user environment, it also means locking records in backend database while user is making changes. Further, application security requires GUI controls to be enabled or disabled based on role of the user logged in.

Finally, how to make server response faster? Turn around Response time is dependent on Server load, synchronous communications and network throughput. In Traditional web application, web server is the only workhorse moreover synchronous communication expects users to perform interface action like clicking on a button or link for fetching data. To improve application response, client should intelligently anticipate future need for certain data, and download from server before the user requests it.

To summarize, challenges in building Web 2.0 applications would include:

1. How to build the rich set of GUI features?
2. How to make best use of DOM, DHTML, CSS, JavaScript and AJAX to manage data?
3. How to enhance user experience and make responsive interface?

Solution

Unlike desktop applications development, where integrated development environment is available and GUI could be built in hours or days, developing web interface still requires lots of handcrafting. Many public domain tools available — for example Google Web toolkit, Yahoo UI library and so on. These tools do take care of most of the GUI controls. Further, these tools are available as JavaScript, hence source could be easily customized to meet application specific requirements.

It is easy to start off building a web interface using web designer tool for example ‘Dream Weaver’. Build JSPs (or ASPs) and incorporate various GUI and data management components using Java scripts and CSS. However, we found that when many screens are to be designed, a structured approach ensures that application behavior and look-n-feel is consistent across all screens.

Using this design principle, I built NextWEB framework consisting of following components:

1. Top level JSP (or ASP or Html)
2. A set of Cascading Style Sheets
3. GUI library — GUI controls and AJAX API based on JavaScript (Extended Yahoo library)
4. Operations controller — DOM management based on JavaScript
5. Event handlers — mouse, keyboard, custom event, refresh/back/forward buttons.
6. Object data management
7. Validation rules
8. Synchronized object call.

Each “Application” functional screens incorporates the above framework. Except for Top-level JSP (or ASP) all components with in the framework are shared across all screens.

Following figure illustrating various features and functions implemented based on NextWEB:

Competitive approach

With Internet Browsers converging on standards, there is a significant amount of development happening in this space. NextWEB is probably one of the best-practice for web 2.0 application development. It has worked well for our project. It is possible that similar approach is used by Yahoo, MSN, Google and other host of websites. Having said that, we did come up with a unique set of features that are not found on the Internet. These are listed in the following Innovation section.

Innovation

1. Object data management: User-role based controls, handing “dirty” attributes, and prompting user for unsaved data, undoing changes without server support, switching between Add/View modes instantly and managing locks on objects from server.
2. Advanced tree management: Yahoo tool kit supports “explorer” type tree display, it also supports check boxes. The tree library was extended to support check-box selection with lazy loading, dynamic addition and deletion of text box as leaf node, read-only and read-write (node selection via checkbox) support.
3. Simple Graphics library: Drag-and-drop objects (having some intelligent decision principle) that can form a tree structure with tooltip and auto-rearrange objects to prevent object overlapping.
4. Advanced List: Scrollable list that support custom attributes and items which are Drag-and-drop enabled.
5. Advanced table management: Collapsible table with sorting, dynamic rows and cells with +/- buttons and buttons to rearrange row positions.
6. Tooltip invitation: Cue the user about what will happen if they click the mouse on the hovered object.

Source Code

Available in GitHub.

Reference

1. Yahoo UI library — http://developer.yahoo.com/yui/
2. Google Web Toolkit — http://code.google.com/webtoolkit/