Sencha Inc. | HTML5 Apps

Blog

Implementation Spotlight: Eaton’s Intelligent Power Manager

August 31, 2009 | Abraham Elias

I recently had an opportunity to sit down with the very talented developers at Eaton to discuss their recent software release. Read how Eaton's superstars Jonathan Bonzy, Sebastien Volle, and their team implemented an amazing RIA for managing power with Ext JS. Eaton Corporation is a diversified power management company, with 75,000 employees, that sells products to customers in more than 150 countries. Eaton's electrical business is a global leader in power distribution, power quality, control and industrial automation products and services.

What is Intelligent Power?

Eaton’s Intelligent Power® Manager is a robust and scalable program that can substantially lower costs for supervising networked uninterruptible power systems (UPSs) and associated equipment compared to using major network management system platforms. The Ext JS Framework is used as a core UI component in Intelligent Power Manager where all views, boxes or grids are rendered through Ext methods.

Intelligent Power Manager main view with node list and details for selected node

Did you evaluate other JavaScript frameworks for the Intelligent Power Manager? Why did you choose Ext?

We compared Ext JS to many popular libraries (jQuery, Prototype, MooTools, Script.aculo.us, Dojo, Rialto, Qooxdoo, etc.). We found Ext JS to be fully open source with a strong community combined with great technical support from the authors themselves. The Ext JS cross-browser widgets set is huge, which allowed us to complete our entire interface for Intelligent Power Manager. Moreover, Ext JS's small footprint and low memory consumption surpassed our IT environment constraints where Intelligent Power Manager can run for months on low-cost appliances.

Equally attractive, the Ext JS Framework offers royalty free use — a key criteria for our client library in Intelligent Power Manager. Due to our strong constraints with commercial usage and our long-term supervising role having a trusted partner was key.

After comparing several JavaScript frameworks, Ext JS appeared as the most adapted solution to our needs. Ext JS is a very well designed, lightweight framework which integrates core JavaScript language improvements, DOM manipulation helpers, and high level widgets - saving us several months worth of development. A few days were enough to acquire the basics of the API thanks to fantastic documentation. A huge thank to all Ext JS development team and the great community.

How does Ext fit into your overall technical architecture?

Intelligent Power Manager is a single page rich internet application. Ext JS is used for all client side needs from AJAX requests to data rendering. Ext JS's State Manager allows us to keep information on selected views or on hidden, expanded and collapsed panels. Our server receives state information from Ext JS Client, keeps it in a View Manager component, stores it in a database and sends events to Ext JS Client when structure changes.

User can drag and drop devices on custom maps and view their status

How have your customers responded to your new interface?

They love it! Intelligent Power Manager is a giant leap from our previous supervision tool. Power Source view is a custom implementation of the Ext portal example

What are some of the key Ext features that you found useful in building your product?

Viewport, grids, accordion, dialog box and state manager are key features of Ext JS that were building blocks of Intelligent Power Manager. Our software is built on a three-part interface with tree views on the left side, grids with devices or applications called nodes in the center and selected node details on right side. The State Manager keeps user interface changes in memory. The grid component quickly renders data. Lastly, the dialog boxes are used for settings and the accordion allows the user to customize information.

Dialog boxes are used to assign action settings

What features could we add to Ext to make building a rich application like Intelligent Power Manager easier in the future?

Ext custom theme generator could be a great feature for applications that need more than blue and gray colors. Intelligent Power Manager uses Ext blue theme with its own icons for its look and feel. Ext graphical resources aren’t available to custom CSS sprites and there isn’t any clear documentation on CSS rules to change.

Do you have any advice for developers just starting out with Ext for the first time?

Ext JS’s learning curve may be tough if you’re building a one page application, but samples and the forum will be the answer to all your needs. As a first step, developers could start with an HTML base with some Ext JS mixed in their code before using directly viewports and layouts.

Eaton and Intelligent Power are trademarks of Eaton Corporation.

There are 32 responses. Add yours.

Jay Garcia

5 years ago

Another kick ass Ext JS implementation. Sweet.

Joe

5 years ago

Very nice site - well done!

David Davis

5 years ago

Very nice!  I wonder if they used the chart widgets for the graphs.

Nick

5 years ago

Great implementation guys! Keep up the good work!

Dmitry Dulepov

5 years ago

I disagree that ExtJS learning curve is tough! It is really easy to learn, especially with two good books available now (and the 3rd coming out soon). Learning ExtJS was simple and fun comparing to, for example, my struggling with Magento Commerce.

ExtJS is a really cool framework! If you can learn to count, you can learn ExtJS.

Jonathan Bonzy

5 years ago

