... .  .    .       .joeberkovitz.com

Adobe MAX 2007: Highlights, Shout-outs, Brags

I spent a good part of the last week in the Chicago area, attending and speaking at Adobe’s MAX conference along with my colleague Daniel Rinehart. It was a great show this year, with a lot of excitement surrounding the new technologies and concepts on display, particularly AIR, Adobe’s new desktop application technology that blends the capabilities of Flash, HTML and PDF.

A lot of great stuff was shown at the conference, and many folks have blogged the details well (Daniel for one) so I won’t bore with another repeat of it all. There were a number of highlights, including Thermo (code name for a forthcoming design tool aimed at Flex UIs that has some powerful capabilities for designers, allowing them to seamlessly move from comps to a “real” app in small, simple steps of refinement). I was also impressed by the move towards breaking out VOIP/collaboration capabilities (like those found in Adobe Connect) into separate Flex components that could be deployed in any application. I think Adobe is moving in a smart way to make their stuff more open and more invention-friendly so that developers can use their technologies as a springboard, not a black box.

Of course, I have to give big props to my friends and former colleagues at Virtual Ubiquity, the creators of the Flex-based word processor Buzzword. At MAX it was announced that their company was acquired by Adobe, and little wonder. Buzzword is going to rock Word, OpenOffice and Writely/Google Docs, and what better vehicle to propel Adobe into the online-productivity-app world?

This show was particularly exciting for me because Adobe Chief Architect Kevin Lynch demoed my company Allurent’s “Desktop Connection” for Anthropologie as part of the keynote on the first day. We think AIR is a really promising vehicle for platform-independent rich media applications on the desktop, and at Allurent we’ve been busily prototyping and working up ideas on how to exploit its best features. Desktop Connection is a kind of digital brochure, intended as a premium shopping experience for valued Anthropologie customers. It’s an AIR app that can be used either online or offline (since it comes with data for the whole catalog plus a bunch of preloaded media).

The feature that got the most audible reaction from the audience (and the most subsequent queries from developers and designers at the show) was the search-by-color feature:

The shopper can click on any point in a color wheel, or in a pixel of an image dragged in from the desktop or a browser, and the app displays a cluster of products with nearby colors, grouping similar hues together in the display. Although I don’t get much time to hack these days, this was a feature that I personally conceived and coded up myself, so that made it extra gratifying to see the reception from folks at the show!

Many developers and designers at the show came by the AIRPark (a set of barren white metal picnic benches on an Astroturf rectangle, in case you’re wondering what that might mean) to compliment us on the great-looking app and ask us how we implemented this feature. In case you’re one of them, well, the non-secret part of the sauce is this: apparel manufacturers typically create tiny “color swatch” image files that are used to convey color choices on their website. We take the average color values of these swatches, transform them into HSV (hue/saturation/value) triples and put them into our database. Then we build a special index based on a perceptual notion of “color distance” (check out color spaces on Wikipedia if you’re interested), and use that for a fuzzy match to the target color. The results are then sorted in a simple way to place similar hues near each other — for instance, in the example above, you see some orange items placed together although the target color was a shade of red.

Oh yeah, and my panel on Flex Best Practices went pretty well. I wanted there to be more blood, guts and arguing; in the end I think I was too polite and went easy on the contestants panelists. But at least the audience got to hear a bunch of contrasting, dissonant opinions on basic questions. I’m going to have to make Barcelona a real WWF-style smackdown. Hope to see you there!

No Comments

Flex Best Practices Melee at MAX

At MAX North America and MAX Europe this fall, I’m very pleased and excited to be moderating a discussion panel titled “Flex Best Practices”. A bunch of interesting folks will be on the panel, none of them lacking when it comes to having an opinion: Steven Webster (Adobe Consulting), Dave Coletta (Virtual Ubiquity/Buzzword), Dave Wolf (Cynergy), and Anatole Tartakovsky (Farata Systems).

