The Joy of Flex

As everyone in the universe already knows, last week Adobe released a new beta version of Player 9 code named “Moviestar” that supports additional video codecs. Once we started using the new player ourselves, we discovered that it also contains a change to the way that the XML class handles encoding of XML character entities. We store Buzzword documents as XML on the server, and we use the XML class extensively on the client. So in order to avoid the possibility that users running Moviestar would create incorrectly formed documents, we had to update our client to be aware of the new player behavior.

Here are some details about the change to XML processing in Moviestar, provided in the hopes that, if the change also affects your code, you’ll be able to react quickly too. I’m not promising that this information is absolutely correct and complete; it’s just my best understanding, and you should use it only as a starting point to aid your own testing.

In publicly available versions of the Flash Player previous to 9.0.60.184, when you added a text node to an object of type XML, the built-in character entity characters &, \, ‘, “, <, and > were not encoded as XML character entities, but simply inserted into the XML unencoded. Because of this behavior, long ago we had written wrote preprocessing code to do the character encoding ourselves. However, in 9.0.60.184 (“Moviestar”), the XML class now does the encoding for you, which brings it more in line with the E4X standard. Unfortunately, the effect of this change on Buzzword was that it would now double-encode the entities, which resulted in problems when saving Buzzword documents that contained any of these characters.

Our fix for Buzzword was to write some code to detect whether the XML class was doing the encoding, and only do the encoding ourselves when we found that the player wasn’t doing it. We deployed our fix yesterday.

By the way, you might be thinking to yourself, “Why all the fuss? It’s a beta release of the player, the download page says it’s being made available for the purpose of compatibility testing, and anyone who downloads it should be prepared to hit problems!” Unfortunately, when it comes to the Flash Player, that logic just doesn’t hold. Most users, even experienced ones, don’t think much about what version of the Flash Player they are running. If they are interested in trying out the new video experience in a beta version of the Flash Player, they’ll visit the download page at Adobe Labs, install the new player, try out some new videos, and then forget about the fact that they are running a beta player. They’ll go on about their Flash-playing business, everything will work fine for weeks or months, and then one day they’ll visit some site that uses the XML class, hit the incompatibility, and blame the site, not the player.

This is just how things are for a platform as ubiquitous and critical as the Flash Player. It has to work perfectly and transparently, and it has to be 100% backward compatible whenever possible. To Adobe’s credit, the Flash Player has a long history of excellent backward compatibility, so we were surprised by this change — it wasn’t mentioned in the release notes, even though some other non-video bugs were. We had to react quickly nonetheless.

Technorati Tags: ActionScript, Buzzword, Flash, Flex

For reasons previously explained, I am a very happy Mac user running Flex Builder under Windows XP in Parallels. I haven’t even bothered to upgrade to Parallels 3.0, since 2.5 is working fine for me, and I didn’t see any features in 3.0 that I hadta hadta have.

But I am starting to see reports that Fusion is faster overall, especially on a dual-core system. Do you run Flex Builder under virtualized Windows XP? Did you switch from Parallels to Fusion? How did it go? Was the switch easy? Did things get faster? Let’s get some anecdotal evidence in the comments!

Technorati Tags: Flex Builder, Parallels, Fusion

Yesterday my colleague Paul gave a lunchtime talk about Flex at a company we both used to work for, and I tagged along. We had a great time seeing old friends — you know who you are! — and talking about the merits and risks of using Flex to build rich internet applications.

Just a reminder — if you work for a Boston-area company that is embarking on a Flex project (or thinking about it), and you’d like me to come by and give a lunchtime talk on Building a Real-World Application in Flex 2, just drop me an email at david at virtub dot com. It’ll be educational for you, and fun for me (especially if there’s free pizza).

Technorati Tags: Flex, Boston

(Note: if you’re a blogger, I’d really appreciate if you’d post a link to this post and spread the word. Thanks in advance!)

Do you have a great Flex performance optimization story to tell? Here’s your chance to get your story and your Flex app up in front of a roomful of Adobe MAX attendees in Chicago in six weeks. I’m giving a talk on how to improve performance in Flex apps, and I’d like a good chunk of the talk to be real-world stories of how developers fixed performance issues. I’ll be talking about what we’ve done for Buzzword, and I’ll go into the new Flex 3 profiler a bit as well.

To be a little more specific, here’s what I’m looking for. Your story should be roughly of the form:

Chapter 1. Something about your app was too slow! Drat.

