Sencha Inc. | HTML5 Apps

Blog

Sencha Ext JS Customer Spotlight: Incentrak

October 10, 2012 | John Valentino and Jonny Lucas

Site Selection Group is one of the largest, independent location advisory and economic incentive firms providing solutions to corporations and communities across the world. We offer four core services to our customers which includes location advisory, economic incentive services, real estate services and economic development consulting. Through the utilization of our cutting-edge databases and analytical models, our experts can maximize the efficiencies of location decisions for corporations in a variety of industries.

AppFoundation is a professional services firm that provides custom web, mobile, and desktop application development. We leverage innovative technologies to deliver premium user experience that engages customers to drive satisfaction, brand awareness, and deliver measurable results. Site Selection Group tapped AppFoundation to build a product quickly and uphold enterprise application development standards. With the goal of developing a multi-tenancy platform to maintain customer incentives, we had another opportunity to change the enterprise application development landscape and set a new standard for interaction by choosing Ext JS.

The Dashboard shows the Google Maps integration along with the JFreeChart integration; charting was done server-side for various advanced reporting needs.

We developed IncenTrak to manage financial-based customer incentives by geographical location. It presents information using an Ext JS 4.1-based graphical user interfaces that leverages Ext JS geo mapping capabilities in combination with a Jasper-based reporting engine, token-based Spring security, RESTful Web Services, a Spring scheduled task engine, and a custom financial engine on a secure application server. The result is a visually rich, enterprise system that is both quick and secure; it is fully controlled, tested, monitored, and deployed through a continuous integration infrastructure.

Why We Chose Ext JS

Desktop Experience

The Incentive Management screen shows how incentives are distributed across client, business unit, location, and incentive program.

Ext JS provides a desktop-like experience using rich Internet application technologies. It combines all the visualization advantages of the desktop environment with the benefits of a web-based system. The Ext JS theming abilities provide unlimited visual customization options, while the browser deployment delivers a single point of system entry that doesn't require special plug-ins or installation and maintenance of other software.

Components

Ext JS provides graphical components to quickly construct applications, and every component has both a fully documented API and integrated, working examples. This is a major advantage over existing JavaScript technologies where you are left to build your own components, which can be complicated and time consuming. The Ext JS documentation is actually an interactive site featuring API documentation, guides, video instruction, and live examples. Sencha has done a tremendous job providing the answers to our developers questions in a robust online repository.

Development Speed

With Ext JS, the coding is largely declarative in terms of the graphical user interface; you write a minimal amount of code to declare and layout components. The coding needed for client-side event-based handling is also minimal in the Ext JS MVC implementation. This is an ideal application for Ext JS, and the client-side of systems in general, because the client-side code is limited to visualizing information. The goal is to write the least amount of code reasonably possible. It's extremely fast and efficient to develop graphical user interfaces with Ext JS because of the small amount of code needed and the existing components and patterns.

The Portfolio Summary Report is one of the many reports launched from an integrated Jasper reporting platform with Ext JS. Ext JS wraps several filter criteria to deliver reporting needs for IncenTrak. The output for this report is in PDF format.

Browser Compatibility

The Ext JS theming features provide an innovative method for dealing with browser compatibility. Modern browsers that are capable of taking advantage of the latest CSS standards are able to do so, while less recent browsers get the same visual experience through the use of dynamically generated images in place of those unsupported CSS visualizations. For example, in Chrome, the gradient shaded rounded button is rendered through CSS, while in a less modern browser, that button is rendered as an image. The result is the same visual experience in two very different browsers. AppFoundation has detailed our experiences with HTML5 Browser Compatibility in this case study.

Business Value of Using Ext JS

With our existing infrastructure and the speed at which we were able to implement and integrate Ext JS graphical user interfaces could be implemented and integrated, we delivered this fully functional system back-end to front-end (which was written completely from scratch) in less than 3 months with a small team. Ext JS support of existing user acceptance testing tools such as Selenium also aided in the development, testing, and stability of this system. Compatibility with most any conceivable HTML and/or JavaScript-based component allowed for quick and easy integration with other needed technologies such as Google Maps and reporting. We were able to complete development quickly and pass on a significant cost savings to our client.

Our Advice to New Developers

Take advantage of existing tools and technologies. Sencha Architect is an invaluable tool for laying out both the components and the initial framework of an Ext JS application. Write automated tests for your front-end using Selenium. It is quick, easy, and ensures application stability. Do not re-invent the wheel, take advantage of existing components and infrastructure that you may already have in place.

Share your findings with the community. When we're writing code and find a solution to a difficult problem, we tag that code and share the info in a blog post. A little bit of your time could save someone else a great deal of time and continue the cycle of sharing information.

Final Thoughts

Sencha is leading the way in HTML5 development for the future Web. Ext JS provides a framework for components, code re-use, desktop-like experiences, browser compatibility, multi-platform support, and ultimately a better user experience. AppFoundation is committed to providing expertise in a new enterprise development paradigm by working with Ext JS and other Sencha products.

Written by John Valentino and Jonny Lucas

John Valentino is a Principal Consultant for AppFoundation, and has been developing software for over 12 years. He has extensive enterprise experience with Java, and started using Ext JS to provide rich user experiences on the Web, in both a quick and maintainable fashion. John strongly believes in the use of continuous integration to aid in the development, testing, deployment, and maintenance of software in order to ultimately provide better quality products in a timely manner.

Jonny Lucas is a Principal Consultant for AppFoundation with over 17 years of software development experience. He has designed and implemented enterprise-level software for companies in various industries utilizing standard SDLC practices and numerous technologies. Jonny has a Java and web development background, and is excited to work with promising technologies such as Sencha products.

You can follow the writers on Twitter @AppFoundation.

Share this post:
Leave a reply

There are 3 responses. Add yours.

Alok Ranjan

2 years ago

ExtJS is no doubt a top choice! Always!

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/javascript/3840

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

slanier

2 years ago

Me too! thanks for sharing, big help for me..

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

Commenting is not available in this channel entry.