Implementation Spotlight: VersoChat
June 2, 2008 by Brian Moeskau
Last week I had the pleasure to sit down with the team at Red Sun Systems to have a demo of VersoChat, their website chat management application. This is a very interesting tool that allows visitors to request chats with site operators, and for operators to push chat requests to site visitors. The console application includes many features for monitoring site usage, managing and transferring chat sessions, etc. and the UI looks fantastic! VersoChat is an existing application, but they have recently retooled the user interface from the ground up using Ext 2.0 and are launching the new version this week.
Tell us a little bit about VersoChat and how it evolved from its original version.
VersoChat is a web-based, multi-platform live chat solution with real time analytics for businesses with websites. Originally, VersoChat used simple PHP/MySQL scripts for both the font and back ends. Each chat session had to be opened in a separate browser window, and the live monitor was missing some of the functions that now are possible thanks to Ext. With Ext everything has changed. The UI is much more intuitive and easy to learn, and we implemented a lot of new features. For example, ChatTabs (multiple chats can be now handled in one window), GeoIP, IP labeling and many more great features are now possible that make VersoChat a top notch solution for live chat! VersoChat currently is only web-based, but now with Ext enabled our possibilities are endless and we plan to create a downloadable version with Adobe AIR in the near future.
Did you evaluate other JavaScript frameworks when starting work on VersoChat? Why did you choose Ext?
Our general development experience was very good. Our live chat application was built in PHP and we wanted to have a robust, responsive and desktop-like front end for the new version of our application. We compared various JavaScript frameworks and found Ext’s features most suitable to our requirements because the widgets were extremely good-looking with professional quality. And most of the widgets we needed like panels, grids, forms etc. were available out of the box which made it a lot easier. When I came across your website and saw the BorderLayout example, I just fell in love with it and thought: “Where were you Ext when we started development on the first version of VersoChat?”
How does Ext fit into your overall application architecture?
The main work was in porting an already working application (chat support system) to Ext. So our work was really on the front end side of things along with changing the back end code output to suit our new AJAX needs. Our application still has PHP/MySQL as the back end, and Ext serves the front end. As our application was already running, there were some problems and issues in porting it to Ext, but those were gradually solved.
The VersoChat operator console is a pretty complex application. How did you manage the coding complexity?
It is true that the VersoChat operator console is a complex application, but given the power of Ext, it was not much of a problem. We mainly required grids for presenting user data and forms for getting input from the user. Ext’s Grids, Forms and Tabs made programming a lot easier. Much of the AJAX request handling, error checking and validation was easily and gracefully handled by Ext.
What features could we add to Ext to make building a rich application like VersoChat easier in the future?
Tab panels don’t support title/header which is required in certain circumstances. Size of Ext is an issue but considering the functionality it provides, you can’t really complain. And once the things load the performance is always good afterwards.
Do you have any advice for developers just starting out with Ext for the first time?
Learning Ext can be a bit intimidating in the beginning due to its steep learning curve but I guess that’s true for every framework out there. So be patient! Layout implementation is a major part of this framework and many issues can be solved just by using the right layout for parent and child elements, so try to understand the Layout structure of Ext.


Posted on June 2nd, 2008 at 11:46 am
[...] is a spotlight from the ExtJS blog called VersoChat. Mostly, I just read the blog, skimmed their website and looked closely at the [...]
Posted on June 2nd, 2008 at 12:22 pm
Thanks for the inspiration. I like the icons in the grid column header. Nice work guys.
Posted on June 3rd, 2008 at 4:45 am
This application looks great! Well done and a great use of Ext!
Posted on June 4th, 2008 at 4:36 pm
Wow, that’s excellent. It’s great to see more use of Ex.
Posted on August 3rd, 2008 at 10:52 am
Wow! Such a splended use of BorderLayout. This is a great application and something people needed for a long time. Great job!
Posted on November 19th, 2008 at 7:22 am
nice work, excellent