Ext JS Customer Spotlight – eScholar

eScholar offers an instructional improvement solution, eScholar myTrack®, which includes comprehensive data dashboards, student profiles, assessment analysis, and goal setting. myTrack helps educators understand what their students’ strengths and weaknesses are, so they can create a personalized education plan that meets their students’ needs and helps them achieve their goals.

Why We Chose Ext JS

Educators are busy professionals, so we needed to make sure we designed our solution to help them quickly turn insight into action. Ext JS had the most important features we needed and is the most flexible framework — allowing us to consume the data from our backend system and display it in various ways to the user. We can support many different browsers, have components that display our data in meaningful ways, and have an application that is accessible to a user if they have a disability.

Components – By leveraging the Ext JS component system, we were able to reduce our time to market by at least 6-9 months. The Ext JS modular approach allowed us to extend the pre-built components to add functionality specific to our needs. This occurred most often with the grids and the theming associated with them, but also with rendering complex tooltips in the datagrid, and a router so the end user could bookmark pages and come back to them later. The reusable components reduced our development efforts considerably. Because we are a small team of three developers, each developer was able to focus on a specific section of the application, and reused components whenever possible. One developer focused on theming the application as a whole, and that developer’s efforts were applied to the components with just an addition of a UI config in the component. The componentized structure of Ext JS and the ability to have each developer work on a separate section, but at the same time help contribute general components that would be reusable to the whole application, helped eliminate the issue of developers duplicating code.

MVC Framework – The Ext JS MVC framework helps us keep our source code organized, reusable, and testable. MVC, coupled with Ext JS packaging, allows us to share views and models across applications, while keeping the business logic application-specific.

Cross-Browser Compatibility – We need to support multiple browsers, and multiple versions of browsers. In a school system, teachers and students are not always using the latest and greatest, most times they are restricted to whichever browser they use due to school security policies. We need to not only be able to support that, but have a consistent look and feel across all the browsers. Sencha makes that possible. Our charts look consistent across platforms, without the need for third party charting libraries. With Ext JS, we can be assured our charts will continue to work as expected.

The Grid – We’re displaying a lot of data types to our users. We want them to be able to get as much out of it as possible. Often, we have to display that data in a grid, and we needed a component that would be flexible enough to handle the different types of data we’re providing from the backend, but also flexible to the user too. Using the Ext JS Grid, we present data so our customers can sort, multi-sort, filter, and search, and it just works. It really allows us to help the user help themselves.

Accessibility – We needed a framework that would support users with disabilities. Ext JS gives us the best of both worlds, an application that looks good and is functional, but also supports accessibility with 508 compliance. People with less visual acuity can use screen readers, and people with restricted motor skills can tab through the application to interact with the data we’re presenting.

Theming – We want our product to have a distinct look and feel to it. Our designer has created layouts and workflows that allow the user to view large amounts of data in various ways. Through a combination of the standard Ext JS components, extensions of those components through custom UI and Sass styling, we were able to make layouts and components that meet the needs of our users, no matter what browser they’re using.

Business Value of Using Ext JS

When we started our training on Ext JS, we knew we had made the right decision because of the care the trainers took to make sure we knew not only how to write JavaScript for Ext JS, but how to think about our problems, and the best way Ext JS could solve those problems. Using MVC and OOP and knowing how Ext JS leverages these concepts has helped us write code that takes advantage of core components, and then we can extend and customize the components to fit the needs of the design and layouts we create.

This ability to create small, reusable components is a key benefit to using Ext JS. We can have a core component, and then modify its look via a custom UI config or Sass styling. Or, we can modify its functionality by extending its class and creating a new component for a use case – or we can do both. The flexibility that Ext JS delivers has saved us 6-9 months of development time and effort on our project.

Our Advice to New Developers

• Read the documentation – Sencha has really great documentation that is well written and has some good examples that you can often view live in the documentation itself.
• Create classes – Leverage OOP whenever you can. Think about whether you can extend an existing class. Can you refactor your code to make an abstract class that can be reused elsewhere and then extend that class for your specific use case?
• Use UIs and Sass for theming – If you want to change the styling of a component, odds are you can use a UI to take care of most of the heavy lifting for you. If you just need some light styling, then you can use SASS to tweak the specific elements you have to change.

Final Thoughts

We are getting a lot of value from using Ext JS for myTrack, and our users are too. When teachers use myTrack, they can easily understand the data and leverage that insight to help their students more effectively, and that brings us closer to achieving our company’s mission. With the newer features like the built-in router and components in datagrids, we can develop better ways to present information to our users. And with better accessibility support, we can make sure our application is accessible to everyone.