Are you ready for Ext JS 5?

Original article: Are You Ready for Ext JS 5?

Ext JS 5: Prepare for upgrade

We are very happy to have Ext JS 5 joining the Sencha family! As a major version, a bunch of new features are introduced in Ext JS 5, including:

• Tablet support
• Bidirectional data binding
• New NVVM application architecture
• Widget and Widget Columns
• Crisp theme
• Routing
• And more
  

For a complete list of new features, read the new feature guide in Ext JS 5.

If you want to learn more about Ext JS 5 or ask about the upgrade, please register and join us at, January 1, April 25, 2014 (4/24/14 at 10 am PDT, Beijing time, I don't know if there is any mistake during the summer time in the US Pacific. I just need to calculate it.) I held an hour of Online seminars.

Test 1, 2, 3

Although there are many new features in Ext JS 5, many of them are behind the scenes. With the release of Ext JS 5 beta, we hope to help your application prepare for the upcoming GA version through the following aspects.

With the upgrade check list of Ext JS 5, you can use the following evaluation system for each change to indicate the difficulty of the upgrade process:

Discard Old browsers

Ext JS 5 no longer supports IE6, IE7 and other earlier versions of browsers, which can significantly reduce the logic and style settings across the entire framework. Additionally, Ext JS 5 has taken an amazing step for enterprise-level Web applications.

Ext JS 5 now supports the following browsers:

• IE8 + (standard mode only)
• Firefox 12 + (PC & Mac)
• Safari 6 +
• Chrome 18 +
• Opera 12 + (PC & Mac)
  

Many developers know which browser they need to support. Therefore, we expect this upgrade to be simple.

Doctype

Another important change in Ext JS 5 is that we recommend using the doctype of HTML 5:

<DOCTYPE html>

Omitting doctype or using different things may lead to a trigger of id behavior, such as incorrect display and problem locating. IE8 supports HTML5 doctype, and the new standard doctype is backward compatible with html4. therefore, this makes sense for Ext JS 5.

As you can imagine, this upgrade is quite simple. If your application has a lot of CSS for the IE6-7, it may be a bit cumbersome to change the doctype.

Sencha Cmd

With Ext JS 5, we strongly recommend that you use the latest Sencha Cmd version to create an application architecture and manage production generation.

The Ext JS 5 framework is now an encapsulated Cmd package, which means that the "core" part of the framework is now fully modular and even shared based on Sencha Touch.

Open the Ext JS 5 SDK and you will see the following folder structure:

From the package name, we can infer that the package prefixed with "ext-" is specific to the Ext JS framework (for example, "ext-theme-neptune "), the prefix "sencha-" is cross-framework shared resources (such as "sencha-core ").

This will help you get familiar with the positioning of these packages, even if many of the underlying code has not changed.

Are you using Sencha Cmd?

If your existing application running in Ext JS 4.2.x is using Cmd 4.x, updating the application through sencha app upgrade will become relatively smooth. If you are using Sencha Cmd to generate an Ext JS application, you should experience minor impact when upgrading to Cmd 5.x. For more information, see Sencha Cmd 5 upgrade guide.

Have you used Sencha Cmd?

If you have not used Sencha Cmd to generate an application, but want to use some of the Cmd functions, simply use the sencha generate app to create a new application and manually copy/app/folder to the new architecture. In addition, the recommended file structure has been used in the application, but the Cmd scaffold is created on the app using "sencha generate app -- starter = false.

To use Cmd again, there may be a small expected learning curve. For details, see Ext JS 5: Getting Started Guide.

For users who do not use Sencha Cmd, find more information about generating files, such as ext-all.js or ext-all-debug.js, In the Ext JS 5 upgrade guide.

One additional benefit of using Sencha Cmd for the compatibility layer is that it is easy to control the new compatibility layer, which helps to upgrade 4.x to 5.xas much as possible (and for future upgrades ).

Ext JS 5 introduces a new mechanism in how to obtain obsolete API tags. To fix the impact of application upgrades from previous versions, you can simply set the supported framework versions in the app. json file and output outdated APIs as warnings to the browser console.

For example, if the Ext. form. field. Trigger class is discarded in 5.x, an error is thrown. If the compatibility layer is set to 4.1, the old behavior will be welcomed and a warning will be displayed on the browser console. In this way, you can get every upgrade warning smoothly, instead of a broken API experience.

To use Ext JS 4.2 for underlying compatibility, you only need to set the following attributes in the app. json file of the application:

compatibility: { ext: '4.2'}

The compatibility layer is an optional development function, which has no negative impact on the upgrade process. In fact, using the compatibility layer also makes the upgrade process easier. For more information, see Ext JS 5 upgrade guide.

The Configuration System Sencha Touch developer should be quite familiar with the class definition configuration syntax. Ext JS 5 has only made some changes in this paradigm. For more information, see Ext JS 5's Guide to new things.

These modifications may affect some custom components that call the initConfig method. Therefore, check your UX class.

You still need to use "config: {}" to declare the new configuration attribute, but the derived class can be declared directly within the class body. This approach allows the derived classes to maintain their compatibility with the base class, even if the base class has been switched to the configuration method of the Configuration System.

For Classes written in Ext JS 4, any configuration system that does not use Ext JS 5 can maintain compatibility with Ext JS 5 even if it does not. To familiarize developers with this concept, the configuration system creates some work during the upgrade process. In general, the framework will send a warning to the browser console when moving properties to the configuration object. However, it is estimated that this part of migration will take some time.

Chart

At Sencha Touch 2.1, we introduced a new set of high-performance, Touch-screen optimized chart packages. In Ext JS 5, we added the chart package to work on Ext JS and Sencha Touch. This brings in many new features, as well as superior performance on tablet devices.

Ext JS 4 has been converted into a separate package. Therefore, when you upgrade to Ext JS 5, you can still use them to minimize conversion work. To update a chart package to a new one, you only need to switch the ext chart package to a rare Sencha chart package. Many APIs are actually the same. You can find out what is not covered in Ext JS chart upgrade guide.

The current Ext JS chart is retained in the framework at least until Ext JS 5.1. However, they will no longer add any features or features contained in the Sencha chart.

Many customers customize chart packages for their applications. Therefore, upgrading to Ext JS 5 may cause some problems. Although the new chart package is very similar to the old one, I still want to know some API differences. For more details, see Ext JS chart upgrade guide.

Note: The new graph table package in Ext JS 5 beta does not support rendering in IE8 because it lacks the VML Renderer. We hope to provide support when Ext JS 5 is officially released.

MVC and MVVM

Ext JS 4 introduces support for the MVC Architecture Model. In Ext JS 5, we added support for the popular alternative MVC mode: MVVM (Model-View-view model ). One of the highlights of using MVVM is data binding, that is, connecting the model layer to the view, updating the model when the view is modified, and vice versa.

In Ext JS 4, the Controller provides a global solution for the logic of the application range. Ext JS 5 now provides specific view control that is directly managed with view instances. From Instantiation to destruction, the view controller is bound to the component that references it.

Although the global controller created using the Ext JS 4 MVC Architecture can work normally, the view controller is more suitable in some cases. In any case, the current upgrade process should be stable. For more information, see the view model and data binding guide in Ext JS 5's new MVVM mode.

API changes in Ext JS 5

We have made every effort to minimize the pain points from Ext JS 4 to 5. However, some changes need to be pointed out to ensure that you fully understand these new environments.

Microloader and app. json now, the Ext JS 5 Application generated using Sencha Cmd will use the Microloader and app. json files, which makes the Ext JS 5 Application very similar to the Sencha Touch application. All additional inclusions are included in the app. json file. This includes js and css resources included in the index.html file.

Users familiar with Sencha Cmd or Touch have little learning curve. However, Sencha Cmd 5 upgrade guide will solve these problems for you.

Ext. dom. query because the querySelector method is already included in all supported browsers, Ext JS 5 will remove Ext by default. dom. query, which means that if you still need to use Ext. dom. query, You have to manually include it. We recommend that you only use the Ext. Element Method (such as select, selectNode, or query) instead of directly relying on Ext. dom. Query.

The upgrade process may be simple for most customers. You only need to request Ext. dom. Query when the application starts. If you take the time to replace all Ext. dom. Query with querySelector, it takes some additional time.

Storage and Model

Some changes stored in Ext JS 5 may cause problems when updating some applications. The most obvious change is that the remove event draws on the add event. Deleting multiple records at a time is only triggered once, rather than once for each record. In addition, the add and datachanged events are solved for a long time. If you are dependent on these actions, some problems may occur. It is best that the buffer storage now has its own storage class and can be created using the type configuration item (although "buffered: true" can still work in most cases ).

In Ext JS 5, the model was also greatly modified. Several attributes on the record object have changed. The most obvious change is that the raw attribute no longer exists. Because of this, data (even if the field is not declared) can now be included in the data attribute. The Association has also been modified, and the destroy method has been modified to the erase method.

Many Ext JS applications rely on data access. Therefore, most customers may experience conflicts. For more information about storage and model class modifications, see Ext JS 5 upgrade guide.

Recommended steps

Although a more complete upgrade guide will help you complete the upgrade of the application, there are some quick suggestions for you to upgrade your application to Ext JS 5.

Upgrade from the latest version

We realized that not all customers could use the latest Ext JS and Sencha Cmd in luxury. The time limit, the best term, or support license usually determine the Ext JS version used by your organization or customer.

It takes time to upgrade to the latest version of Ext JS 4. x and Cmd 4. x will jump to 5. the x branch is more stable, because it has more advantages in bug fixing and can avoid significant API changes across several major product versions.

Check rewriting and UX

Framework rewriting and custom components are usually the places where bugs can be updated.

It is important to record every such rewrite or UX class and be sure you fully understand them.

Analyze application logic

The farther you go during the upgrade process, the more likely you will load your application in your browser.

Inevitably, the most tricky part of the major upgrade is the physical testing of the application at runtime. It is expected that during the upgrade, you will spend most of your time profiling controllers and handlers mixed in the application logic.

Reading suggestions

For more information about Ext JS 5, see the following guide:

• What's new in Ext JS 5?
  

• Ext JS 5 upgrade Guide
  

• Sencha Cmd 5 upgrade Guide
  

• Ext JS chart upgrade Guide
  

• Ext JS 5: getting started
  

If you want to learn more about Ext JS 5 or ask about the upgrade, please register and join us at, January 1, April 25, 2014 (4/24/14 at 10 am PDT, Beijing time, I don't know if there is any mistake during the summer time in the US Pacific. I just need to calculate it.) I held an hour of Online seminars.

Author:Arthur Kay
Arthur Kay is the Developer Relations Manager at Sencha, Inc. He studied Music and Computer Science at Loyola University Chicago and has been involved with the Web since the late 1990 s.