Sencha Inc. | HTML5 Apps

Blog

Implementation Spotlight: Jama Contour

March 31, 2008 | Brian Moeskau

One thing we plan to do more often is focus on how Ext is being implemented by real companies doing real business. As a perfect example, we recently ran across a company called Jama Software whose flagship product, Contour, a fully web-based requirements management application, sports a complete Ext-based user interface from top to bottom. It's easily one of the most sophisticated and visually polished Ext applications we've seen yet. We decided to find out more about Contour, so we interviewed 2 of the co-founders of Jama Software, Sean Tong and Derwyn Harris, who lead the Contour development team. Tell us a little bit about Contour and your goals for the application. Contour is designed to provide project teams a collaborative approach to requirements management. Traditionally, requirements were locked away in massive specification documents or bulky proprietary desktop apps that only a few people on a team controlled and these approaches too often resulted in frustration, errors and delays. We wanted to provide an alternative that embodies much of what Web 2.0 is all about, where the application is 100% Web-based – unlocking the requirements, use cases and other items, giving everyone instant access to the system and thus enabling teams to work faster. From a developer’s perspective we wanted to build an application that was light-weight and flexible, which meant that the architecture had to be designed such that sections could be ripped out and changed. The UI has always been the hardest part. Jama Contour Screenshot You must have evaluated other popular JavaScript libraries when starting work on Contour. Why did you choose Ext? When we started building Contour about 2 years ago we knew we wanted a rich interface and actually debated using Web Start or XUL. However we ended up using Spring, Hibernate, and JSP simply because it was what we knew best. We continued to pursue alternatives to making the UI richer and came across DWR which opened our world to Ajax. We then started evaluating different JavaScript libraries for the UI and finally settled on Dojo…Ext never even came up. A year or so later with Dojo fully in place, Dojo announced it was developing their .9 with little or no support for .4 which we were on. Knowing there was an imminent migration it was as good a time as any to re-evaluate our choice. Around this same time a buddy of mine mentioned Jack Slocum and Ext. The documentation, UI and support were impressive so we did some evaluations and decided to switch to Ext. Our choice came down to documentation, layout, tree, and grid support. What has been your experience so far using Ext in your project? The documentation has been wonderful, the code is clean and the structure makes sense. It seems well thought out. The forum is very active and the Ext team is doing a wonderful job to respond to questions quickly. The community as well is quite involved in sharing best practices and tips which is always a good sign. When we have questions, we can usually find answers in either the API or the forum. The migration of Contour from Ext 1.1 to Ext 2.0 took us more than 2 months, which is longer than what we expected. But we think the effort was worthwhile since Ext 2.0 is faster, cleaner and more consistent. We certainly hope future migrations such as 3.0 will be easier. How does Ext fit into your overall application architecture? Ext is 100% of our UI at this time. Basically our architecture is such that our UI is almost purely Ajax driven which provides a clean separation from UI logic and Server Logic. Our backend is developed using Spring, Spring MVC and Hibernate. The communication between client and server is through DWR. We have built 180+ custom Ext widgets for forms, dialogs, grids, trees etc. and the main application is a single HTML-less page. We see a lot of opportunity to open our application up with Web Services and plug-ins. Ext’s architecture being configuration driven makes it possible to fit in our future plug-in framework. What's missing in Ext, or what do you wish it did better? The biggest areas we'd like to see are best practices for memory management (e.g., properly destroying widgets, managing memory leaks, etc.), and continued enhancements to layouts and forms (enhanced layout flexibility when designing complex forms, integrated support for hiding/showing fields based on configuration rules, etc.). Do you have any advice for developers just starting out with Ext for the first time? Ext has great documentation. Pouring through all of that is essential. It’s clear and very helpful. Then check out the examples, reading the source to see how it is done. Then start creating your own, checking the API and forums for help.

There are 12 responses. Add yours.

Gunmen

7 years ago

Looks very cool to me. My compliments!

I hope Sean Tong and Derwyn Harris want to share there topbar (logo + welcome, help… logout) implementation with the community. Could you guys make a post about that inside the forums? I’m looking out for your reply.

Keep up the good work.

orangehairedboy

7 years ago

I implemented such a topbar using the border layout and an empty north section into which I could place anything. In my case, a toolbar. with logos and menus. I don’t have source to share right now, but perhaps that’ll give you an idea.

Derwyn

7 years ago

Gunman,

Thanks for the response. As for the header it’s pretty straight forward. The whole header is a north panel that is itself a column layout, where the left is just html (logo) and the right is another panel with a toolbar. The screen shot here doesn’t reflect the best part which is the CSS we applied to “hide” the clunky toolbar.

Confused

7 years ago

180+ custom widgets.  Wow!  Can someone share what these are, and how they build on top of the core ExtJS widgets?

Gunmen

7 years ago

Derwyn, orangehairedboy,

Thanks for your reply. In the weekend I will try to build a header like this.. good exercise. wink

mw-flow

7 years ago

Thanks for posting such experiences, that’s very valuable to me as I’m currently undergoing extensive research on how we could use Ext in a future project. One question though: What do you mean by “configuration driven”? =)

Vinny Carpenter’s blog - » Daily del.i

7 years ago

[...] Ext JS Blog - » Implementation Spotlight: Jama Contour - Contour is a fully web-based requirements management application, sports a complete Ext-based user interface from top to bottom. It’s easily one of the most sophisticated and visually polished Ext applications we’ve seen yet [...]

hgomez

7 years ago

Did you use taglibs or java libraries to componentizes and reuse all the widgets ?

Advice welcome

Daily del.icio.us for March 27th through April 3rd

7 years ago

[...] Ext JS Blog - » Implementation Spotlight: Jama Contour - Contour is a fully web-based requirements management application, sports a complete Ext-based user interface from top to bottom. It’s easily one of the most sophisticated and visually polished Ext applications we’ve seen yet [...]

business home

6 years ago

business home

rss

6 years ago

yo

great

Delicious Links - Fun with Java and JavaScript | C

6 years ago

[...] - Ext JS - Blog extjs.com/blog/2008/03/31/implementation-spotlight-jama-contour/ [...]

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

Commenting is not available in this channel entry.