Thank you for your article and all these great comments smile ExtJS is an awesome solution! By the way, Eaton Intelligent Power Manager is a team work done with Jérôme Lecuivre (project manager), Luc Descotils (software architect), Arnaud Quette (Open Source project leader http://www.networkupstools.org ), Sebastien Volle (Javascript expert), Eric Clappier (SNMP expert) and all Eaton test/validation teams. Moreover, if you have any questions or need any information, you can send me a mail to jonathanbonzy [at] eaton.com wink

Sébastien Volle

5 years ago

Thank you for the nice comments.
About the learning curve, we started working on IPM a couple years ago and their was not as much resources for ExtJS as their is today. I agree that with all the literature that now exists and the fantastic community and support, learning ExtJS is a breeze.
This is one more reason we’re glad we chose ExtJS and plan to stick with it for years to come.

As for the graph panel, we came up with our own implementation using VML for Internet Explorer and canvas for other browsers.

Royce

5 years ago

This is the most impressive production ExtJs application that I have seen. 

Learning ExtJs is, of course, relative.  It’s one thing to learn the API and how to do simple things like integrate a small function into an existing HTML application. 

Its a whole different beast to create an enterprise level application such as this one!

Nathan

5 years ago

Pop open that bottle of champagne!  You guys deserve to celebrate for creating such a cool app.  I just bought a 5110 on Amazon.  http://www.amazon.com/gp/product/B000J3L2UU I’ll let you know if I like it.

Mats

5 years ago

@Sébastien Volle

Looks really slick!! One thing caught my eye in the text. I always considered the footprint and memory consumption as the weakness of ExtJS not the opposite as stated in the text:
“Ext JS’s small footprint and low memory consumption”

Just curious, which JS framework would be larger then Ext and consume more memory?

Again, really great work!

Sébastien Volle

5 years ago

To be honest, I would not know how ExtJS compares with other Rich Client javascript frameworks today on this matter. When we started prototyping for IPM a couple years ago, ExtJS provided the best footprint/features ratio, and provided great results on memory consumption compared to our previous implementation, which had serious memory leakage issues (especially with IE6). This last point was especially important since IPM is a one-page monitoring application that could potentially run for weeks without a page refresh.

Rodrigo

5 years ago

Congratulations for such a good work (both, EATON and ExtJS). Your application is impressive. We, at Estudio Cero, want to explore ExtJS and we’d like to know which are the books that Dmitry Dulepov mentions in his comment.
Can someone give us titles or ISBN?
Thanks in advance

Jesus

5 years ago

I must say that I have developed some applications using this framework, and your site is really good.

@Dmitry Dulepov

Can you tell me the names of these two books you mention? I’ve been looking for books to learn more about ExtJS but I haven’t found any.

Artyom Shalkhakov

5 years ago

It’s interesting that Eaton Corporation is also a commercial user of the Haskell programming language. I wonder whether people who created the Atom DSL and this program interact.

Luc Descotils

5 years ago

@Artyom Shalkhakov

There is no use of the Haskell programming language in this software.
The software is only based on Javascript language for client side and Javascript and C++ languages for server side.

Animal

5 years ago

A very impressive implementation. Congratulations to the developers. That really shows the way to go with RIA applications.

Joeri

5 years ago

Really nice product. I like how they didn’t settle for some simple grids and forms but really went the extra mile to deliver something that was highly usable.

The books are:
- Learning ExtJS: http://www.packtpub.com/learning-ext-js/book
- ExtJS in Action (not complete): http://www.manning.com/garcia/
- Practical ExtJS projects with gears: http://www.apress.com/book/view/9781430219248

Elias Balasis

5 years ago

Indeed. This is a truly state-of-the-art implementation inevitably revealing the potential of the underlying framework (ExtJS).

Looking forward to see ExtJS and ExtGWT implementations truly progressing in parallel and see similar state-of-the-art implementations on ExtGWT

Congratulations to ExtJS and ExtGWT teams

Alexandre Verri

5 years ago

The final quality of ExtJS is really impressive.

It would be nice to have a better integration with traditional IDEs.

Robert

5 years ago

I talk about this problem because it’s a program to monitor 24h/24 something. so the browser will stay open evertytime with internal refreshs and multiple users.
Memory Leak problem with firefox (and a few with IE) do that we can’t use EXTJS for this kind of software with so much opened frames and tabs.

Roger Denton

5 years ago

VMware is expected to become essential and more popular as databases and applications evolve along with different operating systems. With the data compression and flexiblity of pendrives it will seemingly develop as a valuable developer for the simple formation of a virtual machine surrounding.
VMWare Service

Evan

5 years ago

@Luc Descotils
You say that you use C++ on the server-side.  Could you elaborate on that architecture and what frameworks you use?  Is it an embedded web-server, scgi, etc?  What libraries are you using?  I have yet to find anything that I am happy with.

Micado

5 years ago

Eaton doesn’t care about hiding IPs of their systems in published screenshots of IPM? smile

Jonathan Bonzy

5 years ago

@Micado: IPs in screenshoots aren’t reachable if you aren’t in Eaton’s network ... so there’s no need to blur them wink

erken rezervasyon

5 years ago

Nice Article as well as comments….timo

Mario oyunlar?

5 years ago

Congratulations to the developers. That really shows the way to go with RIA applications.

jeux gratuit

5 years ago

really from your explanation i ilike js and i want to learn it more and more.

SoftwareDownload

5 years ago

Nice review, it will help many bloggers. As for me personally

Soft Man

5 years ago

Amazing implementation. Thanks to developers.

Fonnie

4 years ago

Congratz to the dev team! Another great implementation..

??

4 years ago

That really shows the way to go with RIA applications.

Uygun Otel

4 years ago

Awasome.Thanks.

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

Commenting is not available in this channel entry.