I do a lot of work with GWT but don't have experience of Flex. I was talking to a guy today who was looking at moving some large Flex based applications to GWT due to the Flex application getting too big and using too much memory in the browser. This is a problem I have had before with GWT - browser apps using lots of memory as all the code gets loaded when it starts.
However, in GWT 2.0 there is now a code splitting feature to overcome the problem of the client code getting too big. This allows all the code (javascript) not to be loaded as one big file on start up but instead code split into different files that can be loaded when required.
I was thinking as to if there is anything similar in Flex. I assume the Flex application code all lives in one single SWF file which loads at start-up so this approach is not possible but thought there might be other solutions.
You might want to look into Modules. Otherwise the code is in one SWF. You can also move the Flex framework code out of yur SWF. And you can always dynamically load your resources such as images.
Related
Considering we have already done the following actions:
Flex Framework as RSL
Compiling with debug=false
Loading most images at runtime
Drawing other simple images with flash draw features
Reducing complex images with pngquant
Creating modules for secondary features
Applying ranges to fonts
Running FlexPMD to find dead code and bad copy-paste
Running FlashOptimizer and secureSWF (with poor results)
Today our application is 1358k:
Code: 978k - 72%
Images: 270k - 20%
Fonts: 110k - 8%
We believe we spent a lot of time into asset optimization and most of the work is remaining on the code.
By analyzing our link-report, our guess is that the heavy part of the code is comming from Flex .mxml nested components. We don't think there is much to do on our pure AS classes.
Is there any analysis or coding best practice in order to reduce the impact of the code on the swf filesize ?
Thanks.
Here is the application : http://www.pearltrees.com/nicolas/137698/
In my practice I usually don't have big final swf files, so I want to mention only one thing. Using mxmlc directly we should not forget to add (for the final build of course) parameter/attribute
debug = "false"
in other way final swf will be almost 2 times bigger.
do you have an objects in the .mxml that are similar to each other that you could turn into a generic class and customize programatically?
Consider looking into preloaders and modules.
Without knowing your application, it's hard to be specific, but a custom preloader can sometimes help a lot with perceived download time. Let's face it, asking the user to idly stare at a progress bar is sad, and you can do better.
The usual example here is that your need your application users to login, or select some basic details before jumping into the main application. By implementation that first form as a preloader, your application will keep downloading in the background while your user interacts with that form.
The downside: Your preloader code doesn't have access to all the Flex goodness. You'll have to draw your UI and implement your interaction in plain old AS3. Still, the extra work can be worth it in some situations.
Flex Modules are the other thing that'd be worth looking into. In a complex Flex app, not everything is commonly used. If you cut the lesser-used bits from the main application and move them into a module you load on-demand, you may be able to save a fair amount of bytes from the initial download size.
I'm creating a project in flex builder but it's not using the flex framework, it's just pure actionscript.
At the moment I have some bitmap resources embedded for drawing things, but I'd like a little animation and thought I could create swf animations for them in flash and use the [Embed()] thing to embed them in the actionscript project.
This works perfectly well for me, however I'm a little concerned about efficiency and how well this approach will scale when my project gets larger.
Does anyone know if there are any efficiency implications to embedding maybe 20 or 30 swf files, or do they get efficiently integrated into the main swf file? Most of the animations are really simple and I could probably redo them in actionscript if needed but it's a lot easier just to draw them in flash and embed them.
Not too sure exactly what you mean by efficiency, but embedding a large number of files is generally not considered best practice. You generally only want to embed things that need to show up immediately when the application loads, or that are so small it would be overkill to load them via URLLoader and the like.
Say you only view 5 of your animated swfs at startup, and the as the user clicks around and goes to different screens/views, they are revealed the rest. Then you could just load the swfs at runtime via URLLoader or the Flex Module architecture.
The benefit of having your swfs and assets not embeddded in your main swf is that:
it dramatically decreases swf size
it makes it easier to swap out graphics at runtime (or without needing to compile)
If I were you I would remove as many [Embed] tags as possible, and replace them with either loading via modules or urlloader.
Best,
Lance
Is there an alternative ActionScript 3 lightweight framework out there similar to Flex, but not as huge. Flex is fairly large, and SWF's being no less than 150Kb big, I'm just thinking it must be possible to get something that have smaller SWF files as an end result.
I've come accross AS Wing, and was curious if there's more.
Thanks for the replies in advance!
This may be what you're looking for :
http://code.google.com/p/flit/
I haven't tested it yet so I can't really say if it's worth it or not
You can change some settings when compiling to reduce the size of your .swf. Here is a blog posting showing how.: Reduce Flex 3 File Size. Basically you compile the sdk into a separate .swf that gets cached by the flash player.
http://www.openlaszlo.org/ is an open source alternative that can generate swf8, dhtml, or swf9.
The GraniteDS framework provides a clean-room re-implementation of the MXML->SWF compiler, and it may possibly give you options to generate smaller SWF files. It can also do that compilation on the fly, which is pretty cool.
Why don't just use Flash? You can dump your logic in AS class file.
Swf from Flash can be pretty small, can down to 8kb, or even smaller.
Correct me if I am wrong, I see Flex as a Flash with XML Layout Manager (which can position components well during resizing). If you are willing to spend time on designing a Layout Manager for Flash, i think Flash is a good choice. Flash supports AS3, pureMVC.
Of course, Flex is free :)
check out http://www.weaverfx.com/index.php?option=com_content&view=article&id=13&Itemid=6
they claim that applications built with there framework are of the tune of 20 to 100Kb
AS3Commons UI Invalidation & LifeCycle provides an entire component life cycle framework similiar to that of Flex but written in pure AS3 an hence small and independent. If you are about to create your own components you should give this library a try.
Edit: self-plug
Another component libary:
AS Data Provider Controls is a new set of standard UI components built with plain ActionScript. Open source.
Edit: self-plug
Thanks for all the helpful replies. I'm busy experimenting a bit with an ActionScript 3 project in Flex Builder, and I think I might just create the components I need myself and make them modular for re-use in other projects.
That way, I can include exactly and only that what my application is using, and not worry about an additional x00000Kb of data that gets dragged along either as an RSL, or merged in my code.
I can't get flash preloaders to work when there is a a # in the url of my page (even without any deep linking libraries or logic). I am using flex 3.3. Flash plugins 9 and 10, all browsers.
There is this bug regarding # in the url preventing preloaders from working:
http://bugs.adobe.com/jira/browse/SDK-14162
However, somehow, someone, somewhere has ways around this. Here are somewhat working examples (remember to clear your cache to ensure you see the preloader awesomeness):
http://www.adobecards.com/index.html#wtf
http://www.escriba.es/base_en.html#wtf
http://www.sonypictures.com/movies/onceuponatimeinmexico/site/mexico.html#wtf
http://instinct.ru/flash.html#wtf
http://www.alternativedesign.tv/plant5.html#wtf
However, these do not work (no preloader at all or momentarily stuck on 100%):
http://www.flashmagazine.com/articlefiles/preloader_finished.html#wtf
http://www.mariaclaudiacortes.com/colors/Colors.html#wtf
http://whoswestudios.com/flashsite.html#wtf
http://www.iotashan.com/examples/NotSoCustomPreloader/index.html#wtf
So, what is going on here? I suspect the flex framework.
Anyone know where to look in the flex code? Or is this bug deeper than anyone but adobe can fix?
Few things going on here.
(1) Looks like the quickest pre-loader from my #wtf examples is from Adobe. They load a very small container.swf, which then loads their 3mb main swf (amongst other biggies).
(2) Some of the others "preloaders" aren't really preloaders. Their opening animations play when the whole thing is loaded.
I believe the problem you are having is that you have your assets loading into the same frame as your preloader assets and code. Flash doesn't display a frame until it has been loaded to its entirety, cause your preloader not to be seen during load, and then covered up by the new asset after.
As a flex developer you do not have a timeline, so this is why it is important to use a small "container" as you call it or as loader movie. This movie is to have a tiny foot print so that it is available asap. Upon completion of load, the container can then call the main movie into itself, tracking the incoming data with the ProgressEvent.
It is hard to know exactly what the issue is from what you have said, but this is a common problem. Fonts, and any other embedded items either need to be embedded on frame 2 or laterm which I believe you can only do with the flash IDE, or you require the extra loader swf, lightweight and quick to load!
I have successfully deeplinked the following with preloaders
http://www.madagascargame.com
http://www.kungfupandagame.com
I have a Flex application that seems larger than it should be. There is a lot of code in it, but not a lot of assets and it just seems large, but I'm not sure how to go about figuring out where the space is going.
I know about the –link-report option, but it only gives the sizes of externally linked library classes. I'm very interested in seeing a report of the sizes of all the classes and resources in my application and it would be a huge bonus if I could also view their dependencies. Not knowing how the code is compiled I'm not sure if this is even possible, but it seems like it should since the compiler can give me the sizes of individual classes linked from other libraries.
I did some searching around, but couldn't find anything helpful. Everything points to the optimization techniques of modularizing and externally linking libraries, which I understand and will implement, but I would really love some more detailed reports of what my compiled application looks like.
To be clear, I'm not really interested in tips on how to reduce the file size, just a report on what is used for and which classes are referencing what.
Anybody have any ideas?
CORRECTION - The link report does show all classes. My particular project in Flex Builder had several CSS files set to compile to swfs. My link report for the main app was being overwritten by these css compiles!
The link report actually contains all compiled classes and not just the ones in external libraries (at least with the Flex 4 SDK). There is an xsl available that will generate an html file of the link report so it is easier to read.
Check this post: http://blog.iconara.net/2007/02/25/visualizing-mxmlcs-link-report/
There is a command-line utility called flash.swf.tools.SwfxPrinter in swfkit.jar, which comes with Flex Builder (or the plug-in or the SDK) and which you can use to analyze information about class sizes. Joe Berkovitz wrote some good instructions on how to make use of it in his blog, and he was working on an AIR-based GUI tool that leverages it, but I'm not sure if he ever published the tool. Still, you can use his instructions to leverage the utility directly from the JAR.
I found a handy little AIR app that really helps organize the link report info.
http://www.kahunaburger.com/2008/03/08/air-link-report-visualizer/
It's old but still works very well.