Now that you've had a chance to get your feet wet with Adam and Scott's outstanding InsideRIA series on Learning Flex From Scratch (LFFS) it's time to start really thinking about optimizing your apps. Many new developer are just happy to build an application that works without thinking of the consequences of poor architecture, inefficient code, and over-zealous eye candy. Although you may be fine for a while, eventually a lack of concern for performance is going to stop you in your tracks. Thanks to Murphy's law, this inevitability will occur most often on very large or important projects, and oftentimes after they're two days away from launch.
ﾠ That being said, the idea behind this series is to arm you with the information you'll need to change the course of your development future and prevent any future crises moments from happening.
ﾠ The other idea behind this series is to post-process the resources that are out there, if necessary, revamp them to be current to today's Flex 3 platform, re-affirm them with additional examples and insights, or extend them in an OOP-like fashion to derive some more comprehensive materials.
ﾠ Right up front, I'm giving credit where credit's due. There are many wicked smart people in the community, and here are articles and presentations from some that I've found throughout my research:
* A pretty comprehensive article - albeit written in 2004 for Flex 1 - on Flex performance by Brandon Purcell and Deepa Subramaniam:
http://www.adobe.com/devnet/flex/articles/client_perf.html
* An RPC performance article by Michael Herron:
http://www.adobe.com/devnet/flex/articles/rpc_performance.html
* Slides from a MAX 2007 talk by David Coletta on Flex performance http://www.colettas.org/?p=187
* A MAX 2006 presentation by David George on creating responsive Flex 2 applications.
https://admin.adobe.acrobat.com/_a300965365/p71169528/
* Tips for tuning AS3 performance by Matt Chotin. This was an extension of a presentation created by Ted Patrick:
http://www.adobe.com/devnet/flex/articles/as3_tuning.html
http://www.onflex.org/ted/2006/09/max-actionscript-3-performance-tuning.php
ﾠ * An RIA Data Loading sampler by RIA Cowboy James Ward:
http://www.jamesward.org/census/
* A presentation on AS3 tuning and the AVM2 by Gary Grossman:
http://www.onflex.org/ACDS/AS3TuningInsideAVM2JIT.pdf
* Some sneaky little Flex tricks by the Farata Systems guys:
http://flexblog.faratasystems.com/?p=147
* Some RIA performance tips from Chris Korhonen:
http://sourcebottle.net/2007/8/26/performance-tips-for-ria/
ﾠ * Here are some pages on AS3 optimizations, although you're going to want to double-check them because in my tests some optimizations seem to still hold true while others don't:
http://rozengain.com/?postid=35
http://www.danielhai.com/blog/?p=55
http://blog.andre-michelle.com/2005/as3-optimations-suggestions
http://lab.polygonal.de/2007/05/10/bitwise-gems-fast-integer-math/
http://osflash.org/as3_speed_optimizations
ﾠHere is a glimpse into the future of this Flex RIA Performance Considerations series:
ﾠ
* Part 2: Application Startup
* Part 3: Writing Efficient Code
* Part 4: The Display Hierarchy
* Part 5: Dealing with Data
* Part 6: Flex Framework Containers
* Part 7: Flex Framework Controls
* Part 8: Custom Components
* Part 9: Effects, Animation, and Filters
* Part 10: Managing External Resources
* Part 11: OPP: Other People's Programming
* Part 12: In Closing
ﾠ
Now, before we get this series underway, if you're new to Flex or new to both Flex and development in general, I highly recommend you take a look at the Learning Flex From Scratch (LFFS) series in addition to this one. Also, I'll need to clue you in on some tools to use and some general performance tuning concepts.
Tools
ﾠ
One of the key concepts of performance tuning is to establish baseline performance statistics and run multiple tests to make sure you're making improvements. To be able to do this requires some tools to track execution time.
ﾠ If you have the money, I highly recommend you get a copy of Flex Builder 3 Professional. Reason being, the Profiler that comes with the Professional edition will provide you with the most robust information on code execution out of any tool that's out there.
If you don't have the money for Flex Builder 3 Professional, you can make use of getTimer() in combination with the global trace() function or a logging tool.
ﾠ The concept is, you log a call before and after the code you are optimizing. This package-level function flash.utils.getTimer returns the number of milliseconds since the Flash Player was initialized. Based on this, you can figure out the amount of time that code took to run by subtracting the results of the first call to getTimer() from the results of the second call. This concept is illustrated in the code example below:
// Elapsed time before running the iteration
var startTime:int = getTimer();ﾠ
// Factor instantiation out of the loop test
var myArray:Array = [1,2,3,4,5];
myArray[5000000] = "jun heider";
var tempString:String
for(var i:int=0;i<30000;i++) {
tempString = myArray[5000000];
}
// Elapsed time after the iteration
var endTime:int = getTimer();
// Lets figure out total time for this particular iteration
var totalTime:int = endTime - startTime;
To see the results of the code above you can use trace(). This global function works by sending output to the Flex Builder console and can also write to a log file. Take a look at the illustration to see both the necessary code and the output in the console window when the app is run in debug mode.
Now that I've mentioned debug mode, let me tell you what it is. When you're working in Flex Builder, there's two ways to run your application. The first is the standard run mode and the second is debug mode. When your Flex application is run in debug mode, among other things, trace() statements will be executed. Also, to run in debug mode requires a Debug version of the Flash Player.
ﾠ Although trace() is good, it only works in debug mode and there are several logging tools out there that can run both in debug and standard mode execution and make log analysis data used for performance tuning a little bit easier to work with.
* RIALogger is an AIR-based logging utility that was created by Renaun Erickson. It offers both filtering and searching your log messages. RIALogger will also allow you to save your log data to a text file. To learn how to use RIALogger, check out Renaun's blog: http://renaun.com/blog/flex-components/rialogger/ or if you would prefer, just take a look at this illustration.
ﾠ
* ThunderBolt AS3 is a logging tool that was built on top of the Firefox Firebug plugin. This logging tool was written by Jens Krause (aka sectore). To learn more about Firebug you can go to http://www.getfirebug.com/ and to learn how to make use of ThunderBolt AS3 you can go to http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3
Here's a screen capture of ThunderBolt AS3 in use.
ﾠ * REDbug is a tool built on AIR by myself, David Hassoun, John Crosby, and the rest of the RealEyes crew. Although we're running behind on getting out our AIR 1.0 release build, it should be available by the time you read this article. REDbug allows for logging, capabilities tracking, and memory monitoring. It allows you to save and load logged data and was built modularly with goals in mind to add additional functionality to it in the future. To find out more about REDbug go to http://www.redbugtool.com
Here's a screen shot:
ﾠﾠﾠ
ﾠ Hopefully you have some ideas now on the tools you have at your disposal. If you've got the cash I highly recommend Flex Builder 3 Professional edition, but if its not an option any of the above tools will do you well. Also, using FB3 in conjunction with these additional tools is usually how I roll since sometimes you or your testers don't have access to debug mode and a copy of FB3.
ﾠ
ﾠﾠ General Concepts
ﾠ
ﾠﾠ As stated before, this series is all about how you can use performance tuning, code optimization, and knowledge of your development platform to make your Flex applications run faster, more efficiently, and with higher end-user satisfaction. By the way, this blog entry is being written on Buzzword - a Flex-based word processor - and I know from David Coletta, that their development team took performance tuning and code optimization very seriously during development because this application performs very responsively and with much end-user satisfaction.
ﾠ
ﾠﾠ Although I don't really have the room here to write an in-depth overview on general performance tuning and code optimization theory, the work's already been done for me. Take a look at http://en.wikipedia.org/wiki/Performance_tuning. Some of the things that you're going to be hearing me talk about pretty immediately are:
ﾠ
ﾠﾠ
ﾠﾠ * Keep best practices in mind throughout development but don't over-optimize too early.
ﾠﾠ * Use a systematic approach when profiling application performance.
ﾠﾠ * Make incremental changes between tests. Don't change too much at once, otherwise you'll have a harder time figuring out what change increased the performance of your application.
ﾠﾠ * There are always trade-offs that need to be made when tweaking your apps to run how they need to run. For instance, you may get it to run faster but the trade-off would cause the application to consume more memory.
ﾠﾠ * There are two ways to think about performance. Actual performance: which means one block of code executes faster than another. Perceived performance: when code is written in a manner to make the user feel that code is executing faster.
ﾠﾠ
ﾠﾠﾠ
ﾠﾠ As we move through the series, it is my intention to continue to revisit these concepts in a JIT manner, so if you aren't quite up to speed yet or simply do not feel like checking out the Wikipedia entry, no need to fret.
ﾠﾠ ﾠ
ﾠﾠ Where We Go from Here
ﾠﾠ
ﾠﾠﾠ In the next installment of this series, we're going to dive into Flex application startup. During the installment we'll talk of both features and techniques that can be used to get the startup performance of your Flex applications to the levels they need to be. In addition to covering techniques and things that have been around since the days before Flex we're also going to cover some really cool new features that have become available with the launch of Flex 3.
ﾠﾠ
ﾠﾠﾠ In the meantime, if you have any ideas on what you'd like to see in this series, feel free to post a comment, I'm alway open to feedback and ideas.
ﾠﾠ]]>