Ext JS and Sencha Architect Customer Spotlight: Williams

Williams is a publicly traded (NYSE: WMB) Fortune 500 company focused on energy infrastructure. We operate interstate natural gas pipelines, midstream gathering and processing, and natural gas liquid and olefins production and transportation. Our operations span from deep water Gulf of Mexico to the Canadian oil sands.

Our product, Amigo, is used to provide near real-time monitoring and alarming of assets in the field including meters, compressor stations, dehydrators, etc. We use push technology to allow users and customers to define what data they want to watch, or complex formula calculations to better understand the relationship between assets in the field.

Main screen with real-time monitors on the application desktop. Large widget has two states, the front is numeric and then flips to the back display which is a small trend chart.

Why We Chose Ext JS and Sencha Architect

Architect Helps Enforce Coding Continuity

We chose Ext JS 4 along with Architect 3 to enable our team to have a standard methodology of development and training for developers new to Sencha frameworks. With the recent release of Ext JS 5, we can realize our vision of making our trending features even more useful and feature full.

One of the downfalls of the JavaScript world is the lack of patterns and what I like to call “Wild West Coding” — anything goes as long as it works. Writing JavaScript is not like other more consistent languages. Being a dynamic language has some great benefits and disadvantages. One of the biggest disadvantages is the fact that you can pretty much put any property or method or closure anywhere in your JavaScript codebase, and it has a good chance of working. However, when you return to that code six months later or are the poor soul who has to figure out what the author was trying to do after they’re no longer working on the code, and it’s not so great. What usually happens is that code gets rewritten into a new form of insanity, and the next person gets to have the same fun; it’s a nasty and costly form of paying it forward. Instead, Architect enforces the MVC pattern — you only get to put code where it really should live and it’s easier to find, maintain and update. Follow that with predictable naming conventions, and the code base becomes more understandable, your release cycles increase, the separation of concerns is cleaner and ultimately your product is more stable. You can, of course, still write bad code, but at least it’s organized in a predictable manner.

Architect greatly helps to reduce poor coding habits and produces standards-compliant JavaScript. Ext JS is a very large and feature-full framework that can be overwhelming for new or junior developers. Architect helps reduce the time to productive coding. Each component in the framework has many options and properties and that can contribute to a steep learning curve. Architect helps developers learning the framework to more effectively create solid applications. It also helps more experienced developers see new functionality when the underlying frameworks, Ext JS or Touch, are upgraded.

We made a commitment to use Architect at version 2 and have since upgraded to version 3.1 — we’re very pleased with the new features. We’ve found Architect helps developers and designers work in a more cohesive manner. Yes, designers still need to have a good understanding of CSS, but they don’t need to understand the logic underneath to assign style classes or create UIs. Once the UIs are created, it also makes styling new components much more straightforward for designers and developers alike.

We upgraded to Architect version 3 for numerous reasons. Styling our Ext JS applications is very important for creating the UX users expect. We now have created two custom themes that users can switch back and forth between, depending on their preference or their environment. We’re not only making use of UIs and changing the theme-specific sprites, we’re also using our own CSS classes to achieve a precise look and feel. While this was achievable in the past, it was more difficult and time consuming. We were able to restyle the app from the base gray theme to 80% of what you see in the screenshots below within two weeks. We would not have been able to achieve that fast a turnaround without the style tools in Architect.

Main screen with second custom theme.

Reusable Components

Another great feature of Ext JS is the ability to not only customize the available tools, but also to create reusable components capable of being shared across projects/products. This kind of reuse helps with consistency in branding and UX. The result is that, as our visual language of UI elements spreads across products, users will automatically understand how to use an application because of similar controls.

Vertical navigation with type-ahead filter at the top. This filters on a buffered grid with a full round trip to the server in an average of 130 milliseconds.

For example: in the screenshot above, there is a bar (highlighted in the orange box) with controls for deleting, saving, creating, duplicating, a custom button, and a naming control. This bar, a stylized simple container, is componentized and is not only used throughout our application, but in other projects as well. The vertical navigation with type-ahead filtering is also reusable and appears in multiple areas of the application.

This screenshot shows how we are using multiple styles for grids: Point/Analog Browser, Working Points and the Flyout. Just because it’s a grid, doesn’t mean it has to look like a grid. We’re using an Ext.toolbar.Toolbar to display formula parts and styling it to NOT look like a toolbar.

The formula editor uses a flyout, so the user can choose values to place in the Sencha toolbar widget.

Business Value of Using Ext JS and Sencha Architect

Using Ext JS and Architect lowers our Total Cost of Ownership (TCO) because developers can focus on each project and fulfilling business requirements — while not having to recreate components for every project. The flexibility of the Sencha frameworks has allowed us to extend and seriously customize existing components to fulfill our needs. We don’t have to “create from scratch,” we can completely customize components to help us fulfill our business requirements.

Executing a cost benefit analysis is another clear indicator of the benefits of a strong framework and component reuse. Once you have stable, reusable components, it’s possible to more accurately predict the cost of developing a project. You always have to consider risk analysis and variability in this process, but the more items you can accurately predict, the better your analysis will be. It doesn’t matter if you’re a contractor or an employee, we all make a living on projects and those projects have to be funded.

Not only have we decreased our development time for new products, the time it takes to update or maintain the app after it has been deployed is much less. Using Architect, we can allow junior developers to make changes or maintain the code base while senior developers continue creating new features, custom components or new applications. We keep our development teams small, under 10, encouraging open communication to ensure we stay nimble and more effectively help each other learn and cross train.

Our Advice to New Developers

Learn the frameworks first! Don’t try to override everything because the framework probably has more features than you realize.

This isn’t jQuery. Use the patterns the framework provides and stop “Wild West Coding.” It will save you time and tears when you return to update or maintain the application.

Pay attention to performance. The framework is powerful, but large enterprise applications can still choke if you try to do too much simultaneously. Learn to use Ext.suspendLayouts() Ext.resumeLayouts() if you are doing anything DOM heavy.

Just because it works on a mobile device doesn’t mean that it’s right for a mobile device. This is probably more for managers than developers, but there are design considerations that make a difference between platforms/frameworks: Ext JS or Sencha Touch. These design considerations include mouse vs. finger, data volume, memory usage, screen size and orientation, etc.

Architect is your friend. As with any tool, learning Architect can take time but that time is easily gained in speed of development once you commit to its use. Architect helps you in many, many ways, and it has made our team more productive. All of the screenshots are examples of our application, solely developed in Architect.

Final Thoughts

Ext JS and Architect are fantastic tools for creating web or mobile applications. Sencha has great frameworks and toolsets that are robust with very flexible and extensible components. Ext JS is well suited for creating enterprise-level applications with large amounts of data, while other frameworks like AngularJS or jQuery really aren’t created for that purpose. When building large data intensive applications, I’ve found it best to use a tool that has been designed from that perspective. Sure you can get just about anything to work, but you will probably sacrifice stability and maintainability in the process. If you have an application that is data intensive, needs to be fast, and requires a complete customized UI, you should use Ext JS and Sencha Architect.