Tom Lauck’s Deseloper.org

It’s A Walk Off! Flex MVC Frameworks Settle it on the Runway

author:

After years of using a homegrown approach to MVC for Flash and Flex, it was time to take look at the various frameworks for Flex.  I figured “I might be of service,” David Bowie style.

This will be a Straight Walk Off, Old School Rules

Zoolander parodies aside, there are half a dozen characteristics that could be expected of a good MVC framework.  The approach was to gather a pulse on what frameworks are being discussed, download and view the source, and work with some examples.  The following criteria will be used throughout:

  1. Simplicity
  2. Minimal Footprint
  3. Maturity
  4. Scalability
  5. Active Community
  6. Some brains behind the operation (its subjective, but ‘done the right way’)

Arp Framework

Arp is(was?) Aral Balkan’s attempt at MVC for Flex. Although originally created for ActionScript 2, at Flash Forward in Austin, this looked promising. Then again, Flex was just gaining traction, so everything was looking promising. Aral has done a great job with his projects, OSFlash.org, <head> Conference, Pistach.io, and his many contributions to the Flash and Adobe community. Unfortunately, however, it seems that Aral has since stopped actively developing Arp, thus eliminating Arp as an option.

Score
1. 2. 3. 4. 5. 6. Overall
B B D N/A F A C

Guasax

Ángel Blesa owns this project, and as one may easily surmise from his name the project is Spanish. Therefore, it is difficult to speak to the quality of the project. But, if you do speak Spanish, then this may be something to look into. However, for an English-only speaking developer, Guasax is a hard sell. Even the video tutorials are in spanish. Another quirk that factored into Guasax not making the cut was the run-time XML config files.

Score
1. 2. 3. 4. 5. 6. Overall
C C B C C N/A C

MVCS