Chapter 2: You figured out what it the problem was, using your deep understanding of the Flex framework, your wizard ActionScript 3 skills, or maybe just changing or removing things at random until you found a pattern.

Chapter 3: You fixed it! Your app is now a speed demon! Cooooooool.

Epilogue: You now know how to keep future apps from being slow in this particular way, and wish to share this knowledge with a world of developers yearning to build faster apps.

If you’ve got a story at all like this please email me at david at virtub dot com, or just leave a comment below. If I can use your story, you’ll get a mention in the talk, your app will get either a screen shot in the slides, or a demo if it’s practical, and I’ll be making a limited number of T-shirts to give away as well.

One more thing… maybe you’re wondering if I could use brief, simple tips on performance as well as full blown stories. The answer is yes! If that’s what you’ve got to offer, feel free to post or send those in too.

Thanks!

Technorati Tags: Adobe, Performance, Adobe MAX

Note: this list is mainly for my own future reference. I assume anyone who has much speaking experience knows all this stuff.

Here are a few things I learned as a result of giving my Buzzword talk at 360|Flex.

Be animated. Stand and walk around as much as possible. Vary your voice to keep people engaged and remind them to listen. Catch your audience’s attention over and over again.

Be spontaneous. As the speaker, you have a unique vantage point from which to see what’s going on in the room and make it better. So pay attention to what’s going on in the room. Are people getting bored? Do something different. Is a conversation breaking out among audience members? Facilitate it, don’t shut it down (unless it’s off-topic or uncivil). Are there empty seats up front and people standing in the back? Invite them to come in and sit down. Be willing to put your material on pause for a few moments and go off on a tangent.

Don’t read your slides. A slide deck is a very useful tool. The slides remind you of the points you wanted to hit. They let your audience get behind and then catch up. They facilitate note-taking. And if they are available for download later, they relieve the audience of the need to take notes at all. But if all you do is read them aloud, you’re not adding value. Instead, glance at each slide as it comes up, read it to yourself quickly, and then look at your audience and talk. If you forget to say something on the slide, don’t worry about it — your audience saw it on the slide and if they want you to talk about it, they’ll ask. It’s more important to say what the slides don’t say.

Repeat yourself. Assume that most people in the audience are only listening about half the time, maybe less if they are all on their laptops. Repeat your important points a couple of times and then come back to them some more, later in the talk.

Use a remote control. I used a MacBook with PowerPoint for the slides and Sofa Control to enable the Apple Remote to drive the slides. It’s distracting to your audience to have to watch you run back to your laptop to advance each slide, and the alternative of sitting at your laptop and talking from there makes for a much less visually engaging talk.

Practice your demos. It’s hard to speak clearly in complete sentences while operating a computer. The more times you practice your demos, the more smoothly you’ll be able to talk, mouse, and type at the same time, and the less likely you’ll be to make a time-consuming and embarrassing mistake in front of a roomful of people.

Try to have more material than time. This is hard to do until you actually give the talk for the first time. I had no idea whether I had twice as much material as time or vice versa, and I would have thought either was equally likely. It’s especially hard if your talk has demos in it where you go off the slides for a while, because then it’s harder to use the number of slides to estimate. For my 80-minute talk, I prepared six in-depth topics for which we were going to demo the feature, discuss the design of the feature, and then look at code. We only had time to talk about four of those topics, and only went into the code for two of those.

Ask lots of questions. If you want people to ask you questions, you should ask them questions and set an interactive tone, especially toward the beginning of the talk. Questions of the form “raise your hand if you…” are easy. Asking technical puzzlers is good, but make them relatively easy; it’s fine if half the room shouts out the answer, but if they are too hard and no one knows the answer, it kind of falls flat.

Answer lots of questions. Unless you are truly a presentation Jedi master, your audience is at least as likely as you, or more likely, to know what they want to learn. So the more time you can spend answering their questions, the more likely they are to go away feeling like the talk was of value to them. I found it very helpful to insert slides throughout the talk that read “Questions?” in big bold letters. I think it encouraged people to think about what they wanted to learn.

Ask someone to write down the questions that are asked. That way, you can go back and review whether some of that material should be covered in future versions of the talk, and at the very least think about how to answer them the next time they come up.

Here are the questions that were asked at my talk:

