HTML5 App Development With Sencha’s Recently Released Ext JS 5

Sencha’s recent release of Ext JS 5 is the “most comprehensive update to the framework since our inception” according to the company. The product provides an HTML5 development for desktop and mobile apps providing the ability to deliver desktop apps on touch-enabled devices using a single codebase.

So Whats New?

Ext JS 5 is the first version that allows the same code to power both desktop and touch device experiences. Using a gesture system introduced by Sencha Touch, the company has wired in all the code needed to support gestures such as pinch, zoom, swipe, tap, long press, etc., to take existing desktop apps to the tablet platform with little or no effort. They have mapped the mouse-click events to touch gestures using their delegated event system which automatically does the translation.

In Ext JS 4, Sencha introduced the MVC architecture. With Ext JS 5, they have introduced MVVM (Model-View-ViewModel) architecture that enables two-way data binding and a better separation of concerns between the business and display logic. MVVM allows changes made in the view to be automatically written back to the model (and vice versa). This live and automatic synchronization between views and models (two-way data binding), saves a lot of time and reduces development time errors. Sencha has also added computed values and fields, so an object bound to a view can be transformed using computation before synchronization. 

In addition to MVVM in Ext JS 5, Sencha has also enhanced support for MVC with the introduction of ViewControllers. ViewControllers are scoped directly to the related View, eliminating much of the overhead required in traditional MVC to manage object references and restore application state. Applications can now save memory and processing time by avoiding generic Controllers, which listen globally for events on Views.

Ext JS 5 introduces a responsive config plugin to address the need for an optimal viewing experience and navigation across desktops and tablets. Applications that need to change the position and/or layout of navigational elements when the orientation changes (device is rotated) can do so automatically using a new responsive config system.

These are two new multi-device themes that make Sencha’s set of UI components look and feel the same on both desktop and touch-screen devices. The touch versions of the existing Neptune theme and the new Crisp theme use enlarged element sizes to support the wider contact area that are required when using fingers on touch devices. While developers can use the touch version of these themes for both desktop and tablets, Sencha recommends the Crisp or Neptune themes for desktop, and the corresponding Crisp Touch and Neptune Touch for tablets.

Grid has been one of the most popular components in previous Ext JS versions, and with Version 5 Sencha has made its grid even more powerful. With the introduction of Grid Widgets, which can be combined with another new feature, Buffered Updates, Sencha has enabled rich data visualization capabilities and real-time data updates to support big data analytics. Grid widgets are new lightweight components that are useful for embedding sparkcharts, progress bars, radio buttons, sliders, and many other components inside grid cells.

Ext JS 5 features Session Management adding transactional sessions to the data package. When saving records to the server in Ext JS 4, developers had to pay careful attention to the order in which records were saved and had to be sure to call save on all modified records and stores. All this bookkeeping made reconciliation of data changes very challenging. With Ext JS 5, there is now a class to manage these activities, called [Ext.data.Session]. A session tracks records that need to be updated, created or destroyed on the server. It can even order these operations to ensure that newly created records properly reference other records in the transaction. Using sessions, it is now simple to edit records and their associations, gather all the updates and commit them to a server. And because the session keeps track of all edits, developers can also get all of the changes at once, or none at all, based on whether the complete transaction is successful.

Ext JS 5 enables deep linking within applications, using URL routing methods that translate the application’s URL into controller actions and methods. Routing enables the ability to configure applications to accept request URLs that do not necessarily map to physical files on the server. The # part of the URL (used as fragment identifier) provides a way for an application to control the history stack of the browser without reloading the page. As the hash changes, the browser fires the ‘hashchange’ event, which can be used by the application on the client itself.

Ext JS 4 provided plug-in free charting, using Sencha’s charts package built on SVG and VML. The company found that this charting package wasn’t a great fit for mobile devices that have fast Canvas, but slower SVG, and are more memory-constrained. With the new Ext JS 5, Sencha has rebuilt their charts on top of the Sencha Touch charts package, which is better optimized for touch and low memory devices. The new touch-optimized charts package comes with more features as well, such as financial charts, multi-axis charts, 3D charts, including zoom and pan support. It has faster performance, is more extensible and provides a great experience on touch-screens.

One of the overarching goals of Ext JS 5 was to converge much of the frameworks core between Ext JS and Sencha Touch. Sencha has converged code into a common core for the class system, data package, and feature/environment detection, so it can be shared across Ext JS and Sencha Touch. This common platform will enable the creation of applications that share resources, regardless of the framework, across desktops, tablets, and other touch devices. Sench is in the process of building and releasing Sencha Touch on top of this common core as well. 

With Ext JS 5, there are over a dozen new guides for new features and enhancements, as well as an updated guide system to make it easier to use. These guides cover everything from the framework upgrade, the new Sencha Cmd, charts upgrade, the application architecture, and more.

Ext JS 5 will continue to support IE8. It also supports Safari 6+, Firefox, IE8+, Chrome, and Opera 12+. On the mobile platform, Ext JS 5 supports Safari on iOS 6 and 7, Chrome on Android 4.1+, and Windows 8 touch-screen devices (such as Surface and touch-screen laptops) running IE10+.

Ext JS 5 training is now available with classes on Ext JS 5 Update, Upgrading to Ext JS 5, and Fast Track to Ext JS 5.

Ext JS 5 licenses are available at current Ext JS 4.x prices through June 30th, 2014. Starting on July 1st, 2014, new prices will take effect. 

Check out Sencha’s website for more information.