This paper was drafted in 2007, as a part of work in Web 2.0
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:
- 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.
- 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:
- How to build the rich set of GUI features?
- How to enhance user experience and make responsive interface?
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:
- Top level JSP (or ASP or Html)
- A set of Cascading Style Sheets
- Operations controller – DOM
- Event handlers – mouse, keyboard, custom event, refresh/back/forward buttons.
- Object data management
- Validation rules
- 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:
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.
- 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.
- 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.
- 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.
- Advanced List: Scrollable list that support custom attributes and items which are Drag-and-drop enabled.
- Advanced table management: Collapsible table with sorting, dynamic rows and cells with +/- buttons and buttons to rearrange row positions.
- Tooltip invitation: Cue the user about what will happen if they click the mouse on the hovered object.
Available in GitHub.