I’ve conducted a small study recently, trying to figure out if we could evolve in our Flash RIA development somehow. I’ve read and experimented a lot with Flex, MXML and related tools to see if we’re missing something (we’re not using it very much today).

It’s not that we’re unhappy with how things are done now, but with the new Flex 4 and everything associated to it, I’ve felt that there’s an opportunity to make some improvements to our workflow.

Summing it up

As presented below, there are a few conclusions to be drawn here, for example:

• Flex 4 seems to be a really nice upgrade and probably something you can’t ignore in the end.
• There’s little information on the web about development of large Flash/RIA applications (like those we do). Pretty much all focus is on Flex development of small-to-medium sized applications. I’m not to speculate on the reasons why no one is spreading the word, but hope that my work can shed some light on the area.
• There’s a lot of fuzz around the Adobe products in general and Flex in particular. Very few seem to have any criticism at all when it comes to Flex, which is a bit disturbing, as nothing that looks too good to be true ever is. But maybe I’ve just been looking at the wrong side of the web? Just a reflection…

Presentation of findings

I held an in-house presentation on my findings yesterday, and I thought I’d better share it with the world (= your favourite search engine). I’ve stripped it down a bit, as there were some company specific things in there, but most of it is free for everyone to read.

A few things to consider before jumping in, though:

• This is a PowerPoint (well, OpenOffice actually) slide with notes. There was lots said when presenting each slide, so I can’t guarantee that you’ll learn everything I said. I understand this is not perfect, but figured that it’s better to upload this than nothing.
• It’s just plain slides with notes, really. I did have some imagery in the original slides, but left it out as it’s probably only needed as “distraction” when viewed on a large screen with me talking next to it. So don’t get mad if it’s boring!
• The plan wasn’t actually to hold an in-house presentation, but I figured it was a good idea. So the format on which it is presented may or may not be optimal, as it’s pretty much been summarized as I’ve went along. It could be a good idea to shape it up and make it a bit better, but at the moment, it’s more important just getting it “out there”.

The presentation itself

With that having been said – and my back having been covered – here it is (also available as a PDF):

Download (PDF, 134.18KB)

EDIT: Also added the presentation to SlideShare.

I recently discovered that some of our stats in Google Analytics looked a bit suspicious. When looking into it, I remembered that there was a previous issue in the ga.js tracker, causing usage of user-defined variables, setVar(), to be tracked as pageviews. These pageviews corrupted stats like bounce rates and time on site.

Google fixed this issue in January, but the latest GA for Flash release is from December. So there’s a big chance that the bug still remains in the ActionScript version. I’ve posted a question in the GA for Flash discussion group, but as the group seems to be full of porn spam, I’m not very hopeful in getting an answer right now…

Also, some of our stats were missing data about screen resolution etc and I fear that the Flash tracker and setVar() is the root of that as well (since it’s working fine in products where setVar() isn’t used).

Anywho. I’ve not yet confirmed that this bug is still there, but an easy solution is to use Google Analytics for Flash in “Bridge mode“, instead of “AS3 mode”. This means that the ga.js file is used, which is a guarantee that the latest official Google updates are always used.

In my post a few days ago, I mentioned that that Scott Delap and his team were using the Swiz MVC framework. I decided to try it out, and I have to say it looks quite promising. The Swiz tagline is “Brutally simple micro-architecture for Rich Internet Application development with Adobe Flex”, and it was actually pretty easy to set up. The framework is similar to the way Java Spring works with autowiring, so if you’re familiar with that you’ll probably like Swiz.

I’ve only read the docs and tried the demo out so far, but it’s a very interesting candidate for future Flex projects. It’s quite easy to separate the views and controllers from the business logic and using both MXML and ActionScript views seems to work fine. Swiz really gets the job done.

Seems better than PureMVC

I’ve tested the PureMVC framework earlier and kind of liked it, but developing with PureMVC gets quite repetitive and you produce quite a lot of boilerplate code. I like it better when the MVC framework easily guides you towards a proper structure, without having to do too much work to get there.

