Home > ExtJS > What is ExtJS and why do I care?

What is ExtJS and why do I care?

February 22nd, 2009

If you don’t build websites, the answer to the second question is you don’t. There are better things for you to spend your limited internet time learning about… like, did you know there was a Simple Wikipedia project? I didn’t until just a few minutes ago.

Okay, now that we are just down to the web developers and the wannabe web developers, lets try and get the basics established so that future posts will have a common language we all agree on… or, at least, that I agree on and that you will be forced to understand to extract anything from my ramblings.

ExtJS describes itself as a “Ext JS is a cross-browser JavaScript library for building rich internet applications.” Which is as good a description as any, if not a tad simplistic. I think a more complete description would be, “Ext JS is a GUI framework for building rich internet applications available under either a commercial or open source license.” The emphasis here is that ExtJS:

  1. allows for the quick deployment of reusable GUI components
  2. is used to build front ends
  3. contains a mixture of javascript, CSS, and binary assets
  4. has a dual license model

Let’s break those points down to understand what I’m driving at.

Allows for the quick deployment of reusable GUI components

Let’s talk about the sexy stuff first. ExtJS provides a whole ton of Graphical User Interface (GUI) components that you would expect to see in a modern Desktop Environment, but generally don’t see on the web. There is an outstanding ExtJS Example page that shows off most of what the framework can do.

Here’s a quick and dirty list of the various components:

  • grids (like in a spreadsheet)
  • tabs
  • modal windows
  • trees
  • enhanced form elements
  • toolbars
  • menus
  • buttons
  • sliders
  • tooltips
  • progress bars

Sadly, I haven’t come up with a good way to demo any of these bits of code in WordPress yet (all JS code is sanitized by default to protect against evil), but it’s something I very much plan to work out. In the mean time, let me show you how easy it would be to create an attractive looking button.

  buttonObj = new Ext.Button({
    text:'Press Me',
    renderTo: 'button'
    handler: function(){
      // button action goes here

Then, all we would need is an HTML DIV element with an ID set to “button” and we’d be done. Once the Javascript had executed it would render the button inside of the designated DIV complete with the handler functionality all ready to go. If all of that is Greek to you, don’t worry, I’m going to explain some of the Javascript basics in a future post.

Is used to build front ends

ExtJS’s primary function is to generate HTML for display via a web browser and to attach behaviors to those HTML elements that the user can interact with. This aspect is more important for what it isn’t, than what it is. What ExtJS shouldn’t be used for is application logic. That’s not to say it cannot be used for application logic, just that down that way is madness, so try to avoid it. Here’s some good reasons to keep application logic out of ExtJS.

  • ExtJS talks to your webserver via AJAX, which means you will need backend scripts of some kind to process those requests. As those scripts are closer to the database that will back your application, it is those scripts that serve as the more appropriate vessel for your application logic.
  • ExtJS uses Javascript for anything functional, which means you would end up writing your application logic in Javascript. Not to dis on Javascript as a language, but most of us don’t have the experience with Javascript to write clean and maintainable application code.
  • ExtJS is more like the View part of an MCV application, and the MCV paradigm does not take kindly to embedding logic into the View. For example, if you put application logic into the view and have two views on the same data, you would need two implementations of the same logic. Talk about code duplication nightmares.

If you are really dead set on making a pure ExtJS application, I wish you all the luck in the world, but I don’t think you’re going to find many of my posts very helpful. Consider yourself warned.

Contains a mixture of javascript, CSS, and binary assets

Here’s where I disagree most strongly with the official ExtJS definition. Yes, ExtJS is a “Javascript library,” but it’s so much more than that. In addition to the javascript files that comprise the core of ExtJS, there is a full 2.3 MBs of CSS and image resource files that go along with it. For the most basic uses of ExtJS, you may never look in the resources directory. But as you begin to understand the deeper relationships in the library, you will begin to see how fundamentally important those CSS definitions are, and how tweaking a few images can give you a wide range of flexibility.

Has a dual license model

If ExtJS were to ever be considered controversial, it would be because of this final point. I didn’t come to ExtJS until late 2008, at which point the library had been around for a while. The story goes that ExtJS used to be available under a more permissive open source license, such that commercial developers could use the code without buying a commercial license. At some point in ExtJS’s product development, the company decided to change the open source license to the strictest of all licenses, the GNU General Public License. This engendered quite a bit of bad blood among those commercial developers, who felt like they were tricked into adopting a library and now either had to cough up the dough for a commercial license, GPL their own works, or start all over again.

My opinion is what it generally is involving the GPL… sounds good to me! If a commercial developer wants to benefit from the work, then they are free to pay for future development by buying a license or they can contribute back to the community. The value of a third option is marginal at best, and more likely to induce free-riding than stimulate community.

My company has the good fortune of being able to buy a commercial license outright, so we do all of our development in a closed source environment, so I won’t be showing any examples from that project. What you will see in these posts is using my own personal copy of ExtJS which I have under the terms of the GPL. Which, by my reckoning, makes any example code I throw up here also available under the terms of the GPL. Of course, a lot of the code will be more functional than expressive, in which case you don’t really need to worry about licenses… just use this to study and build your own.

I think that should do it for our introductory post (clocking in at 1133 words already!). Next time I’ll discuss some basic javascript concepts and then get into some of the GUI elements.

probonogeek ExtJS

  1. No comments yet.
  1. No trackbacks yet.