I can promise a few things about this panel:

- No Canned Dog Food. There will be no PowerPoint slides or videos shown in this panel, just unfettered, spontaneous discussion. Some of it could involve you, if you’re in the audience.

- Concrete, Topical Questions. I’m canvassing the Flex developers around me (including readers of this blog) for the issues that are bothering them as they work right now. We’re not going to discuss how many MXML tags can fit on the head of a pin. We’ll probably talk about ways that we’ve seen Flex projects run off the rails and self-destruct, though.

- Contradictory Answers. In discussions of practice, we should cherish contradictions — they are a sign that we’re talking about something that is actually interesting, on which there are multiple points of view. I don’t think we’ll have to worry about everyone on this panel agreeing on everything! And the disagreements may help us all get closer to our own answers.

We’ll certainly be touching on frameworks, coding standards, multidisciplinary workflow, team structure, software modelling. What else? Please post a comment with your ideas, if you have some!

1 Comment

Antennae Flex Ant Templates now on Google Code

A while back I announced Antennae, a powerful set of templates for building complex Flex projects with Ant. I’m very pleased to share the news that Daniel Rinehart has taken over leadership of this project and has moved it over to a new home on Google Code. This is a great move for the further evolution of Antennae.

Daniel is also going to be speaking on the topic of automating Flex builds at MAX 2007 — if you’re going, be sure to catch his talk!

No Comments

…and A Moment of Coolness

Let’s not overlook a Moment of Coolness (see previous posting): I was able to log a bug against the Flex framework in Adobe’s public bug database, and refer to it in an online post. This is some real progress towards openness, and a milestone for the platform. It bodes well for the health and progress of Flex.

There’s been a lot of discussion of Silverlight vs. Flex [Continued...]

1 Comment

Moment of Weakness: Weak Event Listeners Can Be Dangerous

It’s been a funny week, in which I’ve run into two different killer bugs, both of which were caused by the same dangerous (but occasionally useful) programming practice: weak event listeners in ActionScript 3. I’m going to write a bit about this scenario, because it’s very hard to debug and it’s a very non-obvious mistake that I think many people can make. (Even the Flex team can run into this: one of the bugs I found was in the Flex 3 Beta framework, SDK-11389.) And, yes, this can occur in other languages: I’ve seen it in Java too.

Both bugs manifested themselves as an event which, unpredictably, would fail to be dispatched to a waiting listener. When I say “unpredictably”, I mean, about 1 out of 3 times, with no apparent rhyme or reason. It took a lot of troublesome debugging to reach the conclusion: “hey, there’s this object which I can see adding itself as a listener for event X, and then X gets dispatched and the object never gets notified.” It took a bit longer to reach the next conclusion: the object wasn’t getting notified because it didn’t even exist any more!

In both cases, the missing object was a weak event listener. [Continued...]

8 Comments

Software Modelling: Soft Focus or Hard Edges?

An ex-colleague recently posted a question about “model-driven architecture” (or MDA for short) at the company he works for. It was a set of issues that I’ve heard many times in different guises over the years, phrased in different ways. I’d paraphrase what he said something like this (the original was more coherent):

Some people here seem to think it’s better to have a process where you have to design everything in UML up front, so that you’re forced to model things before you can write a line of code. In fact, they want to universally generate a code “backbone” from the model, which means the UML has to be constrained and decorated with extra detail so that code generation can succeed. This runs counter to my experience that super detailed design throughout the project lifecycle doesn’t really help. Testing should drive development, not ever-more-detailed design. Agile development really seems better than model-driven architecture.

This made me think about a bunch of reactions that I’ve had — also recurring over the years — to this kind of question. After all, model-driven approaches and agile development are hardly new concepts, although the nomenclature of “MDA” and “agile” is more recent.

I replied something like this…

[Continued...]

4 Comments

Adobe Flex goes open source

