In this topic, we will present some tools that can help developers a lot while implementing Ext JS applications. You can find all the links of the tools mentioned here at the end of this topic.

The first tool is JSLint. JSLint is a tool that can help you to find JavaScript errors and can also help you to clean your code.

The second tool is YSlow. YSlow analyzes web pages and tells you why they're slow based on the rules for high performance websites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.

Ext JS is a JavaScript framework, and JavaScript performance is a topic that is a concern for a lot of companies. The minimum the user needs to load on the browser, the better. That is why it is very important to make a production build using Sencha Cmd and not simply deploy all the application files on production.

Sencha Cmd is also going to minify the Ext JS CSS file to a smaller CSS, and we can also include only the CSS for the components that we are going to really use (just in case we create a custom theme). It is also important to create any application custom CSS inside the sass/etc or sass/var folders so that the CSS can also be added to the main CSS file generated by Sencha Cmd.

CSS Sprites is another very important topic. Font icons such as Font Awesome are really nice, but sometimes that is a need to use image icons. In this case, we can create a CSS Sprite, which involves creating a single image with all the icons. And on the CSS, we simply have a single image and pass a background-position property of the icon we want to display, like this:

.icon-message {
  background-image: url('mySprite.png'),
  background-position: -10px -10px;
}

.icon-envolope {
  background-image: url('mySprite.png'),
  background-position: -15px -15px;
}

There are a few tools that can also help us to create CSS Sprites, such as SpritePad, SpriteMe, and Compass Sprite Generator.

Here are all the links for the tools mentioned in this section:

Always remember that Ext JS is JavaScript, so we need to care about performance as well. With all these little tips posted on this topic, an Ext JS application can improve its performance as well.

And last but not least, there are two tools from Sencha: Sencha Architect and Sencha Eclipse Plugin. Sencha Architect is a visual designer tool that is very similar to Visual Studio: you drag and drop, and you can see how the application looks, and the entire configuration that you need to do is done using the Config panel. Only methods, functions, and templates are free to enter whatever code you like. The good thing about Sencha Architect is that it helps to follow all the best practices and the code is very well organized. You can also develop all the Ext JS code using Sencha Architect, and on the server side, you can continue using the IDE you like the most (Eclipse, Aptana, Visual Studio, and others).

And Sencha Eclipse Plugin is a plugin for the Eclipse IDE that has the autocomplete feature enabled. Both Sencha Architect and Sencha Eclipse Plugin are paid tools. But you can download a trial version for testing at http://www.sencha.com/products/complete/ or http://www.sencha.com/products/architect/.

Another great IDE to develop Sencha applications is WebStorm (or IntelliJ IDEA). WebStorm also has the autocomplete feature (if we set it up), support for Sass and Compass (used by Ext JS for theming), and JSLint to validate the JavaScript code, among other features. It is also a paid tool, but you can download a trial version for testing at https://www.jetbrains.com/webstorm/. The source of this book was written with IntelliJ IDEA.