Sencha Inc. | HTML5 Apps

Blog

Implementation Spotlight: VersoChat

June 02, 2008 | 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.

VersoChat Console Screenshot

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.

There are 21 responses. Add yours.

UI Libraries | commadot.com

6 years ago

[...] is a spotlight from the ExtJS blog called VersoChat.  Mostly, I just read the blog, skimmed their website and looked closely at the [...]

Jeff

6 years ago

Thanks for the inspiration.  I like the icons in the grid column header.  Nice work guys.

Phunky

6 years ago

This application looks great! Well done and a great use of Ext!

Jay Garcia

6 years ago

Wow, that’s excellent.  It’s great to see more use of Ex.

Sefa Keles

6 years ago

Wow! Such a splended use of BorderLayout. This is a great application and something people needed for a long time. Great job!

TaunT

6 years ago

nice work, excellent

Estetik

6 years ago

Thanks for the inspiration. I like the icons in the grid column header. Nice work guys.

seo

6 years ago

I like the icons in the grid column header..fantastic work dude!!
<a>seo</a>

medyum

5 years ago

nice article.thank you
Medyum

siki?

5 years ago

I am grateful to you for this great content.

l

siki? videolar?

5 years ago

I am grateful to you for this great content.aöf

ssk sorgulama

5 years ago

his application looks great! Well done and a great use of Ext!

zerrin egeliler

5 years ago

Wow, that’s excellent. It’s great to see more use of Ex.

medyum

5 years ago

his application looks great! Well done and a great use of Ext!

Tag Ekle

5 years ago

This is good.

Ben 10 Mania ?zle

5 years ago

Good chat.

ravindra

4 years ago

i want create chating application in extjs how it create

Kaliteli Bilgi

4 years ago

Wow, that’s excellent. It’s great to see more use of Ex.

Madan

4 years ago

Site Not Working….... :(

Bon Toy

3 years ago

I was lucky to find your http://www.sencha.com site.       
I have to say that it’s a classy blog! I love how detailed each of the entries are. They are well balanced, both informatory and funny, and the pictures are nice too.       

cardaddy

3 years ago

Hey there! I fully agree with your thoughts.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.