What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

30Apr/150

ExtJS 6 vs. Responsive

A few weeks ago I was at SenchaCon 2015 and majority of the sessions I attended revolved around ExtJS6 and Sencha's responsive strategy. In summary: an effort has been made to converge ExtJS5 and Sencha Touch 2, but ultimately you will still be building a separate ExtJS and a separate Touch app. You do not end up with truly "one framework", which is what I hoped for. Read on for details...

To understand what ExtJS6 is in regards to the responsive story, it is worth understanding how the previous iterations approached it.

ExtJS 3 and Prior
This was the dawn of mobile devices and Sencha did not yet have a responsive strategy. Technically speaking, there was no reason you couldn't run an ExtJS 3 app on a mobile phone, but it would be a substandard experience. There was no optimization for touch interactions; the componentry was all desktop-oriented, and the library itself was too heavy for slow 2G connections. The main cause of the size of the library are all the legacy IE browsers (down to 6!) that ExtJS supports.

ExtJS 4 and Sencha Touch
Sencha Touch was the answer to the ever growing mobile market. Targeted at smartphones and tablets, it was optimized for touch interactions; all the componentry was appropriate for mobile devices, and the library footprint was small enough to be tolerable over the now faster 3G connections. At this point the responsive strategy looked like this:

  • Desktops - ExtJS 4
  • Tablets - Sencha Touch
  • Smartphones - Sencha Touch

You could still write an ExtJS 4 app and run on a tablet or a smartphone (as I blogged here), but Sencha Touch was a much better answer. It may not be as smooth as a native app, but it sure beats the experience you'd get with ExtJS 4. ExtJS 4 still supports IE6, so it's a very heavy library.

ExtJS 5 and Sencha Touch
ExtJS 5 received a "transplant" from Sencha Touch: it now supported touch gestures. Also there were efforts in optimizing some of the componentry to be more touch-friendly (i.e. in grids a "show on hover" effect is used in the header dropdown menus; in ExtJS 5 this now works from long tap). The themes also received "touch" versions that would have more padding around buttons and certain tappable elements. At this point the responsive strategy looked like this:

  • Desktops - ExtJS 5
  • Tablets - ExtJS 5 OR Sencha Touch
  • Smartphones - Sencha Touch

Because ExtJS 5 still supports Internet Explorer 8, it is still a heavy "non-modern" framework, with a slow JavaScript layout system, and a ton of code related to legacy IE support. That means even with a 4G connection and the latest iPhone, you would still get a substandard experience using it.
It is also worth pointing out that ExtJS 5 and Sencha Touch do not share much of the underlying fundamentals, i.e. event system, class system, data package, forms, etc. On the surface many of those features might appear identical, but behind the curtains they are different enough to make "common" code very hard to write. Lets refer to this functionality as "the Core".

ExtJS 6
I came to SenchaCon hoping to hear that there's now just one framework and IE 8 and 9 support has been dropped off. Instead, I was told that there is in fact just one framework, but IE 8 and 9 were still supported. I couldn't believe it - having my cake AND eating it too?
However, what I heard and what I saw were two very different things. What I saw was that you still have 2 frameworks, they're just now sitting in the same folder. What I saw was that you'll still be building 2 separate apps and compiling and deploying 2 separate apps - one "ExtJS" and one "Sencha Touch".
The terminology that Sencha so cleverly uses to disguise the reality is "Modern Toolkit" (ExtJS) and "Legacy Toolkit" (Sencha Touch). So, ExtJS6 really means "we copied Sencha Touch into some folder inside ExtJS".
In Sencha's defense, the did standardize "the Core" (mentioned in previous section - various fundamental systems like data package and MVC). However, the responsive strategy still looks like this:

  • Desktops - "legacy toolkit" (aka ExtJS)
  • Tablets - "legacy toolkit" or "modern toolkit" (aka Sencha Touch)
  • Smartphones - "modern toolkit"

So, really the responsive strategy remains unchanged. It will be easier to write common code, yes, but you'll still end up with an "ExtJS app" and a separate "Touch app". Switching from one to another in a browser will still require a full page reload. ExtJS 6 "legacy toolkit" is still the same old heavy JavaScript layout ExtJS, not appropriate for use on smartphones.

ExtJS 7(?)
I'm hoping the next iteration of the framework will finally do what I hope for: drop off the legacy IEs and use a truly same codebase for both desktops and smartphones. At which point, the responsive strategy can finally become "one framework to rule them all".

VN:F [1.9.22_1171]
Rating: 7.7/10 (11 votes cast)
ExtJS 6 vs. Responsive, 7.7 out of 10 based on 11 ratings
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.