Introducing Sencha Ext JS 5
On behalf of Sencha and the whole Ext JS team, I am proud to announce that today we are releasing Ext JS 5. Ext JS 5 is a giant step forward and we want to take this opportunity to thank our community for the feedback and continued support. It was the largest beta test in our history with more than 100K downloads. Together we created the world's most advanced multi-device JavaScript framework. You all made an invaluable contribution to creating the best Ext JS framework.
What's new
Touch support
Ext JS 5 is the most extensive update of the framework. This release provides the ability to run your desktop applications on touch devices using a single code base.
Architecture improvements
Now, as never before, it has become easy to write applications using MVVM architecture and bidirectional data-binding. In the client part, we have embedded data session management in order to reduce the number of calls to the server. Entering routing ( routing ) allows you to create deep links in your applications. With all these improvements, application development will be even more efficient.
')
Responsive markup
Starting today, thanks to the new responsive layout system in your applications, it has become possible to have an optimal view on both desktops and tablets, regardless of changes in orientation.
Component updates
Just as your applications grow, Sencha continues to improve the component library. With Ext JS 5, you can add widgets to a table cell for visualization and analytics of big data. Also, a touch-optimized set of components for graphing with financial capabilities.
Let's see in action!
Deeper into Ext JS 5
Unified events among desktops and touchscreens
Ext JS 5 is the first version that allows you to use one code on desktops and touchscreen devices. Using the gesture system from Sencha Touch, we introduced support for such gestures as pinch, zoom, swipe, tap, long press, etc., so that you can use your desktop applications on touchscreens with little or no modifications. We clicked on touch device events using our delegated event system , which does the mapping automatically.
MVVM and bidirectional binding
In Ext JS 4, we introduced the MVC architecture. And in Ext JS 5 - MVVM (Model - View - ViewModel), which offers bidirectional data binding and an improved division of responsibility between business logic and views. MVVM allows you to automatically transfer changes from a view to a model and vice versa. This live and automatic synchronization between views and models reduces development time and errors. We also added computed values and fields, so that binding an object to a view before synchronization can be pre-converted. We hope that the new MVVM architecture will be useful.
In addition to MVVM in Ext JS 5, we also improved MVC support by introducing ViewControllers. ViewController'y aimed precisely at a certain view, removing the extra costs compared with the traditional MVC to manage objects and restore the state of the application. Now, by avoiding the usual controllers that listen to all view events, applications can reduce memory usage and improve performance.
Responsive markup
Ext JS 5 introduces responsive markup plugin, which aims to improve the appearance of applications and navigation among desktops and touchscreens. When the orientation changes (the device is rotated), applications that need to change the position or location of elements can do this automatically using the new configuration system.
| or | |
To see it in action, try this example by changing the size of the browser screen or turning the touch screen.
Neptune Touch and Crisp Touch
We have two new multi-device themes that allow our rich collection of UI components to look the same on desktops and touchscreens. The touch versions of the existing Neptune theme and the new Crisp theme use enlarged elements to support a larger patch of touch that is required when working on touchscreens.
You can use the touch versions of themes on desktops and touchscreens, but we recommend using Neptune and Crisp for desktops, and Neptune Touch and Crisp Touch for touchscreens.
Table enhancements
Grid is definitely the most popular component in Ext JS, and in version 5 we made it even more powerful. With the introduction of grid widgets ( Grid Widgets ), which can be combined with the new feature - Buffered Updates, we have made it possible to render rich data and update in real time to support big data analytics.
Session Management
One of the most exciting features in ExtJS 5 is Session Management : we added transactional sessions. When you saved entries to the server with Ext JS 4, you had to be attentive to the order in which you did it. You had to make sure that you called the save method for each of the changed records and repositories. All of this “counting” made data consistency prone to errors.
Ext JS 5 has a new class for working with these actions - [Ext.data.Session]. Session keeps track of records that need to be changed, created or deleted on the server. She can even sort these operations so that the new records correctly refer to other records in this transaction. Using sessions, it became easier to edit the records and their associations, collect all changes and send to the server. And since Session stores all your changes, you can receive them immediately, or none - depending on whether the transaction was completed successfully or not.
Routing
Ext JS 5 makes it possible to create deep links in applications when the URL route is converted to controller methods. Routing allows you to configure applications to accept URLs that do not necessarily refer to a physical file on the server. The part of the URL starting with # (used as a fragment identifier) opens the way to the browser history stack without reloading the page. When hash changes, the browser creates a 'hashchange' event that can be used by the client application itself.
Touch-optimized graphics
Ext JS 4 provided a graphics system without plug-ins based on SVG and VML. However, we found that this system was not optimal on mobile devices, more limited in memory, in which there was a fast Canvas, but a slow SVG. With Ext JS 5, we rebuilt it on the basis of a similar system from Sencha Touch, which are better optimized for working with fingers on devices with a small memory size. The new charting system has more functions, such as financial, multidimensional and 3D graphics, including zoom support. They have better performance, they are more expandable and have excellent features on the touchscreen.
We even made sample applications for working with different types of charts like Kitchen Sink. Please note that existing graphics from Ext JS 4 are still available separately, so you can use them too. But, if you are targeting tablets, you should upgrade to a new charting system. Detailed instructions for migrating to Ext JS 5 are provided in our documentation .
Sencha Core Package
One of the Ext JS 5 super-tasks was to bring the Ext JS and Sencha Touch cores as close as possible. We consistently compiled the code of the class system, the data handling package, and the detection of functions / environment, so this code can be used in both Ext JS and Sencha Touch. This common platform will allow to render applications with shared resources regardless of the framework, on desktops, tablets and other touchscreens. Now we are working on the release of Sencha Touch, based on this common core. Keep for updates.
Instructions and documentation
With Ext JS 5, we not only added a ton of new instructions for the features and enhancements that appeared, but also updated the instruction system itself to make it easier to use. These instructions cover everything about upgrading to a new framework: Sencha Cmd, graphics, application architecture, and more.
We have mentioned only some of the important features of Ext JS 5, but there is a lot more to talk about. We will give you a look at the rest of the new features and improvements in the What's New in Ext JS 5 instructions.
Supported browsers and platforms
Perhaps one of the toughest things that has not changed in Ext JS 5 is that we continue to work with IE8 as with a VIP client ( as a first-class citizen, - approx. Transl. ). Ext JS 5 supports Safari 6+, Firefox, IE8 +, Chrome, and Opera 12+. Safari on iOS 6 and 7, Chrome on Android 4.1+, and touch screens under Windows 8 (such as Surface and other touchscreen laptops) - IE10 + are supported on the mobile platform.
Ext JS 5 Training
We also updated the Sencha training programs . Ext JS 5 trainings begin in June and include the following classes: Ext JS 5 Update, Upgrading to Ext JS 5, and Fast Track to Ext JS 5.
Ext JS 5 prices
Starting from this release until June 30, 2014, licenses for Ext JS 5 will be available at prices for current Ext JS 4.x. This is a great opportunity to buy Ext JS 5 at current value. Starting from July 1, new prices will come into force. For more information, please visit the Ext JS 5 products page or contact us .
Thank you very much
We would like to express once again our sincere thanks to our community. Your requests for new features, offers, reviews and bug reports allowed us to achieve all the goals of this release. We have been very actively working to minimize code changes during the transition from Ext JS 4 to Ext JS 5. We hope you enjoy writing new applications with Ext JS 5 just as we liked writing this version.
Source: https://habr.com/ru/post/225169/
All Articles