First impressions on Ext JS 5

First impressions on Ext JS 5

I’ve been wanting to check Ext JS 5 out for a few months now since its release in June. I read the blog post announcement and really got excited with the new release, especially with the introduction of MVVM, URL Routing and new Responsive Layout. Here’s some personal thoughts and first impressions on evaluating this new release.

New Product Page and docs

The new product page is beautiful and provides a lot of details, history of the releases and most important, a “get up and running” page with a roadmap of articles to read and learn the framework.

Ext JS Getting up and running

I’m not in the mood to read everything so I’ll just skip to the architectural section. If there’s one thing in this release you don’t want to miss is this section:

MVC or MVVM?

I’m starting to digest a little bit on the new architectural concepts and the first question that comes to my mind is: MVC or MVVM? I think most developers might have the same question.

I think I’ll need a whole separate post to go over this, but something tells me MVVM might provide a better foundation.

For me, the key thing is that in MVC the controller never dies. It’s instantiated along with Ext.Application and it lives forever. If you have a big app and your user might never access the, lets say, “Account Settings Page”, the controller for that page is instantiated and ready to handle events. This sounds bad, and it’s indeed a pain point when you have a massive app with hundreds of controllers.

I know some developers were creative to find a way to load controllers dynamically or any other way to keep the memory footprint more manageable. I don’t have any pointers to actual code I could share, but I’ve seen it. Nevertheless, is one extra thing to take care.

Furthermore, MVVM has a super easy binding between View and ViewController. In MVC you need to write a component query to tie your listener to the component. Not having to write component queries is a big *big* plus. From my experience in the field, component queries can make things very messy.

In the new MVVM:

  1. ViewController is instantiated and destroy alongside the view.
  2. Event binding avoids messy component queries.

So take these two points and you might also skew towards MVVM.

URL Routing

This is a subject very dear to me. I’m a big advocate on routing URLs to your application flow, and I even developed an extension Ext.ux.Router for Ext 4 and wrote a guides on this.

The whole concept is pretty simple and the out-of-the box solution from Ext 5 resembles a lot what I was doing with Ext.ux.Router in Ext 4. So I think upgrading will be very easy.

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'users' : 'onUsers'
    },

    onUsers : function() {
        //...
    }
});

I like routing for 2 aspects:

  1. deep-linking
  2. code decoupling

The first is self-explanatory. I can send my friend Juris a link to “www.myapp.com/#account/3” with a message “This is the client X’s account” and he’ll be presented exactly with the screen I was seeing.

On code decoupling, I already have a lengthy post on the subject. You can read more about it here.

Responsive Layout

Responsive layouts and single page apps are a tricky subject. To begin with, I think the use case for this is desktop vs. tablets.

I would not go crazy and try to translate an experience suitable for desktop to a small phone display just by rearranging components in the screen. I strongly believe that a mobile app is something tailored to small screen and different than your desktop/tablet app.

But same UI for desktop and tables is quite all right, so here you go. Use it for this use case.

In CSS-land you have media-queries to accomplish responsive layouts:

@media (max-width: 600px) {
 width: 300px;
}

In the Ext-land you have the new responsiveConfig:

responsiveConfig: {
    'width < 600': {
        width: 300
    },

Very easy to implement and adjust your layout for different screen sizes.

Final thoughts on Ext JS 5

There’s so much more on this release that I didn’t mention. New updates to tabpanels, grids, forms, new Themes Neptune Touch and Crisp, and more.

Luckily there’s a page on the docs just for showcasing the new stuff: What’s New in Ext JS 5

Another aspect is that the upgrade path to Ext 5 is much easier than it was to Ext 4. There’s no massive changes/refactoring, and even the new features were well thought to coexist with prior version. Definitely a lesson learned and well applied on this new version.

Finally, congrats to the team! I know it takes a lot of work and tough discussions to put a new version out. One more time Ext proves it is the most complete UI framework for web applications to date.