Sencha Inc. | HTML5 Apps

Blog

Ext JS Customer Spotlight: ClickTime

June 01, 2011 | Jay Robinson

ClickTime Web Timesheet is a web-based time-and-expense tracking tool. It’s a SaaS (Software as a Service) product that’s used by over 1,000 corporations, nonprofits, and governments around the world. Customers use ClickTime to track labor costs, turn billable time into invoices, and comply with external audit requirements. Our customers include firms like Visa, GE, RealNetworks, and the Red Cross.

Screenshot of Ext JS Customer ClickTime
ClickTime’s web-based time-and-expense tracking tool built with Ext JS. Click images to view full-size.

We estimate that using Ext JS has yielded roughly a 50% time savings for the dev team.”

Why We Chose Ext JS

We’ve been using Ext JS since version 2.0. At the time, we chose Ext JS primarily because of its excellent assortment of out-of-the-box, cross-browser UI components and comprehensive DOM/CSS manipulation capabilities. Over the last four years, the collection of components and widgets has vastly grown and improved. However, the more we use Ext JS, the more we are impressed with its design and extensibility, and not just its wide array of controls.

Today, we are going strong with Ext JS and have no intention of switching. Now, we can point to not only the quality of controls like DateField and the indefatigable GridPanel, but also the ease with which we can extend any component to suit our needs, the design robustness of the existing controls and methods, and the awesome people in the Sencha community who provide excellent support/discussion on the forums and constantly produce a steady stream of quality user extensions.

Screenshot of Ext JS Customer ClickTime

One recent example of the extensibility of Ext JS components comes from our Timesheet View. This page allows a user to view an entire timesheet, navigate between timesheets, or review someone else’s timesheet. In addition, depending on the user’s permission level, he or she can perform a variety of administrative functions very quickly and easily (think timesheet submissions, approvals, and locks). As you can probably imagine, this page can get really cluttered, really fast, and we were looking for a way to maintain our standard of simple, beautiful UI while still presenting the user with a whole lot of info and, just maybe, power.

Screenshot of Ext JS Customer ClickTime
Complex timesheet web application built with Ext JS.

Given the hierarchical nature of time data (e.g. “I worked on a task under a given job for a given client”) combined with how much time we actually needed to show (some timesheets are longer than a month), we decided the best way to present this info would be with a locking tree grid panel. We were quickly able to find a handy UX tree grid panel, combine it with a version of the locking grid panel that we were already using, and had a working prototype within a week. After another week, we had a beautifully styled panel that locked on 3 sides and was able to meet our criteria for presenting a lot of data simply and beautifully. Incidentally, we were recently able to add an interactive, locking menu on the left side in less than a day.

Screenshot of Ext JS Customer ClickTime

We also recently began to play around with Sencha Touch, as part of an effort to redesign our mobile app. The transition from Ext JS to Sencha Touch was really quite seamless, and we had a full working prototype of our mobile app up within a day.

h3{clear:left;}. Business Value of Using Ext JS

Overall, we estimate that using Ext JS has yielded roughly a 50% time savings for the dev team, between the controls that are available out of the box, how well documented they are (though we love that we can just look at the source when we’re unsure about something), and how we can extend and reuse at will.

Our Advice to New Developers

Most importantly, you should get a grasp on object-oriented JavaScript. The myriad of Ext JS examples available online are simple and useful, but to use the framework in any real, meaningful way, you must understand concepts like scope. In addition, we suggest getting a handle on how Ext JS does data management (e.g. How does a store work? What is a proxy?). Definitely take a look under the hood of Ext.Component and the difference between extending and overriding. Finally, take a bit of time to learn your way around the documentation, which has proven invaluable to us many a time.

Final Thoughts

We are very excited about the future of Sencha products and are delighted to be part of the Sencha community.

There are 9 responses. Add yours.

Johan van de Merwe

4 years ago

Looks very impressive. One more remark from our experience, about the business value of Extjs. Well, that you can achieve a higher efficiency on the development is a fact, but what we notice is that our customers are more impressed by the optics than of other offers they get. So the development efficiency win is more or less a one-time trade-off, but the optics and friendly user interfaces make our customers come back for more. But again, you guys did an impressive job, congratulations.

Eagle Eyed Dave

4 years ago

02:28pm to 02:31pm is 0.25 hrs. Yup, something wrong there!

MrSparks

4 years ago

@Eagle Eyed Dave,

I’m guessing they have a concept of 1/4 hour (0.25) being the smallest allocatable time slot. Which makes sense from a billing/invoicing point of view.

Allen Liu

4 years ago

Hi Eagle Eyed Dave,

“02:28pm to 02:31pm is 0.25 hrs” is a design feature. For this particular client, the minimum time increment is set to 0.25 hours, which means any time entered in the Hours field will be rounded up to the nearest quarter hours.
Thanks for your comment and interest!
allen

Donald

4 years ago

Wow Very Impressive

@ Eagle Eyed Dave   Most companies have a minimum billable unit….I would assume their time tracker is rounding to that unit which would be 15 minutes…..

AwesomeBob

4 years ago

Wish I had finished my app that is a mirror of this almost exactly.

halcwb

4 years ago

This looks like a real app! As we are in the process of using Ext 4 to build an application, hopefully getting as impressive as yours, I am wondering. Are you migrating your application to Ext 4, or do you plan to? And what do you think of using Ext 4 for building such a large application as yours?

Yoh Suzuki

4 years ago

We’re evaluating Ext JS 4.0 and expect to utilize it as we add new features to ClickTime, and we plan to upgrade existing code at a future point after we gain more experience with it.  Speaking from our experience with Ext JS 3.x, we expect Ext JS 4.0 to be an even better, more modern component-based framework on which to build a large app.  We’re especially excited about charts and faster grid components.  smile  Good luck with your application!
Yoh Suzuki

Spud

3 years ago

Hey, that’s powefrul. Thanks for the news.

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

Commenting is not available in this channel entry.