Using Sencha Ext JS 6 to Build Universal Apps

On behalf of Sencha and the entire Ext JS team, I’m excited to share more details with you about Sencha Ext JS 6. This release is a huge step forward to support universal applications targeting desktops, tablets and smartphones, using a single codebase. We have successfully merged the Ext JS and Sencha Touch frameworks. I would like to thank the Sencha community and our customers who have provided invaluable feedback during this journey of creating a unified framework. Together, we have created the world’s most advanced and powerful JavaScript framework for multi-platform, multi-device web application development.

What’s New in Ext JS 6

Merged Framework – You can now use a single framework for creating applications that run across all types of devices, from phones to tablets to desktops.

Triton Theme – This is our newest theme, which provides comprehensive support for font icons. Using Triton, you can easily control the size and color of your icons and images without needing to rework on them in image editors.

App Templates – This is our newest approach to provide you higher level abstractions around building web applications. You now have full-blown real-world application templates that you can use out-of-the-box, instead of assembling individual UI components.

Sencha Pivot Grid – It was introduced just a few months ago, and has been upgraded to work with Ext JS 6. We’ve also made major enhancements to its configurator plugin.

Accessibility Improvements – We have integrated the ARIA functionality directly into the component lifecycle, which means you will no longer need a special “aria” package to make your applications accessible.

Promises – Ext JS 6 includes a standards-based implementation of promises that conforms to the Promises/A specifications and the tests suite.

Sencha Cmd – We are also rolling out Sencha Cmd 6 to support Ext JS 6 development. Sencha Cmd 6 has undergone a major overhaul to eliminate dependencies and improve the installation experience. The Sencha Cmd installers now carry appropriate versions of JRE with it, so you don’t have to download and install it separately.

JavaScript Theme Compiler for Sass-like code–Fashion – This is our new JavaScript-based theme compiler for Sass-like code that runs in the browser. It allows live updates to your applications as you modify any Sass files, by re-generating the CSS in near real-time.

JetBrains IDE Plugin – We are releasing a plugin that creates confluence between Sencha frameworks and JetBrains IDEs. The plugin enables code completion, inspection, and navigation, and much more, while seamlessly enabling JetBrains features for the Sencha frameworks.

Sencha Inspector – We are also providing Early Access to Sencha Inspector, a debugging tool that provides direct access to components, classes, objects, and more for apps built using Sencha frameworks in a debug environment.

See It In Action!

View the Sencha Ext JS 6 examples on any device
Download the free 30-day trial of Sencha Ext JS 6
Learn more about Sencha Ext JS 6 with our guides and documentation
Check out the new Sencha Ext JS 6 pricing and packaging
Sign up for Sencha Ext JS 6 Training

Deep Dive into Sencha Ext JS 6

Merged Framework

You can create applications that run across all types of devices, from desktops to tablets to smartphones. Ext JS 6 allows you to blend the best of both worlds (desktop and mobile) to produce optimal user experiences for your target devices and share maximum amount of code at the same time.

The process of merging Ext JS and Sencha Touch has come a long way. In Ext JS 5, we created a core that combined the classes, loaders, DOM, data package, MVC/MVVM, and many utilities into a common package. The final step of merging the Sencha Touch UI components required a home for the distinct aspects of the two frameworks. To differentiate the UI component families from each other, in Ext JS 6, we are calling them “toolkit”. The UI components of Ext JS are now contained in the “classic toolkit” of Ext JS 6, while the UI components of Sencha Touch are contained in the “modern toolkit”. You can now create universal applications that utilize both the toolkits and create a single application that targets mobile devices like smartphones and/or tablets (using the modern toolkit) and desktops/laptops running IE8 and/or tablets (using the classic toolkit).

Triton Theme

The new Triton theme is our first Ext JS theme to provide comprehensive support for font icons. Many of the icons used in Triton are from Font Awesome with some useful additions to complete the ensemble.

By using the Triton theme, developers can easily control the size and color of icons in their apps because they are based on scalable vector fonts. With font icons, you don’t lose quality when they are scaled up or down. Also, because you don’t have to make multiple http requests for each image, it improves network load times. And best of all, you no longer need to rework your images using image editors.

App Templates

We are also introducing higher level abstractions of our framework components into what we call App Templates. These are full-blown application examples that you can use out-of-the-box, instead of assembling individual UI components. They are designed to reflect real-world use cases of how your applications might look, and give you a much better starting point.

We have included several pages in our Admin Dashboard template that include a dashboard page, profile page, widgets page, charts page, standard login page, registration pages, and more. By using these templates, you get highly-optimized code with the best architecture and coding practices that we recommend to our developers.

App Templates not only provide a better starting point, but also demonstrate the infinite possibilities for styling your Sencha applications with very little effort and creating compelling user experiences.

Sencha Pivot Grid