I have a release to get out the door this week, it’s almost time to go to the office, and I haven’t had breakfast yet. What am I doing writing a post right now?

It must be because Adobe has announced they’re open sourcing Flex. I have to hand it to Adobe: this is a great move on their part, for a bunch of different reasons:

• There’s a large, able body of developers who are ready to put their energy behind making Flex a standout platform. The quality and the feature completeness can improve greatly if the project is managed well.
• These days, information about a platform that remains proprietary and under wraps is an adoption barrier, not a competitive advantage. Although the framework code was already available, we didn’t have public access to the dev tool sources, the bug database, the development roadmap, and many other staples of OS projects.
• Flex vs. the competing MS Silverlight/WPF is no longer a mere feature comparison game, it’s a philosophy comparison.
• In contrast to the more balkanized AJAX platform world, this creates a clearly dominant open-source platform in the rich-internet-client space.

Now the big questions are going to be the little questions. For instance, from the Flex Open Source FAQ:

Our goal is to make the initial open source distribution as close to the commercial distributions of the Flex SDK as possible. Due to restrictions on some components that have been licensed from third parties or come from other Adobe products, some portions of the current free Flex 2 SDK may be made available in binary form only.

Hmmm…. what will those pieces be?

Anyway, I’m pleased and pumped that my favorite client platform of the present day is heading in a really constructive direction.

4 Comments

An ActionScript interpreter, courtesy of JavaScript and Apollo

I’ve been experimenting quite a bit this week with Apollo, in preparation for a wee talk on the subject at Harvard. I’ve been building out that dependency analysis tool in Apollo and exploring the cool Javascript/Actionscript bridging capabilities in a series of examples.

Something amusing came up in the course of exploring script bridging: because JavaScript has the eval() function, and because AS3 objects are visible in an Apollo HTML DOM as fully fledged Javascript objects, one can easily use eval() in a Javascript context to evaluate live AS3 function calls, property assignments, and so on. Very, very nice!

For example,

<head>
<script>var obj;</script>
</head>

<body>
<input id="expr" type="text" size="80"/>
<a href="#" onClick="eval(document.getElementById('expr').value)">
  Evaluate
</a>
</body>

If you stuff this HTML into an HtmlControl, set that control’s window.obj to some AS3 object (say a Label for argument’s sake), then you can eval expressions like obj.setStyle(”fontFamily”, “Tahoma”) inside the HtmlControl and watch them take effect before your eyes. Should be a great debugging hack in Apollo.

3 Comments

The Secret Life of SWFs: Flex 2’s undocumented SwfxPrinter tool

It’s apparently a well-kept secret, but the Flex SDK includes a very useful tool for examining the structure and contents of SWF files. The Java class flash.swf.tools.SwfxPrinter, which lives in the Flex 2 SDK’s lib/swfkit.jar library, is an undocumented utility that dumps AS3 SWF files as XML documents. These dumps can provide really useful insight into what is taking up space in a compiled AS3 Flash or Flex application.

If you’re in the FLEX_HOME/lib directory you can run it as follows:


java -classpath asc.jar;swfkit.jar flash.swf.tools.SwfxPrinter [options] swfFilename


Here’s a somewhat random excerpt from some output; this includes some Flash sprite definitions:

  <DefineSprite id='28'>
    <!-- sprite framecount=1 -->
    <PlaceObject2 idref='27' depth='2' matrix='t0,0'/>
    <ShowFrame/>
  </DefineSprite>
  <ScalingGrid idref='28' grid='(80,80),(1200,360)'/>

The valuable -showoffset option causes the output to include the offset and size of each element in the file. For instance, the following DefineFont3 element shows the size of an embedded font from a Flex CSS stylesheet:

  <!-- offset=86441 size=35356 -->
  <DefineFont3 id='112' font='Myriad' numGlyphs='232' italic='false' bold='false' ansi='false' wideOffsets='false' wideCodes='true' shiftJIS='false' langCode='0' hasLayout='true' ascent='17019' descent='5120' leading='614' kerningCount='0' codepointCount='232' advanceCount='232' boundsCount='232'>