Also, there seem to be pretty good community activity in the Swiz Google Code project.

It seems like the best MVC framework candidate so far!

I came across a really interesting presentation from Scott Delap on InfoQ:

Scott Delap shares his experience creating a lobby interface for an online game using Flex&Air. He details on related technologies used, available tooling and frameworks pros&cons, remoting options, unit, functional and load testing approach used.

To sum it up, it’s a good and elaborate presentation from a Java developer’s perspective, with reflections from a online multiplayer game development project. I enjoyed the full hour of watching it!

They’ve dealt with many of the questions we have and their conclusions are very interesting.

Presentation summary

I’ve summarized the most interesting contents of the presentation. They’re actually notes taken during the presentation, so please forgive any poor language or formatting:

• The Flex Builder WYSIWYG actually works, which isn’t common at all
• MVC in Flex is pretty much MVc, where the controller and view are sort of bundled together
• When choosing an MVC framework, Swiz turned out to be most interesting (among likes of Cairngorm, PureMVC etc). Swiz is similar to Spring with auto-wiring. Also supports Dependency Injection, Command Chains, and has MXML support even for non-views (i.e. for wiring the M:s, V:s and C:s).

Their MVC implementation:

• MXML for the views
• ActionScript for the controllers
• Remoting interfaces + specific back-end implementation
• Swiz wiring it all up
• They found no real reasons to use a “big MVC framework”, whereas Swiz did the job well enough

Remoting

Looked at several candidates, where WebORB, Hessian, XMPP, GraniteDS, Rest not weren’t considered enough for various reasons. Also evaluated BlazeDS, which doesn’t scale and has no NIO support.
Best candidate: LiveCycleDS - supports NIO, RTMP and lots of connections:

• Good for remoting Java <> Actionscript and easy to integrate
• Some Java <> ActionScript translations a bit problematic, i.e. enums and null values
• Some lack of documentation when it comes to messaging

Unit testing

• Evaluated ASUnit, FlexUnit, DpUnit/Fluint
• Chose Fluint, but could just as well have chosen FlexUnit. Unit testing Utilities, Controllers, Remoting Services with Mocks

Functional testing

• FlexMonkey not working properly with AIR and had a bit of lag
• Wrote a stripped-down version of Selenium

Load testing
Currently no good way of performing load testing.

• Hard to simulate 1000:s of users
• No really good tool for load testing at the moment

Final thoughts on Flex

• MXML works as advertised
• Easy to do complex things

I read today on InsideRIA that the first beta of Flash Catalyst is available for download on Adobe Labs!

I’ve been both sceptical and excited about Catalyst in previous posts, so it’ll be very interesting to try it out for real!
I’ll probably post my initial thoughts on it sometime soon.

EDIT: The Beta 1 of the new Flash Builder (aka Gumbo) is also out. Ryan Stewart posted another blog about the two releases.

I’m yet to fully understand the “awesomeness” of using MXML in your Flash/Flex applications. I’ve always written my code in AS (1,2,3) and set up the views by combining AS code with laying them out in the Flash authoring environment. And I have to say that’s worked out well!

But MXML is said to improve productivity as be “easier to write” and that is a matterI’ve been delving into quite a lot over the past months. (Unfortunately “easier to write” usually comes with a bunch of unneccesary, over-the-top functionality…).

What do others say?

Recently I’ve been trying to figure out how to use MXML together with AS code. I’ve scanned the web for articles, and have found a few interesting. This one, by Dan Orlando, seemed to be on the same track as myself. Also, I’ve previously come across this one, discussing a few pros and cons of MXML.

I don’t know the answer… yet.

I haven’t really come to any conclusion yet, but I’m hoping to do so shortly. I’m sure there’s benefits from using MXML – i.e. to lay out your views – but it’ll be interesting to see how to best combine it with “regular” AS code…

This was a post in the midst of something, but more is to come on the topic, for sure!

EDIT: I’ve posted a presentation about Flex (and MXML).

I came across this post on newbie Flex development for us experienced Flash developers. I think senocular is spot on here; many of the highlights are things I’ve come across myself when fooling around with Flex.

