New Tools for Cross-Platform Development & Sencha ExtJS5

For years ExtJS has been a leading JavaScript development UI framework for web and Hybrid applications. This new version cleans out a series of legacy features and adds many modern enhancements. These include moving towards HTML5, bringing corporate applications to larger touch devices and adding more widgets to an already impressive widget collection.

Make no mistake, this is a massive release from Sencha and there are almost too many new features and enhancements to fit into one article. We’ll touch on the key points of difference with version 4 and talk of some of the big changes in a later article.

This latest version is a move towards convergence with Sencha Touch, and I predict the two will be merged at SenchaCon in April next year.

Sencha have made the process of upgrading to ExtJS 5.x from ExtJS4.x fairly trivial, with a built-in compatibility layer giving developers a development-only shim that provides console messages during development alerting them to areas they need to focus on to transition to the new framework.

When it comes to upgrades, implementing charts is the only major area where upgrading your application may break with an in-place upgrade, as the entire library has been replaced. However you can apply the previous legacy charts by including it as a package with your application. A simple configuration in your app.json turns this compatibility layer on during development.

New Core Shared Library

ExtJS5 and the next major version of Sencha Touch will now share the same core code, including data package. This has been a frequently requested feature and has been anticipated by developers producing applications for desktop and mobile. This also means that your desktop and mobile projects will be able to use the same Sencha workspace, making building your apps for multiple targets easier.

The core package contains the class system, data, events, element, utilities and feature/environment detection classes.

The charts library is shared between touch and mouse-based environments, with the Sencha Touch charts library included and upgraded, bringing fast charting and interactions to your visualizations.

MVVM & MVC

ExtJS5 allows developers to use either MVVM or MVC architectures to build their applications. This new version moves towards MVVM and introduces ViewModels and ViewControllers. ViewModels bring all the benefits of data binding and ViewControllers simplify connections to views and can reduce the complexity of your controllers by focussing on one view. These changes bring many advantages to projects with development teams where the separation gives more flexibility.

Touch Device & Mobile Support

Sencha have put a lot of work into their new touch support for tablet and larger screen devices. This is delivered through the introduction of new touch-enabled base themes (Neptune Touch and Crisp Touch) in which all components now have touch and gesture support.

ExtJS5 sees the introduction of Responsive components (now giving you a choice of both responsive and adaptive design in the same application), and full touch event support. Making the contents of a component is as simple as adding the responsive plugin to the plugins config of your component, then adding rules to your UI component.

ExtJS 5 tablet apps can now be packaged as PhoneGap/Cordova apps from Sencha Cmd. So with one command you can remove unused Sencha classes, build your SASS theme, minify your code and wrap your application in PhoneGap (or push to PhoneGap build) ready for deployment.

Design & Theming

Sencha once again delivers themes using a set of SASS themes and introduces a new theme, ‘Crisp’ in ExtJS5. Crisp is designed for high resolution devices and as you could imagine has a crisp iOS7 look and feel about it.

Additional SASS mixins have been created for Menu, Lableable, FieldSet, CheckboxGroup and fields such as Text, Spinner, Display and Checkbox.

Modern & Mobile Browsers

ExtJS5 drops IE6 & IE7 support and moves the library into modern browser territory. This is a big move and it brings a whole raft of code and performance benefits. ExtJS5 apps will use the HTML5 Doctype. ExtJS 5.0 supports IE8+, Firefox, Safari 6+, Chrome and Opera as well as tablet support for Android, Safari mobile and IE for Windows phone.

Widgets, New UI and Component Upgrades

Sencha’s Legendary Grid now allows you to add widgets inside a grid cell for visualization, bringing massive performance increases for real-time data display. Grids have had a major overhaul and now operate on a row-by-row level giving even more performance updates. The grid filtering extension functionality has now been directly implemented in the grid class.

Tab panels now allow for tabs to be rotated in any direction, and be positioned on any side of the component. The Trigger field has been removed and replaced with a new Trigger configuration within the textfield class, so that you can add as many triggers as you like. Auto field labels on forms have been implemented in this release.

Another big update is with the Dashboard demo. This has been broken into three new classes allowing you to create dashboards with resizable columns, empty column clean-up, column creation via drag/drop and item persistence.

New components include the breadcrumb bar allowing for hierarchical data, the tag field, horizontal and vertical segmented buttons and the new ‘Multi-select grid’ component which brings a new kind of picker.

Class System

Like many modern frameworks, Sencha uses the concept of ‘classes’, allowing developers to separate their code into multiple files for development. These can then be combined through the Sencha Cmd build tool for delivery.

ExtJS5 combines the best of the ExtJS and Sencha Touch config system and delivers a more simplified way of configuring components and classes. Derived classes no longer need to use the config object to configure properties. The addition of private methods also adds a great way to stop other developers overriding class functionality.

Event & Gesture Support

A big change in ExtJS5 is moving to a delegated event model, meaning events now bubble up using a target instead of attached directly to DOM components. Those upgrading their apps from 4.x will want to keep this in mind.

New enhancements in the event system mean you don’t have to code differently for mobile and desktop. In the rare case that you want to implement events such as mouseover, mouseout, mousenter and mouseleave you’ll need to provide your own, or a community-based implementation.

Along with touch event enhancements comes gesture support for both touch and mouse-based systems that deliver the same experience across devices and input mechanisms. This brings features such native scrolling and Sencha’s momentum scrolling on devices where this is not already implemented.

Accessibility Enhancements

ExtJS4 introduced ARIA support via a package. This functionality is now part of the framework core ,including keyboard and other enhancements. This is a much improved implementation and is a must-have for any government or corporate website going into 2015.

Routing

The router package from Sencha Touch has been ported and improved to add routing support alongside the existing History class. This gives more control over how single and multiple routes are executed, paused and delayed.

Data Package Enhancements

Removing a lot of boilerplate coding was one of the focuses of this new version. Field definitions are now optional, and model validators can be configured from common types and applied as custom named validators.

Data sessions and schemas have been added and can be optionally configured. Data sessions work alongside data binding to keep your data in sync across your interface and schemas are collections of entities that have associations with each other.

Associations have annoyed many for quite a while, and in this release Sencha has added many-to-many associations, and no longer requires an association to be defined on both sides for the relationship to operate in both directions.

Association names now use the schema so that existing models can be used when related association stores are created.

The addition of chained stores now allows you to use bound subsets of a loaded store. This allows multiple components to be connected to a single store and show different representations of the same data without the need for additional copies of the data to be injected and managed by secondary stores.

Sencha Cmd Packages

There is a further move towards packages with the new ‘core’ package. Legacy charts, locales and themes have all been moved into packages.

Sencha Architect 3.1

Sencha Architect uses Sencha Cmd behind the scenes to do its heavy lifting. So if you develop your applications using Sencha’s IDE, then this should be a straightforward process.

You will notice some updates to the interface between 3.0 and 3.1 and instead of an intuitive and expected tree control (which would have also provided the folders feature developers have been asking for two versions), Sencha has gone with a Mac-like file browser for implementing the MVVM features. I’m not sure about it, but it’s there and I’m sure Sencha will get feedback about it from the community.

Training

Sencha and some 3rd party training companies are offering a fast track course as well as an update course from 4.x to 5.x as part of its training courses. These courses are available all over the world from Amsterdam to Melbourne, Auckland to Hong Kong and all over the USA. Check out the Sencha training page or hit a search engine to find training in your location.

Frequently Asked Questions (FAQs) about Cross-Platform Development with Sencha ExtJS5