Web-applications in 2005 - A case study

The last year there have been many good examples of very useful web-applications. Finally software companies have looked beyond the initial benefits of using web-application - such as no need for local installation, setting up your own server, lower distribution costs, ubiquitous access. Now the focus have shifted to building an effective & good looking user-interface and integration (RSS, Web Services, XML).

Among these new breed of web-applications are:
- Flickr from Ludicorp. Organize and share photos.
- Bloglines. RSS reader.
- 24SevenOffice. CRM/Invoice/Accounting/E-mail.
- Salesforce. CRM
- Del.icio.us. "Social bookmarks"
- Basecamp from 37Signals. Project management
- Gmail from Google. Email

In the list you'll find 24SevenOffice.com - the company I work for. In this post I will outline my experience with building a web-application. Recently I was in charge of making a new version of the CRM module in 24SevenOffice.com.

You can test drive 24SevenOffice and the CRM module here. Just click this link and choose CRM -> Customer Relationship Management in the menu. (Internet Explorer 5.5+ required).

A web-application is exactly that. An application. On the web. That means we must take advantage of the web, but it also means we must take with us the positive sides of regular applications..that has been used and researched for many years. Many web-applications "forget to" include simple things like keyboard shortcuts. It's easy to implement using JavaScript. It is critical for repeated tasks like creating invoices, adding accounting entries, looking up customers etc. For users who are accustomed to DOS/Windows applications with heavy use of keyboard shortcuts, a web-application can be very ineffective to use without it.


Speed has been a major issue when it comes to using web-application effectively. This is due to the client/server environment, the typical web-interface and little knowledge of time saving techniques. The solutions is having the server do the required database and back-end operations, while the client can take care of the GUI with JavaScript and CSS - as much as possible. On the web much of the waiting time for the user is actually caused by the GUI to be downloaded and rendered by the browser. By minimizing the trips to the server with smart ways of collecting data (in the background using the XMLHTTP object) and by pre-loading scripts to be executed later on.

Case study - CRM module

After the CRM module is loaded I want to search for a customer. Here I will search after 24SevenOffice:



I hit enter and the search list (iframe) is presenting the results. The first result is automatically highlighted. I can click enter to go to the first result or I can use the keypad to move down through the list. Alternatively I can type more or use backspace and the search query will be change in the search field. I want the second company in the list and click the arrow down and then hit enter.



JavaScript takes care of loading the customer information. The tab panes are automatically displayed and a XMLHTTP request is made to get an XML file with the information for the selected customer. Looping through the DOM Document the values are inserted into the form. The user feels like he/she is using a locally installed application. The customer information is loaded in less than a second.



The tabs below are shown with all the associated contacts on the selected company. The count on each tab is updated in the background. The reason for this is so the user does not need to click the task tab to see how many tasks there are listed on this customer. That would require an extra click and extra waiting time for the user.




As in Microsoft Windows with normal applications I can right click in most part of the system. Here is an example of right clicking the customer form and a menu appears. From this menu I have access to most operations such as new appointment, send SMS, save...and more. This helps reducing the clutter in the user-interface and it is a quick and easy way to access both critical and less frequently used tasks. Again this is easy to accomplish with JavaScript. With the onContextMenu event and the use of Div's.



After I have got the information I required on this customer. Maybe I was looking for the phone number or needed to update the address. Now I want to add a new company - a potential customer who just called. I click the 'new company' button.




Again, only JavaScript is used and information is gathered in the background using XMLHTTP. The tab panes available on an existing customer is now hidden. The values from the last customer are reset and the only values inserted are the next available customer id and the default country.




Want to see it live? Click this link for a test drive. Select CRM -> Customer Relationship Management in the menu (Internet Explorer 5.5+ required)



More information about web-applications and why 2005 will be the year web-applications finally will become useful and common:

Because 2004 is the year that Google led the charge in making applications that showcase The Web Way -- using just the simple and flexible mix of dynamic HTML, JavaScript, style sheets, and a DOM-capable browser -- respectable and cool

Weblications

I think that 2005 will be the year that proper use of the DOM really takes off. Most JavaScript on the web still hails from the late '90s, but change is in the air.

2005: The year of the DOM

Now that we can make web applications, here's why we should, and will, do it.:

- The application lies at only one place
- The user doesn’t need any software
- The user isn’t the administrator
- The administrator is the application’s programmer
- The application makes no assumptions about the user
- Multiple versions is a thing of the past
- It’s portable
- It’s simple and trustworthy
- The app architecture is transparent to the client

Web Applications - The Wave Of The Future

Technorati: Ajax, CRM, JavaScript, WebApp