Web Application Architecture with ExtJS

I’ve spoken at great length about the need for developers to have an organized User Interface, and I frequently see questions posted to the ExtJS Sencha message boards asking about “Best Practices” for creating a web application with the ExtJS framework.

As I recently started a new project using ExtJS, I thought I would share some of my own advice on the subject.

Folder Structure

Architects build things… and as software architects, it’s our job to build an organized folder structure as the solid foundation for our web application. Organization is the key here; we don’t want to be searching through our IDE for hours trying to find something. To accomplish this task, we will setup a UI based on “tiers” (think of an N-tier application).

A habit I’ve developed over the years is to create a root-level folder named with an underscore as the first character (/_app/) which contains important UI application files. The underscore is important for two reasons:

1. it visually stands out, and
2. it will be listed at the top when sorted alphabetically

For argument’s sake, we will create a folder structure for our application which looks like the following:

In this way, we keep all of our UI application code separated from other web entities like HTML and image files. (I consider JavaScript and CSS to be “UI application code”, which I define as logic or presentation within the UI. HTML and other file types are generally more structural and are dependent on JS or CSS. Server-side files often contain logic, but fall into a different tier of the application at large.)

If necessary, the folder structure can be much more robust – it completely depends on how your application works. For example, a project running ASP.NET MVC will have root-level folders for Models, Controllers and Views which contain code specific to their tier’s functionality.

ExtJS Framework

The first thing any application using ExtJS will need is the framework itself (duh!). Copy the ExtJS files to /_app/ext-3.2.1/ Name the folder to match whatever version you’re running – this makes future upgrades a breeze.

Assuming that you’re not using ExtJS in conjunction with another framework (like jQuery), your application simply needs to include three files:

• ext-all.css
• ext-base.js
• ext-all.js (or ext-all-debug.js)

I always like to include the CSS file before the JS files, but that’s just my preference. ext-base.js must be included before ext-all.js – read your INCLUDE_ORDER.txt file!

    <!-- ExtJS Framework -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-3.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="/_app/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/_app/ext-3.2.1/ext-all.js"></script>

Themes

If you have any custom ExtJS themes that you plan on using for your application, this would be the appropriate time to add them.

Place these files in the /_app/ext-themes/ folder. We specifically separate these files from /_app/ext-3.2.1/ to simplify the upgrade process should you migrate to a newer version of ExtJS in the future.

    <!-- ExtJS Themes -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-themes/css/xtheme-XYZ.css" />

Overrides

Next, you should create CSS and JS files to place any overrides which you’ll need. These overrides are generally bug fixes – not customizations. The point of these files is to have a central place for fixing oddities in the ExtJS framework which may be fixed in a future release.

Here’s what I call these files:

• Ext.Overrides.css
• Ext.Overrides.js

    <!-- ExtJS Overrides -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-overrides/Ext.Overrides.css" />
    <script type="text/javascript" src="/_app/ext-overrides/Ext.Overrides.js"></script>

At this point in our application (the beginning), we probably won’t have any overrides since we haven’t started writing any code. One exception is the global variable BLANK_IMAGE_URL value, which needs to point to our local application (not the remote ExtJS server, which is by default).

In our Ext.Overrides.js file, simply add the following:

    Ext.BLANK_IMAGE_URL = '/_app/ext-3.2.1/resources/images/default/s.gif';

UX Classes

Last but not least, we can now include any ExtJS user extensions (UX) that we need for our application.

    <!-- ExtJS UX -->
    <script type="text/javascript" src="/_app/ext-ux/Ext.ux.XYZ.js"></script>

Application Code

The first thing we should create at this point is our application CSS files (placed in /_app/css/ ). These styles may or may not have anything to do with our JS classes, but we obviously need to include them. I suggest including these styles now (as opposed-to before the ExtJS styles) because we don’t want ExtJS to overwrite any of our custom styles. (Browsers apply styles based on the most recently included definition.)

Next it’s time to add our custom application classes (placed in /_app/js/ ). Although I won’t go into any specific details about how to write your classes, I highly suggest reading the posts by Ed Spencer and Jay Garcia (see below under Resources) which contain excellent tutorials.

Namespace

I usually start by creating a namespace file which asks ExtJS to creates all of my application namespaces before I load my JavaScript classes. This isn’t necessary, but I’ve found that creating the namespaces early often prevents errors due to classes being included in the “wrong order”. It can also save code, as none of your classes need to explicitly create their own namespace.

I call this file _Namespace.js – using the same naming convention as before (starting with an underscore) to draw attention to its importance. It’s contents include only a handful of lines (depending on how large your application is). This file should only contain namespace definitions.

    Ext.namespace(
        'NS1',
        'NS2',
        'NS3'
    );

Also, if you’re going to use this idea, be sure to include _Namespace.js before any of your other application files!

JS Classes

Lastly, we can include all of our application’s JavaScript classes in the HTML header.

    <!-- Application Files -->
    <link rel="stylesheet" type="text/css" href="/_app/css/styles.css" />
    <script type="text/javascript" src="/_app/js/_Namespace.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass1.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass2.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass3.js"></script>

Put It All Together

    <!-- ExtJS Framework -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-3.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="/_app/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/_app/ext-3.2.1/ext-all.js"></script>

    <!-- ExtJS Themes -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-themes/css/xtheme-XYZ.css" />

    <!-- ExtJS Overrides -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-overrides/Ext.Overrides.css" />
    <script type="text/javascript" src="/_app/ext-overrides/Ext.Overrides.js"></script>

    <!-- ExtJS UX -->
    <script type="text/javascript" src="/_app/ext-ux/Ext.ux.XYZ.js"></script>

    <!-- Application Files -->
    <link rel="stylesheet" type="text/css" href="/_app/css/styles.css" />
    <script type="text/javascript" src="/_app/js/_Namespace.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass1.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass2.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass3.js"></script>

Optimization

Larger applications may have hundreds of JavaScript files containing custom classes, methods, etc. Simply including each file in the HTML header will result in potentially long page load times – and this is far from ideal.

Many web servers compress JS files for you, and you always have the option of minifying your code – but loading hundreds of compressed and minified files still takes time and bandwidth.

One option is to combine/compress all of your classes into a single file – exactly as ExtJS has done with their ext-all.js file. This is a great solution – but it’s a manual process, one which can be tedious and is prone to user-error.

A far better solution is to automate this process – and if you’re using Visual Studio (like me), Dave Ward has a great post on setting that up.

Lastly, tools such as YSlow and Google Page Speed will suggest adding your JavaScript files to the bottom of the page. This may be advantageous; however, if your application makes use of the ExtJS Viewport or the famous Ext Desktop example, it probably won’t do much good as the UI is completely dependent on the JS framework.

Your Thoughts

Do you have any thoughts on what I’ve described above? Are you doing something that I missed?

I look forward to seeing your comments!

Resources

• Writing Compressible JavaScript (Ed Spencer)
• Abstract Classes with ExtJS (Jay Garcia)
• Using Namespaces to organize your JavaScript code (Aaron Conran, Sencha Blog)
• Writing a Big Application in Ext (Jozef Sakalos, aka Saki)
• Ext.override – Monkey Patching ExtJS (Ed Spencer)
• Automatically Minify and Combine JS in Visual Studio (Dave Ward)