No reason not to keep trying, though!

Today, myself and a few co-workers spent our afternoon at the Adobe “Rich Internet Experience Tour” seminar here in Stockholm. The topics – focused on web development – were:

• Dive deep into Flash Player 10 and Pixel Bender, with Tom Krcha.

• New Flash Catalyst and Adobe Flex (Gumbo), with Enrique Duvos.

• Adobe Flex/LC DC Integration, with Tom Krcha.

• Case: Min Boling/My Home, with Peter Molgaard.

My main interest was the (more) in-depth demo of Flash Catalyst and Flex, which I’ve been investigating quite a lot lately (and also given some more or less harsh comments on).

Flash Catalyst strikes back!

After today, I’m more impressed with the capabilities of Flash Catalyst – at least if it’s used properly. It was nice to hear Enrique emphasize that it was intended for the View part of the application (in an MVC app). Previously, I’ve interpreted the fuzz about Flash Catalyst as a replacement for the entire MVC model (basically a replacement of regular coding), but that’s not (necessarily) the case.

If we were to use FC purely as a tool for the View Components in our applications, we could really improve our productivity massively. But to me, it stops there. I would keep away from using the different “states” in FC, i.e. to create the various views in the app. Single-view only, please!

But it’s all on a pretty much theoretical level, really, as FC is still on a very early stage in its development (seems like we’re at least a year away from first real release). But it looks interesting, to say the least!

My notes from the seminar

I put down some notes on my mobile phone during the seminar. Maybe some rambling, but hHere it goes:

• Good to use Flash Catalyst – only for isolated components? Avoid using “states” in FC?
• What are the capabilities of FXG? What’s the syntax like?
• Does FXG “skin classes” (and likes thereof) be in MXML? Can regular AS classes be used instead?
• Can FXG code be imported to Flash Catalyst?
• How can Flex and FXG be combined with regular AS classes?
• Try putting more use to SWC files?
• How are SWC files used with Flex? How are component files (binaries) managed in Flex in general?
• Would Gumbo (new Flex Builder) be interesting to use?
• Take a look at Blaze DS for data services. Using HTTP protocol. RTMF to be used when more instant feedback needed.
• Have a look at Adobe AFCS.

All in all…

• Flash Catalyst seemed a lot more interesting in a live demo and I look forward to seeing the public beta (without expecting too much…) .
• PixelBender was really cool (a lot more cooler than its docs )!
• The presented “case”, My Home,  was very cool, but perhaps a bit Big Brothery. Doesn’t feel too secure…
• A good seminar; better than expected!

Recently we’ve been having general discussions on the workflow in agile development projects. How can we make our development pipelines as effective as possible for our developers and designers? One product trying to address this is Adobe’s Flash Catalyst.

Flash Catalyst aims towards allowing for importing a ready-made Photoshop file with a site design to a workbench, where various functionality can be added easily: new pages, visual effects (transitions) etc. It all sounds really nice, as it makes it easy to convert a design into a real application with functionality.

It’s giving me the creeps

It’s pretty much at this moment I really start getting the creeps. To me, WYSIWYG (“What You See Is What You Get”) editors have never been anything but bad. They’re of course easy-to-use, but generally produce crappy code that infects your application like a virus. The code debt increases exponentially by the minute (OK, maybe I’m exaggerating again…)  and in the end, you’ll lose control of your application.

This might be OK in one-time-development applications such as ads, campaign sites etc, but in our world, we can’t really afford creating our applications from scratch all the time. It’s really important to create good, reusable code in order to stay on top. And from what I’ve seen this far, that is nothing that’s done by using tools like Flash Catalyst (or even Flex?).

It’s important to stay in control

We mostly build large applications with quite advanced features and we need to be able to maintain in control of the code, as the risk of producing nasty bugs increases with the size of your application. If you’re using a UI based tool like Flash Catalyst, it’s very likely that you will have a lot more trouble finding where the issue really is than if you’ve got yourself a well-written code base.

In my opinion – when working with applications like ours’ – the development velocity is not more important than having a well-developed application.

