I Hate ExtJS by Sencha

I've been working at my current company for just over a year now, and I like the company and the people I work with.  A new CTO is pushing pretty hard to move us in a good direction, so I have hope still.  But this company has a massive amount of technical debt in the form of legacy code, and in the form of one enormous architectural decision mistake.

They chose to use Sencha's ExtJS.

And I loathe it.  ExtJS is a framework for building web applications that offer a rich user experience.  It's supposed to be an easy way to build applications without having to write much code.  But that's my first problem.  Any coding tool/framework/library that tries to take responsibility for writing the actual code for a developer is removing some flexibility and power for that developer.  I'll give an example.  If I want to create a button on a page using normal HTML, CSS, and JavaScript, I might write something like...

<input class="btnClass" onclick="doSomething();" type="button" value="Do Something!">

It's tremendously simple code.  I have complete control over what that JavaScript function does, and I can make the button look like whatever I want with the CSS class I've chosen.  And HTML handles the fact it's a button I'm putting on my page.  I just nest that button in the page where I want it to go in relation to the elements on the page, or set its absolute position or whatever, and it does exactly what I expect it to do with only a few minutes of coding (including the javascript function and CSS that I didn't show in my example).

Now to do that same thing in ExtJS, you create a JavaScript object with properties that tell the framework what you want.  You tell it that you want a button, what you want it to do, and what CSS class you want it to use.  You can even tell it where you want the button to go in relation to other things on the page, but the code to lay things out is miserable.  You're fiddling with an array of objects that each represent an element on the page, and you have to let ExtJS's engine write the code that does the actual layout.

And it doesn't even work right.  I'm trying to apply a style to a button so that there is an image on the button that's either an up-arrow or a down-arrow.  It's also supposed to have a solid grey background with a slightly darker grey border.  It's stupidly simple to do with CSS when applied to HTML.  Here's a sample style class...

.btn-expand
{
    background-color: #cccccc !important;
    border: 1px solid #bbbbbb !important;
    width: 40px !important;
    height: 20px !important;
    background-position-x:center !important;
    background-position-y:center !important;
    background-repeat:no-repeat !important;
    background-image:url("../images/ExpandArrow.png") !important;
}

You'll probably notice all the "!important" modifiers I put in there.  That's me trying to make it work over all the other styles ExtJS throws in.  You see, for some reason, ExtJS doesn't let you specify you want a button and then get what you asked for.  It simulates a button with a series of DIV tags and an Anchor tag.  It draws it out with the worst possible code, and there's nothing you can do about it.  It applies the style you asked for to the top level container (a DIV), and you just have to hope that none of the styles ExtJS applies automatically overrides your style.  And in my case... this ultra simple style that I created just doesn't work.  It doesn't change the appearance of of the button except for one thing.  It has my background-image repeating and tiled despite my code that specifies one instance of the image centered in the button.

And the entire framework of ExtJS works the same way.  It writes the most awful HTML and CSS code for you, and there's nothing you can do about it except to not use ExtJS.  Sadly, my company is used to using it, and I'm stuck with it for now.

The next big problem with ExtJS is that it become ridiculously heavy code.  Pages that could be written to make a round trip from client to server and back in less than a second (under normal network traffic circumstances) take 5 to 10 seconds (Just my experience with many of our pages.  Those times could vary).  We have a few pages that can take 30 seconds or more to come back, and the vast majority of the slow down is the ExtJS.  It runs, generates crap code, and provides its bulky crap to the browser which starts crying under the strain.  The pages are not anywhere near efficient.  It's astoundingly bad, and I have no idea why anyone would choose to use this framework.

It's a bit like smoking I expect.  Inexperienced people who don't know any better see other people using it, and it seems to be appealing.  But then after you try it, you find yourself unable to stop, and you're stuck with a habit that is killing you in horrid painful ways.  Perhaps that exaggeration of the result is too much, but I'm angry as I write this.

I'm sure there are other aspects of this framework that other people could bring up.  They might point out that once you're used to it, you can develop some pretty applications.  But those people would be glossing over that even an experienced software engineer is likely to need months or even a year working in it to get "used to it".  And they're also forgetting you can make extremely pretty applications without it.  And without the complication.  And without getting used to a framework that will hopefully die in bankruptcy.

I'm sure the people who made ExtJS had good intentions, and I can see they had to be smart to make it work at all.  But I hate their product, and I hope my company stops using it soon.