Ext JS 5: Now With 25% More Ext JS

We’ve been using Ext JS since the days when it was still YUI. With every new version, the framework has become faster, clearer, and more feature-complete. So whenever a new version is announced, we’re excited to see what’s next. It’s sort of like a really geeky Christmas. Here’s a few of the newly-announced features coming in Ext JS 5 that we’re most excited about.

Better Touch Support. If you’ve ever tried to use your Ext JS 4 application on an iPad, you know that the experience leaves a lot to be desired. A few of the most glaring issues — scrolling and touch events — have been resolved in Ext JS 5. It’s important to stress that Ext JS 5 is still a framework for building applications for desktop browsers, and Ext JS 5 is not a replacement for a mobile framework like Sencha Touch, but at least now your Ext JS apps will be functional on an iPad.
Two-Way Data Binding. Previous versions of Ext JS made many complicated things very easy: grids and RESTful AJAX come to mind. But one thing that always bothered us was that updating a view when model data changed — or vice versa — was always more work than it seemed like it should be. Ext JS alternatives like Ember.js, for example, make binding data to views painless by comparison. With Ext JS 5, two-way data binding is finally a reality. Gone are the days of boilerplate code juggling data changes between the various layers. Ext JS 5 introduces a very simple but powerful templating language to wire views and view models together. Rejoice.
View Controllers. Ext JS is great for building reusable components for large applications. One drawback of this approach, however, is that you often find yourself having to choose between cluttering your view classes with control logic specific to that view (violating MVC), or duplicating that control logic in increasingly-complex, bloated, and non-DRY controllers. This problem is magnified when you start needing to manage multiple instances of the same component independently of one another. Well, good news friend: Ext JS 5 introduces the concept of a View Controller, which is essentially an instance of a controller tied to a specific view instance. Instantiating a second instance of the view creates a second, independent View Controller. Ext JS 5 even takes care of the memory management for you. We expect that this will make our applications far simpler and more maintainable.
View Models. Another anti-pattern that we often find in our Ext JS applications is that data-level logic often creeps into view classes. Think store configurations, or manipulating model data (e.g., concatenating first and last name, or calculating averages). The new View Models in Ext JS 5 are classes (again, tied to specific view instances) responsible managing data munging so that views can just be views. Together, View Models and View Controllers are a huge win for separation of concerns enthusiasts like ourselves.
Routing. Previous versions of Ext JS have had token support for URL-based routing, in that they provided a utility class for interacting with hash changes. In practice, though, deep-linking and URL-based routing required writing a fair amount of custom logic. This meant that deep-linking was often either completely ignored or bolted on later as an afterthought. In Ext JS 5, routes are now first class citizens. We can now define routes in the controller, complete with pattern-matched URL tokens, and per-action interruptible before filters. Routing in Ext JS 5 is now so easy that there’s no reason not to build it into your app from the beginning.
Chained Stores. Ext stores make it very easy to load and filter data from a server. But what if you want several stores with slightly different views of the same basic dataset? If you apply filters, those filters are reflected in every component that uses that store, so filtering a grid might have unintended consequences elsewhere in your application. As a result, it becomes common practice to create several different versions of the same basic store. While this is conceptually easy to maintain, it adds quite a bit of memory and network overhead, as loading these stores will actually load the same records individually. Enter the new Chained Stores. Now, multiple stores can share the same pool of records (each of which is loaded over the network only once), while each store has their own filters applied. It’s the best of both worlds: clear code, and efficient memory and network usage.
Data Sessions. Ext JS 5 introduces a new concept called a Data Session, which aims to keep track of multiple (possibly dependent) changes to several models, allowing for efficient and intelligent bulk updates. Data Sessions can also be used to isolate change sets, in effect giving you some of the powers of database transactions. This feature is definitely a departure from how JavaScript developers are used to interacting with models, but it sounds like a very powerful new tool that’s worth checking out.
Components in Grid Cells. We can now put buttons in grid cells. That’s all I have to say about that. (But sparklines look pretty cool too.)

Those are just a few of the improvements coming in Ext JS 5. For a more complete list, check out What’s New in Ext JS 5. We’re certainly looking forward to all the new goodies.