Sencha Ext JS 5 released

Original article: Announcing Sencha Ext JS 5

Introduction

On behalf of Sencha and the entire Ext JS team, I am proud to announce that today Sencha Ext JS 5 is released. Ext JS 5 has taken a big step. Here, we also want to spend some time thanking our community for all the feedback and constant support we provide. In our history, this was the largest beta version revision, with more than 0.1 million downloads. Together with you, we have created the world's most advanced multi-device JavaScript framework. With your valuable participation, we have built the best Ext JS framework.

New things

Touch screen support

Ext JS 5 is the most comprehensive update of the framework since its establishment. In this version, the functionality of touch screen devices is introduced to desktop applications-using a single code library.

Architecture Improvement

Now it is easier to create applications by using the MVVM architecture and two-way Data Binding functions. The newly released client data session management can effectively reduce interaction with the server. Through the introduction of routing, deep links can be implemented in the application. With these updates, application development will be more efficient.

Responsive Layout

From today on, by using a responsive Configuration System, Ext JS 5 provides an optimal visual experience for applications across desktops and tablets without any changes in the direction.

Component upgrade

As the demand for components increases, Sencha continues to enhance its component library. In Ext JS 5, you can add widgets for data visualization and big data analysis in cells of the grid. In Ext JS 5, an upgraded, touch-screen optimized chart package was added to implement the financial chart function.

See It In Action!

• View the Ext JS 5 Examples
• Check out the new Ext JS 5 product page
• Guides and Documentation

Go deep into Ext JS 5

Unified cross-desktop and touch-screen device events

Ext JS 5 is the first version that allows the use of the same code to support both desktop and touch screen device experience. By introducing the Sencha Touch gesture system, all codes support gestures such as pinch, zoom, slide, Touch, and hold, the existing desktop application layer hengxu can be applied to the desktop platform with little or no code changes. The framework maps the mouse-clicked event to the touch screen gesture by entrusting the Event System. This conversion process is automatic.

MVVM architecture and bidirectional data binding

In Ext JS 4, the MVC Architecture is introduced. In Ext JS 5, the MVVM (Model-View-view model) architecture is introduced. It can not only bind two-way data, but also well separate the business and display logic. MVVM allows changes in the view to be automatically written back to the model (and vice versa ). Direct real-time and automatic synchronization of views and models (two-way data binding) can save a lot of development time and reduce the number of errors during development. In the Framework, calculated values and fields are added, so that the objects bound to the view can be converted by computation before synchronization. I hope the new MVVM architecture will help you.

In Ext JS 5, in addition to MVVM, ViewController is introduced to enhance MVC support. The ViewController scope is directly associated with the view, which eliminates the overhead of managing object reference and restoring application state in many traditional MVC systems. Applications can now listen to global events in the view to avoid using a universal controller to save memory and processing time.

Responsive Layout

