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

4 thoughts on “10 Things I Learned about Ext JS After 1 Week

  1. Thanks for the notes after your first week with Ext JS. I think you’ve accurately hit on some of the tradeoffs that we’ve faced in the design and implementation of Ext JS. Yes, Ext JS is a strongly opinionated framework that abstracts and encapsulates the raw CSS/HTML for you. In a way, it delivers what Google is trying to do with web components & shadow DOM in something that’s usable cross browser today. A pattern we see in a lot of our users is that a team that’s very experienced with web tech will take on the work of creating components that can then be re-used by their .NET/PHP etc. devs.

    The deep DOM is absolutely driven by the < IE9 browser support, but also by workarounds for lots of minor bugs in even modern browsers, and our layout system. Sencha Touch – our touch framework has a shallower DOM.

    For iterating on themes etc. you might want to check out Sencha Architect 3 – which has a theming module built in that does continuous recompiles of SASS. It can do a SASS recompile in a few seconds, so it definitely helps the cycle time.

    I'm a huge fan of stackoverflow, but the Sencha forum is absolutely the place to ask your questions :) It has 930,000 posts and half a million members vs. stackoverflow's 30,000ish Ext JS posts and about 3 to 4 thousand tag followers (statistics approximateish)

    I won't go on about the other reasons that I think Ext JS is awesome (we had MVC before backbone, xtypes and templates are amazing, our grid has ridiculous amounts of features etc.) – but I do hope you'll grow to love our conventions if you spent more time with us :)

    Michael Mullany
    CEO, Sencha
    @mmullany

    • Michael,

      I really appreciate your feedback! Indeed, I will be spending some more time with Ext JS in the near future and I do hope to become more familiar with it. I know for certain that there’s a lot more that I can learn and improve upon. And although there may be some things that I don’t love, I still found that I was able to dig in and get work done with less overhead than I expected.

      That said, I do hope that some of the DOM bloat will be reduced in a future version since supporting IE6 should no longer be necessary and IE7 is a lessening concern.

      Thanks again!
      Mike

  2. As we’ve previously announced, we’re dropping IE6 in the forthcoming Ext JS 5, and we’ve been able to get rid of some of the bloat & complexity. Unfortunately, IE8 support is still a high priority for more than 50% of our community, and that still drives a lot of complexity.

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s