Awaiting ExtJS 4: Dynamic Loading and the New Class System

From a translator : Sencha Inc, the manufacturer of the famous Ext JS RIA framework, talked about the upcoming fourth version on November 22 of last year. The promised release was scheduled for February 28th.

To warm up the interest of the community (because the API, according to the developers, has changed significantly), a public alpha or beta version was promised "within a couple of weeks." Two months have passed, but there is no promise yet.

Realizing that a marketing mistake was made - they announced a new product too early and thwarted the timing of its presentation - the developers decided to cheat a little, laying out the promised "beta" in parts: package by package.

Your attention is invited to the translation of the first article from the official framework blog dedicated to the attempt to emulate the "adult" OOP using JavaScript in the implementation of Ext JS 4.

First of all, the article will be of interest to those who have already used previous versions of the framework - the author expects the reader to be familiar with Ext JS architecture.

Meet Ext JS 4

Today, we are excited to bring to your attention the “first-born” in a series of completely new features of Ext JS 4. Within a few weeks we will upload our beta version of Ext JS - package by package. Despite the fact that we originally planned to release the full beta somewhere around this time, some parts of the framework are stabilizing more slowly than we would like, so we decided to publish packages in turn. Today we will start with a completely new class system in Ext JS 4.

JavaScript did not initially envisage the concept of “class”, which could be unusual for beginners. Ext JS has always been equipped with its own class system, based on the most powerful prototyping tool. Such a solution allows programmers to use a more traditional object-oriented approach in development.

With the release of Ext JS 4, we are taking the class system to a new level, adding new features to it that should facilitate your development and give it even more flexibility. Ext 4 will introduce four innovations - class declarations, classins, mixers, getters and setters for configurations, as well as dependency loading.



In the illustration above, several advantages of the new class system are noted, for example, Draggable and Resizable became impurities.

Class declaration

For comparison, let's see how we created a new class in Ext JS 3. In this example, we create a dummy authorization window that extends the standard Ext.Window class:

1.  
2. //Ext JS 3.x class definition
3. MyApp.LoginWindow = Ext.extend(Ext.Window, {
4.     title: 'Log in',
5.  
6.     initComponent: function() {
7.         Ext.apply(this, {
8.             items: [
9.                 {
10.                     xtype: 'textfield',
11.                     name : 'username',
12.                     fieldLabel: 'Username'
13.                 },
14.                 ...
15.             ]
16.         });
17.  
18.         MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
19.     }
20. });
21.  

This approach is very likely familiar to most of you and it copes well with its task, although it is not without drawbacks. For example, if Ext.Window is not declared before the creation of our class, then the execution of this code will cause an error and our application may crash. Similarly, if the MyApp namespace has not been announced earlier, we will also get an error. Both of these problems are solved if classes are created according to a new ideology:

1.  
2. //Ext JS 4.x class definition
3. Ext.define('MyApp.LoginWindow', {
4.     extend: 'Ext.Window',
5.  
6.     title: 'Log in',
7.  
8.     initComponent: function() {
9.         Ext.apply(this, {
10.             items: [
11.                 //as above
12.             ]
13.         });
14.  
15.         MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
16.     }
17. });
18.  

In Ext JS 4, classes can be referenced by the string representation of their names - which means we will never get the errors described above. The class manager is smart enough to check if Ext.Window is already declared. If not, then defer the creation of MyApp.LoginWindow until the desired class is available. We are no longer required to follow a clear download order in our applications, allowing the framework to take care of everything.

Impurities

The first of the new features of the system are  impurities . An admixture is a named declared bunch of behavioral logic and configuration parameters that can be “mixed” with a class, thereby expanding its capabilities. To take advantage of impurities, just apply them to your class declaration.

For example, so that an object of your class can be moved around the screen, it is enough to apply the Draggable admixture to the class. You can “mix” into the class an arbitrary amount of impurities - in this way you can implement multiple inheritance. This is exactly what has been very difficult to achieve for a long time using most JavaScript frameworks.

Impurities are set like this:

1.  
2. Ext.define('Sample.Musician', {
3.     extend: 'Sample.Person',
4.  
5.     mixins: {
6.         guitar: 'Sample.ability.CanPlayGuitar',
7.         compose: 'Sample.ability.CanComposeSongs',
8.         sing: 'Sample.ability.CanSing'
9.     }
10. });
11.  

Let me repeat myself, all class names refer to each other by string names - we will not have errors in the impurities used if they are not already loaded. The class can use the capabilities of any number of impurities, and the impurities themselves are extremely simple:

1.  
2. Ext.define('Sample.ability.CanPlayGuitar', {
3.     playGuitar: function() {
4.         //code to play
5.     }
6. });
7.  

Auto setters and getters for configurations

Most classes in Ext JS are configured by passing a configuration object to the constructor. Using getters and setters, configuration objects can be changed, and edits can be applied while the application is running. Ext JS 4 has a configuration option naming convention policy that should be considered when using these features. This approach allows you to reduce development time, API consistency and seriously reduce the size of the downloaded file. Let's look at an example:

