Sencha Architect: Fast Prototyping, Happier Users

Web Sites

A lot of web application software these days feels dated: the same old tired user interfaces and boring, faintly obscure but eminently purchasable background art on a web page drawn by some anonymous art student. Or worse, so-called “stock footage.” But while old things aren’t necessarily bad, it doesn’t seem to work very well for user interfaces. Who amongst us wants to go back to using Windows 95? Updating user interfaces so that they can work cross-platform, for example, can be a challenge, as can giving users a modern look and feel.

I used to do development work as a Consultant, and one of the industries I focused on was healthcare IT and medical record systems. One of our software products was an electronic medical record system (EMR) called the Clinician Access System, which was built as a web application, and it was looking tired. Or, more accurately, the user interface was tired looking. On the other hand, the actual medical and business logic encoded into the middleware and the back-end was absolutely vital and essential. It was battle-tested, FDA cleared, and contained the work of dozens of physician’s and nurse’s heuristic experience. Our electronic medical records (EMR) system, though, looked like a relic from the early 2010’s, and some of our customer’s clinicians wanted new features implemented but using much more modern data display UI components.

I used to use a treasure chest of tools like Adobe, Dreamweaver (2004 called, they want their software back), and a bunch of story-boarding (we use Agile/Scrum) and wireframing software to show users prospective user interfaces. If I was going to modernize the Clinician Access System, I wanted a way to do it so that each of our medical clinician customers could have it their way, but keep the essential logic in the background the same.

Back and Forth

I’ve grown tired of trying to design modern websites with ancient tools, and I’m not too keen on exporting/importing layouts and data, or worse, trying to keep the designs in sync as I iterate with my customers on UI design. Back and forth, from wireframing to programming tools. Investing in better wireframing tools didn’t really solve the problem.

After learning about the value of Ext JS Enterprise Edition which includes Architect (and Sencha Test) at no additional charge, I thought what better way to learn about a product and then write about it than to use it?

Nurses and doctors are very particular about UI design, it turns out, and like all professionals are not especially reticent to share their well-informed opinions. They’re driving into telehealth, they’re screaming at IT departments, and they’re trying very hard to not violate HIPAA laws while they fend off medical insurance companies and drug sales people. I needed something to use to design data-intensive, highly complex user interface elements that would minimize the potential for misunderstanding of data, was adaptable to different users and their Section 504 requirements, and most of all saved me schedule time.

Sencha Architect fits the bill. The key advantage of a visual builder is that it can generate best practices code efficiently as opposed to coding and recoding similar experiences over and over. Architect is a visual builder for Ext JS that helps web developers build applications faster and more efficiently with a drag-and-drop environment. I could prototype, hit build, show the user the UI, discuss it, change it (inside of Architect), and show them a different way to look at the data. Some customers liked the polished business look of the graphite theme, and I could change themes using Architect or Themer with ease, right in their conference rooms.

Figure 1: Graphite Theme showing drag and drop capabilities.

Architect comes bundled with several templates, samples apps, and a comprehensive toolbox of Ext JS classes and components. It also comes with the ability to use “mock-data”, reducing my need to create this example-only data yet providing a realistic look at the graphs and results.

Figure 2: Generate mock data dialog box saves a lot of time

We could show advanced UI capabilities such as Grids, Navigator charts to display patient trend data, data analysis Graphs that give the clinician a quick perspective on trend lines, and so much more that comes in Ext JS.

Not only could I adhere to my customer’s corporate look and feel requirements with Theming, I could create any look they can imagine, show it to them, and then run the actual code for them. With the ability to modify the UI quickly, use mock-up data, and show the user, they tend to be impressed that we can offer all of this to them and their applications. The voice of the customer gets instantiated in the software in near real-time. Here’s what another Sencha customer (consultant) had to say about Architect:

There’s a way to generate modern user interfaces that doesn’t cause nodding off like Starbucks closed four hours ago, and there’s a way to experiment with modern UI that performs as well on desktop PC screens as they do on operating room surgical theatre monitors, or on Wall Street TV’s, or on your Apple iOS and Android phones. I suggest giving Sencha Architect a try for 30 days as part of our free Ext JS trial and see if it works for you.

We have great plans for Ext JS in terms of improving automatic code generation and the entire developer experience. Idera, our parent company, is taking the best ideas of our sister companies’ features and cross-pollinating it with our other products, and I think you will see some real synergies designed to make the development effort faster, better, smarter, easier, and more automated. But most of all, they should translate into business benefits for you, your enterprise, your customers, your reduced backlog. If you’re looking for faster, better ways to prototype and get your app done more quickly, try Architect and share your thoughts with us on the forum.