The One | What Is ExtJS

Full Async Stack Trace when Debugging

I’ve been wishing for this for a long time and the fine folks at Google delivered. Imagine being able to see the full stack trace when debugging, i.e. when tracing against an AJAX or a setTimeout()! You can do this in Chrome Canary already; read on for how to set it up:

Continue reading Full Async Stack Trace when Debugging

Rating: 10.0/10 (4 votes cast)

ExtJS vs. AngularJS

I’ve been meaning to say a few words about this for a long time: stop comparing ExtJS to AngularJS!

It’s like comparing a car to a tire:

One is not better than the other; it’s an invalid comparison
If you need a car, you probably shouldn’t buy just the tire
If you need just a tire, you probably shouldn’t buy an entire car

Consider this: minified version of ExtJS 4.2.2 is 1.4 MB (ext-all.js) and that’s not counting all the CSS and resources. By contrast, AngularJS 1.2.13 is just over 100 KB.

Now when I’m calling AngularJS a “tire” what I mean is that if you are building an app of any magnitude, you will probably be bundling it with some other libraries. I’m guessing many newer apps will have a bare minimum of AngularJS + jQuery + Bootstrap.

So, when would I chose one over the other, if I were equally proficient in both?

If an important objective is fast page load times (i.e. landing page), I would go with a lean stack on top of AngularJS
However, if I’m building an enterprise portal with a ton of UI and functionality, I would probably go with ExtJS
Now how about both? I’ve built apps that had a lean landing page with just jQuery that would then transition to the “app” in ExtJS; I think LastPass is an excellent example of that.

Rating: 10.0/10 (10 votes cast)

Illuminations for Chrome!

A few years ago I wrote about ExtJS4 Dev Tools of a Pro, where I mentioned a FireFox plugin called Illuminations. Since then I’ve switched to Chrome as my dev platform where I missed my cherished Illuminations plugin.

I believe only last week the creators of FF’s plugin have released a version for Chrome: https://chrome.google.com/webstore/detail/illuminations/hbhnkfhblakpfhcpepeoogmakimflibk

It doesn’t feel like a full port, but it does have the one feature I care most about: similar to how you can right-click on a page and “Inspect Element” to bring up dev tools and pinpoint the target in the DOM tree, you can now right-click and “Illuminate:”

At which point you will pinpoint the target in the Ext component tree:

Combined with Sencha Inspector for Chrome, the Chrome browser is now a powerhouse for ExtJS/Sencha Touch development!

Rating: 10.0/10 (3 votes cast)

Responsive Design in ExtJS 4

I think this has been a hot topic lately: making web sites that adjust based on resolution of the device the user is using to browse. Now I’m not going to make this post about Sencha Touch. Even though in my “perfect responsive strategy” I would be using both ExtJS and Sencha Touch (and I can write more about that if you care to comment about your interest), this post is going to be only about ExtJS.

In this example we’ll be achieving the very common “navigation collapses to menu” effect, demonstrated here in my Android 4.x LG Intuition, by rotating the device from horizontal to vertical:

Continue reading Responsive Design in ExtJS 4

Rating: 8.2/10 (22 votes cast)

ExtJS vs. Touch Config System

In this example I will demonstrate the difference between how ExtJS 4 and Sencha Touch 2 config systems treat non-primitives (i.e. arrays or objects). This aspect of the frameworks is very important to distinguish as it will save you from some very painful debugging sessions.

Long story short, Touch will actually clone any objects from the config for every instance of your class, whereas ExtJS will slap them on the prototype (probably not what you want).

Now for a practical example.
Continue reading ExtJS vs. Touch Config System

Rating: 10.0/10 (7 votes cast)