Sadly, in a regular application SWF, there is no information about how the code is broken up; all you get is a single element representing the entire code of the application in a single lump:

  <!-- offset=291066 size=1338571 -->
  <DoABC2 name='frame2'>
  </DoABC2>

Not to worry. Far more useful are the results of using SwfxPrinter on the SWF that’s inside a SWC (just use any ZIP decompression tool to unpack library.swf from a SWC file). Now you’ll see information like this:

  <!-- offset=2130104 size=4192 -->
  <DoABC2 name='mx/effects/CompositeEffect'>
  </DoABC2>
  <!-- offset=2134296 size=670 -->
  <DoABC2 name='mx/effects/Parallel'>
  </DoABC2>
  <!-- offset=2134966 size=4111 -->
  <DoABC2 name='com/allurent/containers/AnimatedViewStack'>
  </DoABC2>

Now that’s more like it!

So… I’m in the process of writing an Apollo-based tool that analyzes SwfxPrinter dumps, along with the linkage dependency information found in a SWCs, and allows developers to analyze both code size, linkage dependencies and associated source code/documentation in a single environment. Granted, it would probably make more ultimate sense to do this as an Eclipse plugin alongside Flex Builder, but which would you rather do to read in swfx dumps: deal with the Java XML APIs or hack some E4X? Also a lot of the analyzed information is easy to display in HTML, and Apollo has that nice built-in web browser.

Here’s a screen shot of some work in progress:

One can use a tool like this to find out exactly how much space each individual class or package in the application takes up, and use that to tune its space requirements, Module loading strategy, and so on — this takes a lot of work, of course, but it’s a lot easier with the right information at one’s fingertips.

I’m thinking about the dependency-analysis angle. My current thought is to support two complementary approaches: 1) discover what other classes a given class/package depends on (and thus drags into the SWF), and 2) discover which dependencies caused the inclusion of a given class/package in the SWF. The first approach is useful when one has a good heuristic notion about what should be separated out (like a complex but rarely displayed view). The second is useful when you can see a large bunch of code and you’d like to understand what other stuff is using it, so you can separate out that stuff and avoid dragging the expensive code into the SWF up front. Either way, you identify candidate classes for modification, removal, or placement in a loadable module, in the name of a smaller download size.

Note: A somewhat more convenient way to run SwfxPrinter is to just copy this swfxprinter.jar file into FLEX_HOME/lib; then you can run it in any directory as follows:


java -jar %FLEX_HOME%/lib/swfxprinter.jar [options] swfFilename


(I’m not redistributing any Adobe code here of course; the JAR file just contains a manifest with references to class and library names.)

14 Comments

asbeans: A Sample Hamachi Module for ActionScript Codegen

In conjunction with a talk I just gave at 360Flex on code generation, I’ve posted a proof-of-concept Hamachi module for generating ActionScript value objects and Cairngorm command/event classes. It’s called asbeans (downloadable from the link you just read). Here are the slides — at least, a backup draft of them, after PowerPoint turned the final version into a zero-length file.

(Hamachi is a really cool open-source project developed by my colleague Nate Abramson, one of the smartest people ever. It could be loosely described as a code generator generator.)

To install asbeans, unpack it in the samples/ directory of the hamachi-0.1 distribution (right next to the simplebeans/ directory).

Disclaimer: asbeans is just a very simple example of how to use Hamachi to generate AS code, but not really a full-blown system. It does generate code that compiles, but I don’t use Cairngorm much and I have not actually used the code it generates in an application.

At Allurent, we do use Hamachi to generate code that we rely on, though! Just not with this simple asbeans module. We have other, more complex modules that generate web service definitions, HTML documentation, and so on. Pretty cool.

3 Comments