Modernize your application with Ext JS 7.0

August 8, 2019 867 Views

As an Engineer at Sencha, I spend a lot of time visiting customers, screen-sharing with them, and assisting them in creating beautiful user interfaces. One trend I’ve noticed among our customers is the desire to extend the life of these web applications.

The need for businesses to reach out to their customers and employees via web applications is well established and widespread across most industries. Businesses are investing more in each web app they create, expecting them to provide long-term value both internally and to their client base. Web applications are quickly becoming the new Enterprise Applications.

I see a lot of Ext JS version 5.x and 6.x apps in production that are feature-rich, do the job, but are getting a little old. As more users become acquainted with web apps, the bar for quality, usability, and application look and feel has risen significantly. Indeed, many of the legacy apps are long overdue for a complete overhaul.

If you’re using Ext JS 5 or Ext JS with a Classic Toolkit application, the release of Ext JS 7 provides a simple, low-cost way to modernize the look and feel of your app with just two lines of code!

When you upgrade to Ext JS 7, you will be able to use the new Material Theme for Classic Toolkit, which has a more modern look. This theme makes use of Google’s Material Design, which describes the UI components and layout of an application, possible interactions, and the unified expression of qualities such as color, shape, and motion. Material design is concerned with more than just the visual aspects of an app; it is also concerned with motion. What makes this new theme interesting are its interface motion guidelines, which allow us, developers, to not only create a bright, shiny new UI but also use motion to give the end-user a much better experience.

You would need to literally modify 2 lines of code in your application to take full advantage of Material Design.

First, reference the new NPM package @sencha/ext-classic-theme-material in your package.json file (in case you are using modern tooling):
```
"dependencies": {
"@sencha/ext": "~7.0.0",
"@sencha/ext-classic": "~7.0.0",
"@sencha/ext-classic-theme-material": "~7.0.0",
...
},
```

Second, specify the new theme for your build profile in app.json file:

"classic-material": {
"toolkit": "classic",
"theme": "theme-material"
},

And rebuild your application. Done!

New Material theme for Classic Toolkit (as well as Material theme for Modern toolkit) supports CSS variables and provides APIs to get and set colors. It is now possible for you to make a color picker with only verified material colors. You can live update the look and feel of your application without the need for an external server or Sencha Cmd.
The material theme provides APIs to get colors that give you a nested object with all the material colors and weights.

Ext.theme.Material.getColors()

The material theme provides you with APIs to set colors that can be used as follows:

Ext.theme.Material.setColors({
    'darkMode': darkMode,
    'base': base || me._materialBaseColor,
    'accent': accent || me._materialAccentColor
});

Justifying using resources to upgrade an existing app can be a difficult sell, but moving from v5 or v6 to Ext JS 7.0 should be a simple step. Implementing the material design theme will give your users a better experience and extend the life of your application. If you need any assistance putting a bright, new, shiny face on your app, contact me for help.

Olga Petrova
[email protected]