Modernize your application with Ext JS 7.0

August 8, 2019 106 Views

As an Engineer at Sencha, I spend a lot of time visiting customers, screen-sharing with them, and helping them build awesome looking UIs. One trend I see within our customer base is the need to extend the lifespan of these web applications.

The need for businesses to reach their customers and employees through web applications is well established and common to most business sectors. Businesses are investing more in each web app they build and expect apps to provide long term value, both internally and to their client base. Web apps are becoming the new Enterprise Application.

I see a lot of Ext JS version 5.x and 6.x apps in production that are feature rich, do the job required, but are starting to get a bit long in the tooth. As more and more users have become familiar with web apps, the bar for quality, usability and application look and feel is quite high. In fact, many of the legacy apps are now overdue for a complete rework.

If you are 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 & feel of your application with just 2 lines of code!

When you migrate to Ext JS 7 you will be able to use the new modern looking Material Theme for Classic Toolkit. This theme utilizes Material Design developed by Google that describes visual components and layout of an application, possible interactions, and the unified expression of qualities like color, shape, and motion. Material design is not just about the visual aspects of an app, but also about motion. What makes this new theme interesting, are it’s guidelines on interface motion, giving us developers the opportunity to not only produce a bright, shiny, new UI, but also use motion to give the end user a much improved experience.

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

First, reference the new NPM package @sencha/ext-classic-theme-material in your package.json file (in case your 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 re-build 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 of 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
Olga.petrova@sencha.com