At first glance, MVCS seems more like a blueprint than a framework. But, Joe Berkovitz is smart (#6 Some brains behind the operation). Joe has some interesting thoughts on Flex application architecture, and is well worth the read. It is difficult to find an active community and it is really more of an approach rather than a framework. Luckily, a framework is included in the example code. Overall, MVCS’ approach is an interesting one, however, not fully applicable if searching for an MVC framework.

Score
1. 2. 3. 4. 5. 6. Overall
A B C A C A N/A

Adobe Cairngorm

Cairngorm is one of the original Flex frameworks, and it certainly has a very large backing in enterprise environments, especially since it is sponsored by Adobe. It could be said that if you are developing Flex in the enterprise, you are/should be familiar with Cairngorm. Cairngorm also has a relatively small footprint. However, Cairngorm is not a silver bullet. Although Cairngorm serves its purpose, it is a little too complex in most scenarios. Thus, if the point of a framework is to become more efficient, the complexity of Cairngorm can do quite the opposite. This is especially true for those who aren’t familiar with frameworks.

Score
1. 2. 3. 4. 5. 6. Overall
C C A B A A B

PureMVC

Given the issues Cairngorm, would it not be nice if a framework took the good of Cairngorm and corrected the bad. A huge proponent of Cairngorm since it came out, Cliff Hall set out to do just that. PureMVC has gained a lot of steam since its creation, has a small footprint, is scalable, and simple. PureMVC has also been somewhat future-proofed. By keeping the concept simple and generic, PureMVC has been ported to almost every useful language. Furthermore, it is easy to find very informative documentation, overviews, and best practices. Although still relatively young and smaller community compared to Cairngorm, PureMVC seems to be evangelized among the developer community at the moment, and rightfully so.

Score
1. 2. 3. 4. 5. 6. Overall
A A B A B A A

Time Will Tell

After looking at several frameworks for Flex, PureMVC hits the criteria stated at the outset almost perfectly. As such, I am developing with PureMVC on a current project and have been very pleased thus far. Yet, time will tell if PureMVC sticks as the de facto standard Flex MVC framework.

To the readers, I would love to hear about your findings with Flex frameworks. Perhaps you have used a framework not listed here? Or do you have a different observation or opinion?

Nov 6 2008

Pre-Caching Flex Applications Using YUI

author:

I thought a little scenario might assist in prefacing this post.Bob has built a cool Flex application and it now time to show it off to the world. Bob is a web guy, so like most web guys, he uses YSlow to see the performance on his pages. Flex application and YSlow in hand, Bob uploads his files to his web-server. He then realizes that he forgot to ask himself one very important thing, “how big is this Flex application anyway?” To Bob’s dismay, the final size is almost 2 mb! Bob has some options:

  1. Not caring – he has some decency.
  2. Revisit code – he has a deadline to meet.
  3. Play around with RSLs – now he’s getting on the right track.
  4. Pre-caching the application – getting warmer.
  5. Pre-caching the application and the Flex framework – tada.

Now back to me…Bob’s best options here are 3, 4, 5. And more specifically 3 and 5. If you aren’t familiar with RSLs (Runtime Shared Libraries) in Flex, I highly recommend them. By implementing RSLs, it becomes possible to cut down the initial file size of the application, only loading libraries when needed.But one still has to load the swf libraries, even if RSLs are utilized. In many scenarios users visit a specific page or URI before accessing or launching a Flex application. For instance, a search page followed by Flex search results. To take advantage of this, why not take employ AJAX? After all, its primary purpose is the asynchronous transmission of data, so AJAX seems like the perfect tool for the job.I chose YUI for this example, but you could use jQuery or something of the like.

//Caching methods using YUI
var flashCache = {
	handleSuccess:function(o)
	{
		this.processResult(o);
	},
	handleFailure:function(o){ },
	processResult:function(o){ },
	startRequest:function(url) {
		YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
	}
};
var callback = {
	success:flashCache.handleSuccess,
	failure:flashCache.handleFailure,
	scope: flashCache
};

//Cache the swf and swz
window.onload = function()
{
	flashCache.startRequest("flexApplicaiton.swf");
	flashCache.startRequest("framework_3.0.189825.swf");
	flashCache.startRequest("framework_3.0.189825.swz");
};

By asynchronously loading the Flex application, Framework while the user is taking a preliminary action, you basically take the 2 mb Flex application (although hopefully it is less because you are using Runtime Shared Libraries) and turn it into 12-40k. Otherwise known as the size of the page which the swf file is embedded. (The photo below is not a real representation of the scenario, but illustrates the difference in cache.)

YUI Cache

It is understood that most users who visit your site have an empty cache. However, if you have instances where the user will spend some significant amount of time (enough to load the swf), you and Bob (from the outset) can rejoice in the now optimized speed and total score benchmark you will receive in YSlow…2 mb Flex application included.

Mar 19 2008

Modest Maps: Yahoo Style Flex Component Markers

author:

View example and download source.

History

Creating software with mapping should be a figurative walk in the park given the tools available from the major map api players like Google and Yahoo. However, when creating software on the Flash platform that needed mapping, my immediate choice was to go with Yahoo, since they have a history of being Flash friendly.

After investigating and implementing the examples Yahoo providing using the ASTRA Web Api, and in the end the solution as a whole seemed to work, albeit not as robust or simple as I would have liked. All was apparently well until production time. Once I deployed to the web, with a DOCTYPE of xhtml-transitional, the map ceased to dispatch the onMapLoad event.

As an alternate AS3/Flex solution I discovered Modest Maps. The hitch was that using Modest Maps would require building custom own components (such as Zoom, Map Types, Markers, Etc), for modest maps displays the map only.

Solution

I really take a liking Yahoo’s map markers. There was a hitch, Modest Maps was written in AS3 only. Therefore, when I went to integrate a Flex based marker into the map, the two were incompatable.

My solution:

  • Reworked the Modest Maps core to use FlexSprite and UIComponent (which inherits FlexSprite).
    • As a site note: I’m not sure that was completely necessary and would have rather not touched the core, but I was in get’er done mode.
  • Built a marker that looked an functioned like Yahoo’s, with the ability to add any flex component inside.
  • Created some events that bubble up when the user clicks inside the marker.
  • Created functionality to open a selected marker, based on its Id.

I see my work as a mere starting point. As Google states, “release early, release often.” So, please view the example, download the source and play. I would love to see where things go with it, if any.

Jan 1 2008

Test Drive with Adobe’s PHP RIA SDK

author:

A couple weeks ago, in response to a Flex tip I posted, Mike Potter from Adobe commented and left a link to his Google Group for the PHP RIA SDK. Having worked with Flex and AMFPHP, I found this SDK quite interesting. I noted that it had various basic/core examples that give a nice start when beginning your application. Included are examples using the Flex/AJAX Bridge, PHP/XML/Flex, AMFPHP, and (my new favorite) WebOrb.

It can be downloaded, here (2.5M zip).

Of course, you will probably end up making your *own* SDK, but I thought this was a good foundation, especially given the fact that it includes two different remoting options with sample services. From there, you can pretty much do anything. Additionally, now that Flex has been made available for Mac (Beta), workflows can become even quicker.

Nov 29 2006

Flex AMFPHP Variables

author:

Working with XML in AS2 is to say the least, one of the dumbest and most redundant things in the world to me. Because of this, I use Flash Remoting. It just makes more sense. So when I moved on to Flex, even though XML is native in AS3, I still went with remoting. Mike Potter from Adobe had a basic tutorial on getting started with Remoting in Flex…for it is a little differnent from Flash. And those differences can really throw you, and leave yourself cursing at your own stupidity.

Here was my issue: Everything was going fine with my development, and I was falling even more in love with Flex and then all of a sudden, variables were not getting passed when I started debugging. Huh? So to make a long story short, the syntax for passing variables in Flex is a little different from the the standard/basic AMFPHP structure:

Rather than something like this:

public function getAllPages(){
	gateway = new RemotingConnection("http://localhost/flashservices/gateway.php");
	gateway.call( "SitePages.getAllPages(php_variable)", new Responder(handleGetAllPages, onFault));
}

Notice the placement of the variable “php_variable” above.

You do something like this:

public function getAllPages(){
	gateway = new RemotingConnection("http://localhost/flashservices/gateway.php");
	gateway.call("SitePages.getAllPages", new Responder(handleGetAllPages, onFault), php_variable);
}

Oct 31 2006