I’m not saying it’s worthless…

As with everything, I can’t really say that it’s crap before we’ve tried it out for real. I just don’t think we’ll be able to rely on it for our bigger games, given what I’ve read and the demos I’ve watched this far. But maybe we can use Flash Catalyst for marketing campaigns (i.e. ads) and smaller prototypes of our applications? That would probably be a more logical way to use it.

Please prove me wrong; it’d be awesome if designers could implement their changes while not ruining my code…

Some references

Chris Griffith’s thoughts on FC (and some comments on his thoughts)

FC Video Tutorial

Official FC site

Objective

Testing the PureMVC framework.

Evaluation

I decided to test using the PureMVC framework in a small application in order to find its pros and cons.

As I had tested setting up the framework once before (in another project), it wasn’t really a big deal installing it and creating my first classes. Also, after having spent a few hours reading the PureMVC documentation and best practices, I already had knowledge on how the system worked.

Result

After completing the application, I’ve found both pros and cons with the implementation of PureMVC.
(Please note that I haven’t taken other pros/cons to consideration here, such as how often the framework is updated, community size etc.)

Pros

• A clear structure for Models, Views and Controllers – the roles of each part is quite easy to understand and make use of.
• Good use of Controller part of MVC, which usually is difficult to put in the AS equation. In PureMVC, the Controller is a “Command” instructing the application on what to do next (i.e. to register Proxies/Mediators).
• Good and clear separation of “true” View and Model via Proxy and Mediator – makes it easier to let the View actually “be a View” and Model “be a Model”. The View component (i.e. an actual MovieClip) is manipulated through the Mediator and the Model (i.e. a data object, such as a Player) is manipulated through a Proxy. This ensures that no logic is misplaced in the View component.
• Nice being able to access Proxies, Mediators etc through the ApplicationFacade from wherever. Allows for Commands to be quite complicated if needed.

Cons

• All Mediators, Proxies and Commands are registered using a unique key. Hence, there are some difficulties keeping track of Mediators/Views (“M-V”) that are unique for the Proxy’s data object, i.e. the M-V of a certain “Player” with a certain “id”. Perhaps M-V:s should only be implemented for functionality that will only require a single instance of its type?
• Could be troublesome to keep track of the dependencies etc in the notification system, although the references can quite easily be searched using an IDE. This is probably an issue no matter which system being used.

Other observations (not necessarily to be considered as either pros or cons)’

• The PureMVC “pattern” needs to be implemented all the way, meaning that the view (component) cannot contain any functionality to affect the world outside of it. A mediator’s “view component” must be completely isolated.
• Setting up a new class requires some manual labor (as some classes needs to be extended/interfaces implemented), i.e. specifying which events to listen to and how it affects the class

What do I need to know to get started?

It takes a little effort to learn the system and understand what its parts do; i.e. what a Mediator is and how it correlates to the actual View. But once you understand the system, it’s really easy to create new classes for your application.

A few vital things that need to be understood before using PureMVC (I’ll try to sum it up, but the official docs are recommended):

• What are Notifications? All Mediators, Proxies and Commands listen to notifications specified by the user. If a certain Mediator should display a message at a certain time, it will listen for a notification of that type.
• What the Mediator is and why it’s being used: it’s basically a layer to the actual View (MovieClip), handling all functionality related to the other parts of the application (i.e. outside of the View)
• What the Proxy is and why it’s being used: works in the same way as a Mediator, but in a more simpler way. Manipulates the “true” model object, which could be a domain object such as a “Player” or “Table” in a card game application.
• Where is the Controller? The controller is implemented as a Command, meaning that it’s invoked when a certain notification is sent. Once invoked, it has no function until the notification is sent again.

Conclusion

In my point of view, PureMVC is a good framework to use for MVC applications. It can get a bit complex with boilerplate code, though.

References

• PureMVC homepage
• ASUnit creators hold seminar about their quest for the best AS MVC framework
• http://www.as3dp.com/2007/12/27/minimalist-mvc-example-using-the-puremvc-framework/
• http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm