Wednesday, February 11, 2009

Dear Flex, Aesthetics Matter

So, as you may or may not have noticed, there's a little bit of a flap in the Flex community. You can read more here, but the short story is that to make Flex 4 compatible with Flex 3 code, since they may need to be used alongside eachother, Adobe's plan is to prefix Flex 4 classes with Fx to avoid namespace collisions with Flex 3 classes.

For instance: Flex 3 -> <mx:Button>, and Flex 4 -> <mx:FxButton> <FxButton>

I understand the problem a bit - most of it has to do with difficulties matching classes with CSS definitions to map to the classes, as I understand it. I appreciate how this could be a problem, but my position is simple. It's a slippery slope. Please, Adobe, don't ruin the good thing you have going, especially as you start to think about other places the Flex language could be used.

Here's what I mean. Look at this mess:

<LinearLayout
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentCenter=”true”
  android:gravity="center">
  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textAppearance="@style/small_grey_bold"
  android:text="@string/button_one_title"
  />
  <Button
    android:id="@+id/button_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_one_label"
    />
</LinearLayout>

That's a simple, centered, horizontal container with two components: a label and a button, in Android's layout markup. It centers its children and is aligned center in its parent. In a lot of ways, it looks similar to Flex. The tag names correspond to Android framework classes. As far as that goes, it’s simple to see what’s going on here as you read and try to find your place. But look at the android: namespace AT THE ATTRIBUTE LEVEL. Ugly. I’d go so far as Fugly. Also, are attributes camelCased or snake_cased or both? Each one is different. There’s even a android:layout_gravity and an android:gravity. I love Android, but its layout is a mess.

For contrast, here’s a similar layout in Flex:

<mx:HBox
  width="100%"
  horizontalCenter="0"
  verticalAlign="middle"
  horizontalAlign="center">
  <mx:Label styleName="small_grey_bold" />
  <mx:Button id="button_one" label="{button_one_label}" />
</mx:HBox>


See how much more clean that is? There are a few magical incantations (from a n00b’s perspective) like horizontalCenter=”0” - they’ll have to remember how some of the layout rules go, but the rest is pretty intuitive, and there’s way less boilerplate. In 99% of the cases in Android you HAVE to specify layout_width and layout_height or the precompiler complains at you. Why? No sensible defaults is one mark of a bad framework.

Someone once told me a heuristic for recognizing a good framework: When writing code, if you don’t remember what you need to write then guess. If you’re right, it’s a good framework. If you need documentation until you have it by rote, it’s not a good framework. Flex is a good framework. You’re generally rewarded by being able to intuitively guess what the right attributes are.

I chose Android’s layout language to compare because it’s particularly nasty, I think. If I knew enough HTML/CSS, I’d compare that too, because I think it’s way too overwrought. And anyway, two languages where positioning is in one language and the containers are in another? How dumb is that?

My point is that Flex, for any other faults people can pick out about it, has layout DOWN. It’s the best declarative layout language I’ve had experience with. Bruce Eckle agrees, and says “Flex is a DSL for building UIs” (paraphrased).

Now, does Adobe ruin this whole thing when they add Fx prefixes? No, not catastrophically, but like I said, it’s a slippery slope. Every concession that clutters the language puts a dent in the area where Flex really shines. As a developer that matters to me. We can look forward to a time where Flex is available as a layout language on more than just the web, and if I had the choice, I’d use Flex over Android’s layout language if I could, because I have to speak this language day after day, and I’d rather get my point across as quickly as possible, because that impacts my efficiency, my peace of mind, and ultimately how hard I have to work to build good user experiences, which is the goal we all share.

It’s been said before, so look around for it on the web: Aesthetics matter. (here's one quick let-me-google-that-for-you) Adobe, please keep in mind what makes Flex the best layout language, and don’t ruin it, even a little. Stay strong.

6 comments:

Matt Chotin said...

Using my alma mater as an example is cruel.

Tony said...

@Matt - completely unintentional, I assure you :)

Twinsen said...

Well to be fair, given the introduction of a defacto standard default namespace in Flex 4 it's more along the lines of:

Flex 3 <mx:Button>, and Flex 4 -> <FxButton>

But your point is well taken.

Tony said...

@Twinsen - thanks for the catch. Fixed.

Unknown said...

Seperating the structure and presentation details of documents makes it easier to consume those documents on different devices and in different ways. Just saying. HTML is the most successful language ever made, it's definitly got issues, but I wouldn't discount the defacto web document format. .

Tony said...

@myobie - Separating structure and layout of documents is a great idea.

Where it breaks down with HTML is that UIs are not documents. If I want to build a UI, I want to think about the total presentation package at one time - layout and structure. The only separation I need is data from presentation.