1. What’s a “run” – Document Internals slide
2. How did you come to the concept of a run? (binary tree primitives)
3. How long has this project been in development?
4. Are you using a flyweight pattern for managing runs?
5. How big is the app?
6. What has been your experience with managing memory/profiling?
7. What are “hips”?
8. Printing?
9. What is that icon? (comment icon)
10. What information do you care about in the (test) snapshots? (document and layout)
11. How are you running your tests? How do you enforce them in the dev process?
12. Do tests need to be retrained when changes are made to the API?
13. Do the command script generators (test framework) need to be updated when the API is changed?
14. How is undo handled? (you mentioned coalescing)
15. Do you “undo” text selection? (yes)
16. Can you show us a command and how it emits its own test code?
17. How do you handle updating the cached swf files (modules)?
18. Do you test backwards compatibility when pushing new modules?
19. Does the browser accumulate past versions of the swf modules?
20. Can you talk about the project structure (in flex builder)?
21. How are you communicating with the backend?
22. How much chatter is going on behind the scenes while the user is working?
23. Can you discuss issues you had with fonts?
24. Localization?
25. Do you have a dedicated designer?
26. Where did you have to write your own ActionScript to improve performance? (effects, renderer caching)
27. How much logging of user activity do you do?

Technorati Tags: 360Flex, puppy

What was great:

• Tom and John. These guys are off the hook. They were at their desk every time I walked by, answering questions and helping people. Their positive attitudes were totally infectious. They amazed me repeatedly with their ambition and ability to get stuff done. One quick example: they videotaped all the talks, and plan to make the videos available for download, DRM-free, in a few weeks. And they already had half of them encoded by the last day of the conference! I don’t know if they have a long term plan for world domination, or are just doing things right by instinct, but they’re doing just what I’d do if I had a five or ten year strategy to totally own the “small high-value technical conference” brand.
• Power strips and WiFi in all the conference rooms. The WiFi was spotty but it worked well enough, and better than at other conferences I’ve been at.
• Small size of conference. This whole idea of 360 attendees is pretty great. The conference feels small enough so you can get to know a lot of people, find someone in particular you’re looking for, and hold the whole thing in one regular sized hotel without having to make people hike around a lot.
• Great opportunity for new speakers. This was my first time speaking at a conference about Flex, and my first time speaking about anything in quite a few years. It was a great warm up opportunity for more talks I’m giving at MAX in Chicago in six weeks.
• Food, bar, etc. It was great to be able to get a drink at the open bar after the conference and keep talking about stuff, and the lunch lines were always short and the food good.

Room for improvement:

• There was a good variety of talks: some focused on technical information or training while others showcased a particular product (and some, like mine, crossed back and forth). Some were fairly advanced while others were for beginners. I would have liked there to be more advanced topics. Also, the 101/201/301 labels were ok, but it was hard to know exactly what that meant. In my experience the 201-labeled sessions were still pretty basic. But I applaud the effort to use the labels and I expect this will get better over time.
• There were quite a few Adobe people at the conference, but I would have liked there to be more, and I would have liked them to give more talks. I guess this is another way of saying I wish there was a lot more under-the-hood technical material. And I’ll take some blame for this myself: I had intended to cover at least three times as much Buzzword code as I actually had time for, but I think I was going just about as fast as possible.
• I’m not sure how many conference speakers knew that they had 80-minute time slots. I didn’t know myself, and many speakers seemed surprised. Some talks seemed to kind of peter out around the 60-minute mark, which gave us longer breaks, but left me wondering if there could have been more material covered.

There was a lot more to the conference than I’ve mentioned above. I didn’t even talk about the charity code jam or the parties! Overall, I’d say that this conference was well worth attending, that it’ll get steadily better over time, and that I’m definitely going to have to figure out how to convince our CEO to let me go to Milan next year!

Technorati Tags: 360Flex

Wednesday 4 pm. History is they were founded in 2005, funded by Alsop Louie in 2006, and launching in October 2007. RibbitPhone is a fully functional Flex-based phone, make and receive calls, runs on top of Flash Player 9, for the user there is nothing to download and install other than the Flash Player. Most importantly it is a component that you can develop with and insert into your own applications.

Chuck demoed the RibbitPhone component running in a browser. It has visual voicemail and looks like the iPhone in other ways too. There were a few false starts but eventually it actually worked — he called someone in the audience, then someone else called him. Cooooool.

Why a component? enables phone calls, adds calling contacts and voicemail into any Flex app. You could put a phone widget into the sidebar of your blog. You could add it to an ecommerce site like 1-800-Flowers so you could call in to place the order from your browser.

