JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

Ext JS and ES2015/6/7 – Modernizing the Ext JS Class System

October 25, 2016 2125 Views
Show

SenchaCon 2016

The JavaScript language today is hardly recognizable when compared to the JavaScript of a few short years ago. The changes range from small pieces of syntax (such as loops, variables, and functions), up to the level of classes for creating coherent functional units and extend all the way to connecting these pieces into applications via modules.

Today, through the widespread use of tools such as Babel, Traceur, webpack, and others, many developers have embraced these new language features and their code can still run on “those” browsers.

In my session at SenchaCon 2016 (Ext JS and ES2015/6/7 – Modernizing the Ext JS Class System), we’ll talk about how this evolution in language and tools affects the applications we write using Ext JS. We’ll look at how the class keyword compares with Ext.define, and how class names line up with modules. And we’ll compare the two end-states of an upgraded application: one with minimal changes to existing code and one that fully embraces all of the new language features.

Don’t have your ticket yet for SenchaCon 2016? Register today.

You can try the new and updated features of Javascript Web Framework which help to modernize your team and apply modern techniques when building applications.

Sneak Peak

Class Declarations

Let’s take a simple utility class that might be found in an Ext JS application today and see what an upgrade might look like.

    Ext.define('App.util.Foo', {
        extend: 'App.some.Base',
        mixins: 'Ext.mixin.Observable',

        config: {
            value: null
        }

        constructor: function (config) {
            this.mixins.observable.constructor.call(this, config);
        },

        updateValue: function (value, oldValue) {
            this.fireEvent('valuechange', value, oldValue);
        }
    });

The following diagram shows the important pieces produced by the code above:

Class Declarations part 1

If you look at the constructor property on the prototype, you’ll see that it points to the method we passed to Ext.define. This approach, while flexible, is not compatible with the new class keyword. Using the class keyword produces the following, immutable relationship:

    App.util.Foo === App.util.Foo.prototype.constructor

Minimal Upgrade

The minimal upgrade requires us to rename the “constructor” method to avoid this conflict. The new name is simply “construct“:

    Ext.define('App.util.Foo', {
        extend: 'App.some.Base',
        mixins: 'Ext.mixin.Observable',

        config: {
            value: null
        }

        construct (config) {
            this.mixins.observable.construct.call(this, config);
        },

        updateValue (value, oldValue) {
            this.fireEvent('valuechange', value, oldValue);
        }
    });

Though not necessary, we’ve also taken advantage of the new function property syntax for object literals and removed the “: function” from our methods.

Because the new Ext.define internally produces a standard class, we gain some benefits as well. Consider the following diagram showing what is generated by the upgraded Ext.define call above:

Class Declarations part 2

Because class constructors are now prototype-chained to their superclass constructors, effectively all static members are inheritableStatics for free!

Maximum Upgrade

At the opposite end of the upgrade continuum is a complete upgrade to all the new language features and options. Let’s look at what the fully upgraded version of the above class might look like:

    import { define }     from 'extjs-kernel'; // module names not final
    import { Observable } from 'extjs-core';

    import { Base }       from 'app-some';

    @define({
        mixins: Observable,
        config: {
            value: null
        }
    })
    export default class Foo extends Base {
        updateValue (value, oldValue) {
            this.fireEvent('valuechange', value, oldValue);
        }
    }

In this version, we’re taking advantage of several new class system features as well as some upcoming JavaScript features.

If you haven’t seen the @define syntax before it’s called a decorator, and it’s an exciting language feature currently being worked through the standardization process. It’s available today via the magic of transpilers. Transpilers are tools that compile JavaScript-to-JavaScript or more precisely, Advanced-JavaScript-to-Browser-Friendly-JavaScript. Through the @define decorator, you can apply all the additional powers of the Ext JS class system to this standard class.

We also removed the construct/constructor methods in this example. This is because the construct method of Ext.Base now provides a Common Object Lifecycle. When called with a single object parameter or if the class uses the Config System, the necessary steps to initialize the instance are handled automatically.

Last, we’re using the new, standard import and export keywords. Support for these is also by virtue of transpilers (because no browser yet supports them). To learn more of the details, you can also attend Ross Gerbasi’s talk: The Modern Toolchain.

Choices, Choices

Because there is no one-size-fits-all approach, the overarching goal of this upgrade is to minimize what must be done to existing code while at the same time enabling developers to usefully modernize JavaScript techniques and practices.

To hear first-hand what else is coming, be sure to attend my session at SenchaCon 2016!

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at