Sencha Inc. | HTML5 Apps

Blog

Sencha Touch and Ext JS Customer Spotlight: Smile Brands Inc.

June 14, 2013 | Marlin Clark

Smile Brands

Smile Brands Inc. is one of the largest providers of support services to dental groups in the United States. Smile Brands Inc. provides comprehensive business support services to more than 1,300 dentists and hygienists practicing in over 360 Bright Now!® Dental, Monarch Dental®, and Castle Dental® offices in 18 states.

At Smile Brands, we use Ext JS and Sencha Touch to build applications for our practice management platform. We’ve chosen to develop HTML5 web applications for the desktop and mobile devices to first supplement, and then replace, an existing green screen application used to facilitate support services within the business. These services include call centers for patient scheduling, billing centers which aid in revenue cycle management and in the dental office for patient and practice management. The Ext JS and Sencha Touch frameworks pair nicely with our backend technologies that are written in Java using Spring and Hibernate.

Smile Brands

Office Dashboard — A View Port layout with collapsible office navigation to the west and application controls to the north. The center container is populated with custom Panels and Grid Panels with the focus widget being the Office’s daily schedule.

Why We Chose Ext JS and Sencha Touch

We chose the Ext JS and Sencha Touch frameworks because we gained access to a vast library of client-side components, theming, events and a familiar model, view, controller (MVC) architecture that helped us to succeed in building large, complex, single page web applications. The team has been developing enterprise applications with Java for some time, and our practice management platform is a large multi-module Maven project yielding a half dozen web applications when deployed. We’ve built multiple layers of abstraction from a data model, repository layer and service tier that roll into web modules. These separate web modules expose service-side functionality using REST. Ext JS and Sencha Touch do a fantastic job supporting an MVC paradigm which plays nicely with our architectural choices and makes it easy to connect our server-side frameworks with our client-side frameworks.

Ext JS and Sencha Touch do a fantastic job supporting an MVC paradigm which plays nicely with our architectural choices and makes it easy to connect our server-side frameworks with our client-side frameworks.”

Visual appeal and a great user experience are things we strive to provide our user community. We follow a design principle called the aesthetic usability effect - the better it looks, the more users will perceive that it’s easy to use. This approach has made it easier for us to introduce more complex application processes into the organization that would have otherwise been executed manually while still leveraging existing training efforts. Sencha frameworks allowed us to customize and style a lot of the core components, especially data views to get just the look we wanted. The ability to extend classes in Ext JS and Sencha Touch, whether they are UI components, controllers, models, etc. really helped us to reduce the complexity of the client-side elements of our applications shifting responsibility to the appropriate layer all the while adhering to a core design and development principle of reusability. That was a big advantage.

Our practice management platform relies heavily on the Ext JS data view and grid panel components with a lot of client side filtering. Data views especially allow us to control the layout of content and plug in nicely to the event model that communicates to our client-side controllers. For example, the layout of the patient’s teeth in the charting modules is a data view. We used a template and a store of conditions to control the layout. When you look at the teeth, you see roots at top or bottom based on the jaw followed by crowns and surfaces, if applicable. As the user records existing conditions and pathology or periodontal pocket depths, models in the store are changing and thus the data view.

Smile Brands

A selected patient’s restorative chart showing missing teeth, existing restorations in silver and pathology in red in a custom DataView.

Smile Brands

A selected patient’s periodontal chart showing applicable restorative conditions, pocket depths and summary detail in a custom DataView.

As we introduced more functionality into our web product, we realized the demand for PC time in the operatory was growing. We quickly decided that we needed a mobile application for dental assistants to record clinical information and treatment recommendations presented during the exam. We had great success with Ext JS, so we chose Sencha Touch. We were able to take our Ext JS assets from the desktop product and quickly build a Touch application. The first iteration of our Touch based restorative charting and treatment planning was up and running in 30 days.

Smile Brands

A patient’s restorative chart in a custom DataView.

As these applications continued to mature, we noticed a few of the core controllers grew massively because they needed to not only respond to view and application events, but also evaluate data and produce answers to common business questions that relied on multiple stores and models. To remedy this, we built a service layer of Singleton classes using Ext JS that we call managers. Ultimately, the framework enabled us to implement complex service logic and rely on the underlying stores and their content. For example, in the restorative app, if a dentist wants to recommend a treatment on a tooth, this is easy to record from a data standpoint. However, the system wants to take into consideration existing conditions and pathology to narrow down the set to the most appropriate options. These types of business and flow questions are delegated to the managers.

Business Value of Using Sencha Touch and Ext JS

We built these applications at a high velocity with skilled developers who had little experience with Sencha frameworks prior to joining our team. The completeness of the library with not only the UI components but also the thoroughness and richness of the API documentation was a huge plus. By having clear examples with the API and source available, the team was able to quickly see how native JavaScript-based events were being encapsulated by Ext JS components and utilize event firing and management throughout the application. The event management further allowed the client facing application to execute complex transactions that involved several data stores. The documentation and additional tools like JS Duck have allowed us to create our own docs and have helped our team to be more productive. Coming from the Java side, our developers are used to having rich docs and vast samples. The Ext JS and Sencha Touch samples and tutorials were huge for us. Ext JS has been a part of my development tool kit since the early versions. We have production applications using Ext JS v2.3.0. As the framework has matured, especially with the addition of the MVC architecture, the samples and tutorials really helped the team stay current and productive.

When we needed to increase our development velocity on a business critical project, we were able to rely on Sencha Professional Services for assistance. Their experts became a part of our development team -- working on custom components to improve performance as well as sharing best practices. Their additional insight and experience helped us to reach another level of expertise with Sencha frameworks.

Our Advice to New Developers

Read the docs and spend time with the samples and tutorials. Rely on the framework to do the work it’s intended to do. If you find yourself writing code outside the application’s intended functionality, there may be a configuration or convention you might be missing. Know your data model. Good applications are predicated on good data models and a solid understanding of the application’s purpose. The implementation of MVC in the framework will do the majority of the heavy lifting required to develop effective modern web applications, allowing the developer to cleanly implement functionality.

Final Thoughts

We’ve tried other libraries and frameworks, and we haven’t found anything that has the vast coverage of documentation, client-side components, customizability and extensibility that Sencha offers. Our dev team doesn’t know a world without Sencha frameworks -- they fit our development principles and help us remain agile and productive.

Written by Marlin Clark
Marlin is VP of Application Development at Smile Brands Inc. and has been developing enterprise applications for over a decade. Marlin specializes in modern Java-based web applications and enterprise systems integration for healthcare organizations. He started using Ext JS in late 2007. Marlin is passionate about open source technologies, modularity and the intersection of technology and business. Prior to a career in development, Marlin released records on both Atlantic and Columbia Records.

Share this post:
Leave a reply

There are 2 responses. Add yours.

Arjen

10 months ago

Great case study! One of the best I’ve read about Sencha. +1

Tim Toady

10 months ago

Beautiful interface. Very impressed.

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

Commenting is not available in this channel entry.