Recently I’ve been devising some recommendations for migrating our Flex 3.x applications to Flex 4.0, and upgrading from Flex Builder 3 to Flash Builder 4. For the most part, this has been a trouble-free experience. As I would expect, Flash Builder imports Flex Builder projects without difficulty, and so long as compiler options selected carefully, applications look and behave as expected.
Discussions about Flex 4 invariably turn to the new Spark components, and I’ve been working quite a bit to understand the implications of migrating existing UIs to this new component set. The result, so far, has been some disillusionment.
Adobe clearly states that skinning is a primary workflow process when dealing with Spark components. Indeed, the default theme for Spark is very plain – much more so than the Halo theme that shipped with earlier versions of the SDK.
The new skinning architecture enforces a much cleaner separation between form and function. In Flex 3, buttons were rectangular because this was hardwired into the button component. The Button class in Spark has no appearance-related code; this has been delegated to the skin and the skin can implement any drawing strategy a developer or designer so chooses.
There is no arguing the elegance of this, but is it too clever? I should make clear at this point that I am coming at this from an “enterprise” development perspective. I can imagine that designers and developers who work on applications where user experience is paramount would be overjoyed by the expressive freedom that Spark and the new skinning architecture provides. For the rest of us working on “bread and butter” applications that place function before form, practice iterative development and must meet tight deadlines, these aspects of Spark are more troubling.
Sometimes a rectangular button is ok. The traditional Halo theme isn’t going to win any design awards, but it in many cases it was adequate. When it wasn’t , we could readily customize appearance through properties and CSS attributes. When these didn’t meet the need, we employed traditional skinning using vector and binary assets. Elegant? Not really, but it got the job done.
With skinnable Spark components, it is almost always necessary to tweak some aspect of a component’s appearance because the default theme is not much more than a wireframe. In some cases you can get by with CSS, but many of the familiar styles have been removed from Spark – presumably based on the assumption that you’re probably going to write a skin anyway, so why clutter up the API with (appearance) properties and styles. Fair enough, but this where things really being to go south.
There are two options for creating Spark skins: using code templates generated by Flash Builder or via one of Adobe’s other design tools, like Catalyst. The skin template for a button is over 200 lines of MXML code. There is no skin-specific GUI designer, so a developer must go about modifying fine-level detail by hand, monitoring their progress through the code-compile-run process (we don’t use the designer in Flash Builder too much since our UIs are usually too complex to render properly). Not productive at all. Moreover it bloats our maintained code base with lots of boilerplate. And it smacks of copy-and-paste coding, one of the most egregious code smells.
The practical solution seems to be “buy another Adobe product.” So I downloaded a trial version of Catalyst. I’m not (by any stretch of the imagination) a designer, but I was able to get a basic button skin set up without too much trouble. Flash Builder has a new import feature that allows you to import Catalyst project files, which I did. The first thing I see is a skin called “Button1” in a package misnamed (IMHO) “components”. Our code bases are rather large, and this doesn’t fit with our code-organization strategy, so I went back to Catalyst to change the naming to something more meaningful. I couldn’t. Ok, so I went back to Flash Builder and just changed it there. Of course, now I’m out of sync with Catalyst (note: Flash Builder does not know how to maintain Catalyst files – it just imports them into a standard Flex project). Unfortunately, Catalyst can’t import Flash Builder projects. So now we find ourselves permanently out of sync with design. This is even more bizarre when you consider that Adobe’s own documentation indicates that there are a number of properties (notably sizing constraints) that will need to be manually edited after importing Catalyst projects into Flash Builder.
It was always my impression that Catalyst was supposed to make designers first-class participants in the development process – something we would very much welcome. Ironically, the limitations of Catalyst, coupled with the necessity of using this kind of tooling to maintain productivity, have actually increased the separation between design and development (at least in the context of Spark). How do we achieve iterative development when design coding (and design is coding in Spark) is a one-way trip? What was Adobe thinking?
There are other issues like maintaining two entirely different styling workflows for “legacy”
Flex applications that have mixed Halo and Spark components. This will be burdensome for both design and development teams.
Anybody still reading would be forgiven for thinking “for heaven’s sake just use Halo then.” Fair enough, but Adobe’s API docs recommend using Spark components where there is overlap with Halo, and I am concerned that at some point Halo peers will be deprecated. If this is correct, it would have been better to start the transition earlier rather than later.
Adobe would do well to remember that elegance in development tools rarely wins the race. Witness the overwhelming popularity of Visual Basic in the pre-web era, and the continued proliferation of frameworks to tame JavaScript. For many of us, the “best” option is whatever helps is get a product out the door with minimal resources, tooling and fuss. I’m still learning about Spark, skinning and the tooling ecosystem that surrounds all of this, but my impression so far is that these new features will be more of a liability than asset.