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.
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.
A selected patient’s restorative chart showing missing teeth, existing restorations in silver and pathology in red in a custom DataView.
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.
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
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.
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.
.right, .alignright float: right; margin: 0 0 10px 10px;
.left, .alignleft float: left; margin: 0 10px 10px 0;