The responsive configuration plug-in was referenced in Ext JS 5 to address the optimal visual experience and navigation required across desktops and tablets. With the new responsive configuration system, you can automatically change the application location or the layout of navigation elements when the direction is changed (device rotation.

responsiveConfig: {    landscape: {        region: 'west'    },    portrait: {        region: 'north'    }}

Or

responsiveConfig: {    'width > 800': {        region: 'west'    },    'width <= 800': {        region: ‘north'    }}

Adjust the size of the browser window on the desktop browser or rotate the tablet to test this example and see its behavior.

Neptune touch screen and Crisp Touch Screen

There are two new multi-device themes that make the UI components look and feel the same on the desktop and touch screen devices. When using touch-screen devices, the Neptune and new Crisp themes of the touch-screen version use enlarged element sizes to support larger contact areas.

Although the themes of these touch screen versions can be used on the desktop or tablet, we recommend that you use the Crisp or Neptune themes on the desktop, and use the Crisp or Neptune touch screen version on the tablet accordingly.

Enhanced Mesh

Grid can be said to be the most popular component in Ext JS. In Ext JS 5, the grid becomes more and more powerful, with the introduction of grid widgets, you can combine other new functions, buffer updates, and other features. You can also enable rich data visualization and real-time data updates to support big data analysis.

The grid widget is a new lightweight component. It is mainly used to embed sparkcharts, progress bars, and radio buttons into grid cells.

Session management
One of the most exciting new features of Ext JS 5 is session management, which has added transactional sessions to data packets. When Ext JS 4 saves records to the server, pay special attention to their order. You also need to check whether all modified records or storage have been saved. Coordination of all these recorded data updates is extremely challenging.

Now, in Ext JS 5, a class is used to manage these activities, named Ext. data. Session. Sessions track records that need to be updated, created, or destroyed on the server. It can streamline these operations to ensure that new records can correctly reference other records in the transaction. With sessions, you can now simply edit records and their associated records, collect all updates, and submit them to the server. Since the session will track all the editing operations, you can immediately obtain all updates based on whether the complete transaction is successful.

Routing
Ext JS can use the URL routing method to convert the application URL into controller operations and methods, so as to implement deep links in the application. Configure the application route so that the requested URL does not need to be mapped to the physical file on the server. The # part of the URL (as the fragment identifier) provides an application with a way to control the browser history stack without reloading the page. As the hash value changes, the browser triggers the hashchange event for the client application to use.


Charts optimized by touch screen

Ext JS provides plug-in charts for free. You can use chart packages to create SVG or VML images. However, the chart package does not use a faster Canvas, but uses a slower SVG to be compatible with more memory-Limited mobile devices. In Ext JS 5, the chart package has been reconstructed based on the Sencha Touch chart package. The new chart package is better optimized for Touch screen and low memory devices. The new touch-screen optimized chart package also provides some new features, such as financial charts, multi-axis charts, 3D charts, and support for scaling and shifting. Its performance is faster and its scalability is better.

Sample applications that organize all different charts have been created, such as Kitchen Sink. Note that existing charts in Ext JS 4 can still be used and are separated into a separate package. However, if the development target is a tablet, you should use or upgrade it to a new chart package. For more information about migrating charts to Ext JS 5, see Ext JS 5.

Sencha core package

The primary goal of Ext JS 5 is to narrow down the differences between Ext JS and Sencha Touch. Currently, Code such as class systems, data packets, and function/environment detection has been systematically reduced to a public core. Therefore, Ext JS and Sencha Touch can share this core package. The public platform allows the resources of newly created applications, not just those under the framework, to be used on desktops, tablets, or other touch-screen devices. I am working on this public core as the top-level Core of Sencha Touch! Coming soon!

Guide and documentation

Ext JS 5 not only includes some new guidelines for new functions and enhancements, but also updates the guide system for ease of use. These guides cover a wide range of things including framework upgrades, new Sencha Cmd, chart upgrades, and application architecture.

Some of the new functions of Ext JS 5 mentioned above are just a little more. In Ext JS 5's new things guide, you can find more new features, enhancements, and improvements.

Supported browsers and platforms

The most important thing in Ext JS 5 is that the support for IE 8 has not changed. It is still a type of citizen. Ext JS 5 supports Safari 6 +, IE8 +, Chrome, and Opera 12 +. On the mobile platform, Ext JS 5 supports iOS 6 and 7 Safari, Android 4.1 + Chrome, and Windows 8 touch screen devices (such as Surface and touch screen laptops) Running IE10 +.

Ext JS 5 Training

We have also updated the Sencha training programs. ext JS 5 training will be available starting in June, which will include classes on Ext JS 5 Update, Upgrading to Ext JS 5, and Fast Track to Ext JS 5.

Purchase of Ext JS 5

Upon its release, Ext JS 5 licenses will be available for our current Ext JS 4.x prices through June 30th, 2014. this is a great opportunity to buy Ext JS 5 for the current price. starting on July 1st, 2014, new prices will take effect. for more information on pricing, please visit the Ext JS 5 product page or contact us.

Thank you very much.

We wish to extend our heartfelt thanks to our community. your feature requests, suggestions, feedback, and bug reports have made it possible for us to deliver on the goals of this release. we 've worked very hard to minimize the need for code changes when upgrading to Ext JS 5 from Ext JS 4. we hope you enjoy building new apps with Ext JS 5, and upgrading your existing Ext JS 4 apps, as much as we have enjoyed building this version.

Author: Gautam Agrawal
Gautam Agrawal is Sencha's Sr. product Manager for Frameworks (Ext JS, Touch, and GXT ). he has held various product and engineering roles at Quantros and Integral, in SaaS and BI space, utilizing Sencha technologies. he holds a PhD and MS from State University of NY (SUNY) at Buffalo and a BE from Pune University.