1.  
2. Ext.define('MyClass', {
3.     config: {
4.         title: 'Default Title'
5.     }
6. });
7.  

In the snippet above, we declare a class with a single custom property: title. We also specify the default value for this property, in this case it is 'Default title'. Thanks to the new class declaration system in Ext JS 4, the framework will automatically create getters and setters for our class. If we used Ext JS 3.3, we would have to write boilerplate code:

1.  
2. MyClass = Ext.extend(MyBaseClass, {
3.     title: 'Default Title',
4.  
5.     getTitle: function() {
6.         returnthis.title;
7.     },
8.  
9.     resetTitle: function() {
10.         this.setTitle('Default Title');
11.     },
12.  
13.     setTitle: function(newTitle) {
14.        this.title = this.applyTitle(newTitle) || newTitle;
15.     },
16.  
17.     applyTitle: function(newTitle) {
18.          //custom code here
19.     }
20. });
21.  

Now the library will create all four functions for us. In most cases, simply updating the value of the variables is quite enough, but there are times when you need to take some action at the time of the configuration change. For example, if our class displays the title in some DOM element, we have the opportunity to update this element using this construction:

1.  
2. xt.define('MyClass', {
3.    extend: 'MyBaseClass',
4.  
5.     config: {
6.         title: 'Default Title'
7.     },
8.  
9.     applyTitle: function(newTitle) {
10.         Ext.get('titleEl').update(newTitle);
11.     }
12. });
13.  

All four functions are created automatically and we can override any of them just as easily as we did with applyTitle above. Accordingly, we not only write less code in our classes, but also significantly reduce the size of both ExtJS itself and our application - thus making it easier for the end user to download the file.

Dynamic loading

We saw only a few advantages of the new class system, but there will be much more interesting things ahead of us and to which we will return later. However, now is the time to introduce something completely new to Ext JS 4: dynamic loading .

Until now, using any version of Ext JS, you had to download the entire library to get started. If you needed to create an object of the Ext.Window class, the class had to be deflated in advance, otherwise an error occurred. Everything has changed and simplified with the dynamic loading of Ext JS 4:

1.  
2. Ext.require('Ext.Window', function() {
3.     new Ext.Window({
4.         title : 'Loaded Dynamically!',
5.         width : 200,
6.         height: 100
7.     }).show();
8. })
9.  

Here we ask Ext JS to load the Ext.Window class and call the function when it is ready. We can query any number of classes by passing an array to Ext.require. Actually, that's all - just to the impossibility, the main magic is hidden from the viewer. Ext JS 4 dynamic bootloader works exclusively on the client side and does not require any intervention in the server side. Moreover, it automatically parses the dependencies that the loadable class may have. As an example, let Ext.Window look like this:

1.  
2. Ext.define('Ext.Window', {
3.     extend: 'Ext.Panel',
4.     requires: ['Ext.util.MixedCollection'],
5.     mixins: {
6.         draggable: 'Ext.util.Draggable'
7.     }
8. });
9.  

Once the library has loaded the Ext.Window class, it defines the dependencies declared in the extend, require sections and in the impurity descriptions.

If any of the required classes has not yet been declared, then the framework will first load the dependency, and only then Ext.Window will be declared. Thanks to the naming convention, the loader automatically knows how to determine the right file for each of the classes. In this case, the following files will be requested before our function is called:

• src / Window.js
• src / Panel.js
• src / util / MixedCollection.js
• src / util / Draggable.js

The bootloader works recursively - if these files have unaccounted for earlier dependencies, it will request files until everything is ready for initialization.

Despite the fact that in the operating mode it is recommended not to use the “file by file” mode, this approach allows you to do without one of the oldest and most annoying moments in using Ext JS - the ext-all-debug.js file.

Until recently, we recommended using ext-all-debug.js during development and ext-all.js in the normal mode of application operation. The debug version contains the entire library in a readable form, but also contains about 60,000 lines of code. Accordingly, the already difficult process of fixing errors becomes even more complicated: a hint in the call stack about the exception in the line 47657 ext-all-debug.js will not help much. On the other hand, the use of a dynamic loader will let you know that the problem is on the 56th line of the src / data / JsonReader.js file. And all this with a full call stack and the correct line numbers for each file.

In fact, this is a serious step forward in debugging your application, and there will be no problems with performance: with local development, it is very difficult to notice that the library is loaded dynamically. The bootloader also checks for deadlocks and can be used both for synchronous file uploads and for asynchronous ones.

If you are not tempted to write above - do not worry. The new class system is  absolutely compatible with previous versions . Your old classes created with Ext.extend will still work, and we will continue to create the ext-all.js file containing the entire library.

Opportunity demonstration

We created a very simple demo application and  posted it on the Internet . Examples begin with the simplest and slowly become more complicated in the future. Actually, the example can be downloaded as an archive and run on the local machine for experiments: all you need is a web server for uploading files.

The new class system is the basis for the repeatedly improved ExtJS 4 library. Each important class in the library has been updated so that it becomes faster so that development becomes easier and more convenient. Over the next weeks, we will demonstrate the capabilities of our packages in turn, waiting for Ext JS 4. Next in line is our great data package.