API: makeCall(), answerCall(), getMessage(), playMessage(), lookupUser(), addContact(), findContact(), getAllFolders(). Events: callConnected, callHungup, incomingCall, foldersLoaded, messageLoaded, contactAdded, contactLoaded, userFound. Distributed as a SWC with all the libraries you need. Dropping the SWC into your Flex project will include all classes you need to work with.

Ribbit is SIP-compatible, SIP proxy is at sip://sip.ribbitphone.com, Ribbit handles signal and media conversion, and firewalls and NAT issues. See developer site at developer.ribbitphone.com.

The component will be available on Sept. 3. Submit your request for an appID starting today. There will be a limited pre-release of about two dozen developers. Want to make sure that those participating will get as much attention as possible from them. Public beta release will be October 3.

Demo of RibbitPhone component integrated into TileUI.

Technorati Tags: 360Flex

Wednesday 2:30 pm. Blog is dougmccune.com. I make components.

Where do you start? Look at the Flex Framework! Thousands of lines of code. This is the most important resource for how to do Flex development. Really good code, solid standards, best practices for doing event dispatching, customization for styling, etc. In general you should try to follow that, make the code look like theirs. 243K lines of code, UIComponent alone is 8614 lines of code.

Adobe engineers are good, but they are not God. They are all just programmers like you and me. You can write better code than them. There is nothing magical in the framework. If a control doesn’t work for your UI, don’t use it, change it. Don’t settle for something bad.

Extend UIComponent: updateDisplayList(), createChildren(), measure(), commitProperties().

You can also do Sprite or MovieClip, but those are very different, they don’t go through the whole component creation, measure, etc. lifecycle. If you are doing something in an ActionScript project instead of a Flex project, you have to do it that way.

Why isn’t commitProperties() in the list of methods to override? probably it should be. Some people will do an initial implementation without a commitProperties override and then go back and optimize the component by moving things into commitProperties.

Communicating with events: for input, your components has methods and properties. For output, your component dispatches events and your component has bindable properties.

Good idea to use -keep-generated flag in the compiler and look at what code is generated when you use curly braces to set up bindings. A lot of stuff gets done for you and it’s a good way to understand it.

For styles, you should not rely on them being set. Follow the practice in the framework source and create public static consts for the default values, and use the static consts if the getStyle() call doesn’t return a value. All the classes in the framework have default styles in defaults.css.

Use the [mixin] metatag to a class and implement a static init() method, and the init() method will get called by the SystemManager when the SWF loads.

90% of Doug’s component development is overriding the framework. Don’t reinvent the wheel, just make it rounder. Take advantage of those 243K lines of code in the framework.

When the framework won’t play nice (private variables or methods), copy and paste the framework source, change private to protected, override the new class. This makes it easier to diff and merge your changes with the changes that come in the next drop of the framework.

“Underriding”. Say I don’t want to make my own component, I just want to implement it at the UIComponent level and have it affect all subclasses. You can do this. You probably shouldn’t because it might cause terrible unexpected problems, but you can do cool things with it if you dare and are willing to accept the consequences. You can implement a class called mx.core.UIComponent and it will bring in that class before the framework. Called “monkey patching” in other languages.

Demoed adding drag resize handles to every UIComponent subclass using this technique. It really works! Yikes.

Technorati Tags: 360Flex

Wednesday 10 am. He is what is commonly known as a “devigner” but he hates the term. He prefers the term “designgineer.” He came to the Flash community about 9 years ago as a tweener. Slowly but surely gravitated to ActionScript, doing some Flex stuff, and so on. Want to concentrate on code and walk through how the hell he did all this stuff.

Sometimes he uses Flex Builder, sometimes he usex TextMate. It can take two or three miutes to build a big monolithic project in Flex Builder, so I package things to separate folders and have separate build systems to do that.

It’s a small core, and everything else is a plugin. The menus are a plugin, the view is a plugin. As dvelopers you can extend the product, create your own perspectives, and so on. I’m going to import the PaperVision3 library. It has parsed all the Papervision classes and created models for all of them.

He tried to keep Saffron to the UML spec as much as he could visually, but the UML spec was created by developers, not designers, so he tried to make it prettier. When trying to figure out how to organize the packages visually, he decided to tile them. Trying to figure out whether to do envelopes or not. Do people want them? He is working on a tree explorer to inspect all your packages. Maybe that is sufficient.

He is only doing an AIR version for now. Thinking about what a browser version might do but not right now. All 360Flex attendees are getting an alpha invite, but after Sept 1 there will be regular builds.

To improve performance he is only putting what’s visible on the display list, and removing objects when they go out of view.

