10 Things I Learned about Ext JS After 1 Week

I recently had the opportunity to work on a project for a new web application on the Ext JS framework. I am a front-end developer (“UX Engineer” by title) so my background is primarily in HTML, CSS, and JavaScript. As such, my responsibility on this project was to implement the user interface design, which had previously been conceptualized in Abode Photoshop.

Starting off, I did have some understanding of the basic concepts, but almost no practical experience. A co-worker helped me install the necessary bits and get the project up and running. I completed my work in Aptana Studio 3, primarily because it provided an easy way to compile and run the project.

I worked on the project for about 5 days, which was just enough time to get a crash course in Ext JS and complete the tasks assigned to me. During the frenzy that ensued, I learned several things about the Ext JS framework that I felt were worth sharing.

  1. Ext JS takes a very modular view of, well, everything. Instead of working in a few massive documents, I found myself working in several small documents. In some ways, this was nice because the documents were easy to scan through and work with, but it also meant that I usually had a lot of documents open in Aptana. I had to develop a system for ordering the tabs so I could easily find the one I needed.
  2. Ext JS projects come with a pre-built interface that includes dozens of UI components that can be utilized at will. There are several themes to chose from that allow developers to create projects with little-to-no CSS required.
  3. If you need to implement a custom interface, it seems that creating a new theme is the best approach. Ext JS has a theming guide that provides a pretty good overview of how to set up a new theme.

  4. Even custom themes need to start with a base theme. This provides a basic set of styles for all of the UI components included in the project. The “ext-theme-base” includes the least amount of inherent styles and should be the easiest to override.
  5. Ext JS utilizes SASS, which allows you to use variables, math operators, and other functionality not available in regular CSS. This was also my first real foray with SASS, but I was already familiar with the core concepts. Although I looked to make use of the various benefits that SASS offers, I was working on a very small project and I found that I only feature I needed was variables. Unfortunately, in this case, I don’t think the 10 or so variables offset the extra overhead that came with compiling the project every time I needed to check my styles in a browser.
  6. Even the CSS is modularized in Ext JS. Ext JS has a separate SCSS file for each UI component (which I didn’t touch) and I had a separate SCSS file for each custom view. That provides some organizational benefit, but, in the end, Ext JS compiles all of them into one file when the project is built, which nullifies any speed optimization benefits that separating the code may have also provided. It also means that you need to have a good understanding of how the final CSS file will be compiled or your style updates may get overridden by other code that is inserted later in the document.
  7. Ext JS allows you to create a “universal” style sheet in your theme that will be included on all views of your application. Under /packages/{your-theme}/sass/etc create a file name “all.scss.” I used this file to hold the base styles for my application as well as my SASS variables and then had view-specific styles in separate files.
  8. Although Ext JS does allow you to create custom themes and override most default styles, there are still many instances where inline styles are inserted. In those cases, I found that I usually needed to apply the !important CSS snippet in my file.
  9. The generated HTML in Ext JS 4.x is massively bloated. Although there are ways to insert your own HTML, most of the time, I worked with Ext’s UI components. A simple button generated by Ext might include like 10 nested HTML elements. I believe that the main reason for this is that the default themes still support IE6 and they need a lot of elements to pull off gradients, borders, etc. in exactitude in all browsers. This might be my least favorite thing about Ext JS, because it creates a lot of unnecessary overhead for the browser and makes navigating the DOM through Chrome’s Dev Tools (or a similar tool) an essential step in styling anything.
  10. Ext JS has pretty good documentation. I found it to be a little cryptic until I had worked with the framework for a little while, but then it was quite helpful. However, if you do have a question that the document doesn’t answer, I found that there are not a lot of other resources available. Even stackoverflow is short on answers. I’m told, however, that the Sencha forum is quite good in a pinch, but I have yet to try that route.

By the end of the week, I felt pretty comfortable working with Ext JS. There was a bit of a learning curve, but, between my helpful co-workers and Ext’s documentation, I was able to overcome most issues with little trouble.

After a week of total immersion, I don’t feel like I can fully endorse Ext JS. I can see how it would be a good tool for development teams that don’t have any front-end developers, but it certainly didn’t make my tasks any easier. In general, I prefer to work with lightweight frameworks that provide more control over the HTML and CSS.

What has your experience with Ext JS been like?

Advertisements