Flex vs ExtJS for internal system front end, what are their strengths and weaknesses?

Question

Looking back at an internal system I just built, the common server / page model with minor use of Ajax for some UI components. I'm not sure if I'm satisfy with the end result because it seems like we spent too much time on the frontend. Not a big fan of going through all the trouble for styling and making sure the CSS works right.

So I started thinking, are there better tools for the frontend?

How do Flex and ExtJS compare? maybe in these areas?

• learning curve
• functionality
• layout (without maintaining CSS)
• ease of implementation
• testability (TDD in Javascript vs in Actionscript?)
• performance
• maintainability

Please do not close this, I'm just asking for feedback from ppl experienced in Flex, ExtJS or both.

Thanks all!

Answer 1

I will start with my executive summary:

If I had to choose right now, I would go with Flex. Databinding and server communication are extremely easy, intuitive, and quick to set up. You'll find that if you're doing a lot of layout and the View of MVC-style frameworks, that Flex is probably going to get you set up more quickly, and it'll be easier to read.

Comparing Markup

Flex focuses a lot on MXML, which is the markup language. It's going to be brand new for most of your developers, so if they already know HTML/JavaScript/CSS, this might be a point off. The strength of Flex lies in that it's not limited like HTML. If you want a property, or a databinding, you can do it directly on a tag. Maybe not always best practice for everything, but you can.

ExtJS takes the approach of augmenting standard markup with JavaScript, so while your HTML certainly needs to be done well, it's really the JavaScript shining through, doing the work.

Components/Functionality

Flex is better at data handling. It uses E4X, which is an inline XML querying language that uses dot syntax. BookCase.Books.Book[@id=43].@title, for example.

ExtJS also does databinding, but it's more verbose, and not dead simple like Flex.

Flex has a lot of really nice built-in components for layout modeling, input, and charts. They're easy to use, have a common styling interface (generally), and can have custom styling and a subset of CSS, plus some proprietary extensions. ExtJS uses standard CSS markup, rather than just a subset.

ExtJS has more plugins and components than Flex, and the Menu control is far more customizable and looks better. Default styling is also a bit prettier in ExtJS.

Layout Engine

Flex wins this one hands down, in my opinion. If you want a column layout, you can either do a grid or a flow layout to achieve it, and in about 4 lines of MXML. The same in Ext requires a Javascript object to be passed through a layout class. IMO, it's more difficult to work with practically.

Implementation

Both systems are easy to deploy and maintain. Copy files, and both will work if you are doing continuous integration.

Testability

You can use jsUnit for ExtJS, and FlexUnit for Actionscript. How easy this testability is to manage depends entirely on your control of development style. Both frameworks will lead to a mix of UI with test-worthy code, with ExtJS requiring more separation by default.

If you set it up right, there is no clear advantage here.

Performance

Internet Explorer on Windows has the best Flash performance, sadly enough. If you are using a Mac, you may see slowness during initial plugin loading. Flex in production needs to be running a production release, and you need to be running the production Flash player, rather than the debug version. In our environment, production release + production Flash Player reduced the initial loadup by 4-6 seconds, so make sure you compare apples.

Animations will be faster in Flash, but honestly you're not really going to see a whole lot of a performance issue unless you're doing heavy data processing. If this application has a lot of animated charts, sliding animations, and things of that nature, you should go with Flash. That's what it's built for and it's good at it. If you're just going to be hiding and showing portions of the screen, and maybe doing basic animation, ExtJS will win.

Maintainability

Both have the serious potential to become monsters. Flex will be a monster if everyone codes everything in MXML and never writes scripts or external CSS. ExtJS will be a monster if you overarchitect how to handle the data and the layout managers.

The good news is that both can be successfully maintained in a developer friendly way, and both can fit into a continuous integration process, start to finish.

Hope this helps.