Amazingly, a lot of the objects inside the main view are not Flex components but Flash components built in Flash Professional and brought into Flex. He hates to skin with typing, likes to draw. He is using Elemental, a Flash class library, for a lot of this. Elemental separates visual code from interaction code. You can draw anything you want, pass an instance of that class, Elemental will inspect the class, figure out where to hook into.

Saffron Application Manager. This is the main Saffron class. He’s not using Cairngorm, partly because he doesn’t like to type that much, but partly because he took what he liked from Cairngorm and threw away the rest. He’s using a Command pattern but that’s pretty much it.

As a habit, he always hangs onto objects, never just creates them and leaves them around to be GC’ed, always assigns them to class variables and nulls them out as soon as possible. Makes things more predictable.

Trying to access Flash objects from Flex is incredibly painful. Challenge is that Flash does not have native support for AIR. The Saffron window manager has a property called associatedClass that is a Flex class that gets bound to that CS3 class. This is something the Saffron API does for you. The net result is that it makes it easier to integrate Flash and Flex.

He is using a “signals and slots” pattern from QT, rather than the traditional event model that Flex provides. He is basically translating between the two models so that he can use signals and slots internally.

He’s talking about how he parses ActionScript 3. He had to dust off the dragon book for a quick compiler refresher course. He’s also working on parsing MXML, but not yet. He’s using the built-in regular expression support in AS3. It’s pretty fast for the most part, but look ahead negation is very very slow so he has to use a divide and conquer algorithm to work around that. He tests against the Flex Framework SDK since it has a lot of different coding styles and is a good stress test of memory consumption.

Technorati Tags: 360Flex

Wednesday 8:30 am. Giveaways! Tom and John are up on the stage giving away crap. Ther will be a SurveyMonkey survey about what worked and what didn’t at the conference, with an iPod giveaway. How do Tom and John do this? They do as much as possible themselves. They don’t know how “real” conference planners do this but they assume it’s a full time job for most. Tom and John do it in addition to their day jobs. They hire out pros to do stuff they can’t do, like eventbrite for their payment system for example. Looking for a marketing partner. Is it worth it? Immensely. It’s a lot of time and effort for them, especially if people learn a lot, make new friends, get a job or a client, and have fun!

Do they make money? Short answer is no. Long answer is that income was $46K from sponsors, $86K from attendees, total of $132K. Cost was $84K for food, $27K for A/V (including $2.4K for power) , $15.9K for promotional (including $8K for shirts), total of $126.9K. After everything, they probably lost a little money. Think of it as a start-up, that’s what it is. They want to stick with the 360 number for attendees, not make the conference bigger, because they like the small size.

Mixbook demo. It’s all about mixing together what’s on everyone’s digital cameras and making a printed “mixbook” or embedding on MySpace or a blog. What’s different about Mixbook is they used Flex and that they’re collaborative: you get all the photos from all the people at an event, a trip, a wedding, etc.. Pretty cool. The Flex interface is al drag and drop, zoom and rotate with the mouse. They have a lot of predefined layouts for a page of photos, you just drag photos onto a page, drag a layout onto the page. They are hiring, too.

I just gave a quick demo as part of this keynote. It was a little lame because I just focused on product features. I could have talked a little more about the company, where we’re going, what we’re going to do next, that sort of thing. But hey, the product is really the important thing.

Doug McCune is demoing TileUI. He saw the BumpTop video and realized that by combining PaperVision and ActionScript Physics Engine he could pull together something pretty close to BumpTop in Flex. He’s not sure what he’s going to do with it, not clear what the licensing issues are. But this is amazingly cool and we could use some of the physics stuff in the document organizer.

Sam Agesilas is demoing Saffon, a UML modeling tool. This is its first public showing. He is a designer and likes to work with pretty tools. Existing modeling tools are ugly. Will be available September 1, licensed with MIT license so anyone can do anything with it. Brings in a body of ActionScript code, models it in real time and animates the classes. It looks amazingly good: the design is clean and beautiful. He’s showing how you can type right into the model and rename a method and change its signature. It can parse the entire Flex framework codebase in about two minutes. He is obviously one of those very rare individuals who can both design and code really well.

 Ali Daniali has brought some of the code jam team up on the stage and is demoing the Northwest Harvest food drive web site that they have built over the course of the conference. Really incredible how many people were willing to give up so much time and take so much effort to work on this project instead of sleeping. Kudos to all you guys.

Technorati Tags: 360Flex