As part of Ext JS Premium, the Sencha Pivot Grid component enables rapid summarization of large sets of data often presented in Ext JS grids. It provides a simple way to condense many records into summary reports, either in the form of canned reports (produced using code), or via the configurator plugin that users can utilize to slice and dice their Ext JS grid data.

We have not only updated the namespace and created a single pivot grid package, but also enhanced the configurator plugin to provide a more intuitive interface for the end users to analyze their Ext JS grid data. Sencha Pivot Grid also comes with a drilldown plugin that allows the users to drill into the raw records that form any resulting aggregations. Pivot Grid is also integrated with Sencha Charts, so you can create intuitive data visualizations within your reports. With the Sencha Pivot Grid, we have also included an excel export plugin package that allows users to export the results into Microsoft Excel spreadsheet.

Accessibility Improvements

For the first time since we added the accessibility support to the framework, Ext JS 6 integrates the ARIA functionality directly into the component lifecycle. You no longer need a special ARIA package to get the proper accessibility support. Ext JS 6 applications support screen readers such as JAWS, and NVDA by default.

A new ‘actionable mode’ is available for the Ext JS grid, which allows keyboard navigation for all kinds of grids, including the contents of a grid cell. An added benefit of bringing this functionality down into the core of the framework is that users, who do not have specific accessibility needs, get more power to navigate any parts of a grid via the keyboard.

Promises

Sencha Ext JS 6 includes a standards-based implementation of Promises that conforms to the Promises/A spec and tests suite. A big thanks to the DeftJS team for contributing their field tested implementation of promises to the core of Ext JS 6. We have started with incorporating promises in the Ext.Ajax.request() within Ext JS 6, and in future releases we will incorporate promises support in many other areas of the framework.

Sencha Cmd

Sencha Cmd 6 comes with Ext JS 6, and we have enhanced the installers to include the Java Runtime Environment (JRE). You no longer need to download and install Java separately. We have also removed the Ruby dependency, so there are literally no prerequisites for installing Sencha Cmd, beyond the operating system.

Further, to facilitate code sharing with packages, Sencha Cmd 6 introduces different folders for packages you generate vs. the packages you require. The location for packages can now be configured with the introduction of the ‘workspace.json’ file. With Sencha Cmd 6, the Microloader (application loader) has undergone major updates, and even provides support for localStorage caching.

JavaScript Theme Compiler – Fashion

Sencha Cmd 6 includes Fashion, our new JavaScript based Sass-like theme compiler, which helps with rapidly building Ext JS 6 application themes. Fashion eliminates the dependency on Ruby and Compass, if you are building Ext JS 6 applications, and compiles directly in the browser, giving you a near real-time experience.

Fashion not only supports Sass-like syntax for variables, mixins, functions, and nesting, it also includes JavaScript APIs for creating custom extensions. Fashion is actually more than just a compiler because it allows use of @debugger in your Sass-like code, and even step into your custom JavaScript functions.

JetBrains IDE Plugin

We are also launching an entirely new plugin that creates a confluence between Sencha frameworks and JetBrains IDEs. The plugin integrates the Sencha frameworks with the JetBrains IDEs seamlessly in the form of code completion, code inspection, code navigation, template creation, refactoring, and many features, while cooperating with native JetBrains IDE functionalities.

If you are a Sencha framework expert, you will love the ease with which changes are refactored using the JetBrains plugin and how simple it is to trace your code to the source. For new users, it provides completion suggestions while encouraging best-practice code structure and syntax. Sencha JetBrains Plugin works with commercial versions of IntelliJ 14.1+, WebStorm 10+, and PHPStorm 9+. And best of all, the Sencha JetBrains Plugin enables all of the above for not only Sencha Ext JS 6, but even earlier versions of our frameworks from Ext JS 4+ and Sencha Touch version 2+.

Sencha Inspector

With this release, we are also providing Early Access to Sencha Inspector, which is an entirely new debugging tool that provides direct access to components, classes, objects, and more for apps built using Sencha frameworks. It also lets you analyze your application code for issues, such as overnesting of components, and helps improve your application performance.

Sencha Inspector even let’s you theme your applications by inspecting and modifying the Sencha Sass-like code in near real-time. Sencha Inspector will be a component of Ext JS Pro and Premium.

Guides and Documentation

As always, with Sencha Ext JS 6, we have included over a dozen updated guides for new features, enhancements, upgrades, and more. We mentioned above some of the most significant updates in Ext JS 6, but there’s a lot more to talk about. You can explore the other new features, enhancements, and improvements in our What’s New in Ext JS 6 guide.

Pricing & Packaging

We are introducing new product packages to ensure you have choices available for your specific needs. We recommend you check out the new pricing and packaging, as well as the transition plan for existing customers.

Thank You

We wish to extend our heartfelt thanks to our community. Your constant feedback on a single framework and bug reports during the Early Access and Beta programs have made it possible for us to achieve this huge milestone. We hope you enjoy building universal apps with Ext JS 6, and upgrade your existing Ext JS and Sencha Touch apps to this single unified version and make them universal.