My Flex web application is almost ready for launch. I'm currently optimizing as much as I can in order to make sure even low-end clients are able to run it fluently. The problem is, I have no idea where to optimize more than I've already optimized.
My question is, what are the usuals suspects regarding bottlenecks? What tips and experiences do you have when it comes to Optimizing a Flex app?
There are some web tutorials on this, this presentation looks helpful. And of course, the Flex profiler could help you identifying the bottlenecks.
That's a good presentation covering a lot of pitfalls. Another thing I can think of is over-usage of bindings in large applications. They're easy to create and forget, silently generating a lot extra code running in the background, and are especially potent when used carelessly on entire classes.
These are some of the things I've seen that cause slow downs. I've only worked with one or two Flex developers, so I don't know if this is obvious, or helpful. Either way:
Transparency: Whenever views have a lot of components with non-opaque transparency (i.e. alpha less than 1.0), these views tend to be extremely slow, especially on older machines.
Object Creation: It seems that whenever there is a lot of object creation happening, the app slows to a crawl, even on newer machines. I worked on an app that created at least a few hundred objects when the application started.
Data Fetching: Whenever data is loaded asynchronously, the app will take a performance hit depending on how much is loaded
Lots of objects: When views have lots of objects in them, they tend to lag and generally drag ass.
Those are the ones I remember the best, having not worked on a major Flex app in over a year.
Other than performance improvements you can optimize the file size of flex applications.That will definately improve user experience.I hope this article helps:
http://askmeflash.com/article/9/optimize-flex-swf-filesize-performance-loading
Related
We're creating a Qt app which is basically a QtWebKit window for viewing a web application. The web application's frontend is written in ExtJS and it is running very slowly in some parts (e.g. some screens with multiple grids or complex layouts). My question is: is there a way of configuring the Qt app to make increase the performance of its JavaScript/rendering engine?
Thanks!
There is no way to tune webkit, so you can't tune it from Qt, either. But that doesn't mean you can't do anything. Here is a checklist of things you can try:
Make sure the performance is actually lost in the place where you think by measuring it with a profiler. I'm wrong 90% of the time when guessing what causes bad performance problems. Have a look at how many reputation I have and then think hard whether you are really sure you can do better :-)
If a profiler isn't an option, add timing information to the code.
Is it also slow in a normal web browser? If so, try to improve the JavaScript code. There are tools to run/profile that as well. Some are even built into your web browser.
Consider implementing part of the UI without ExtJS (and the overhead it brings along). Do you really need a full-fleshed out grid to display static data that can't be sorted? Maybe a plain HTML table will do.
Try a newer version of Qt. 5 just came out and it contains a more recent version of webkit.
I have used Flex for about a year before deciding that I would rather develop Actionscript projects.
At the time, it seemed that the framework was too heavy for the kind of work I was dealing with, mainly small web applications , personal sites, portfolios this sort of thing. I also thought that Flex was like a odd hybrid , something targeting seasoned developers but at the same time , adding some function wizards that seemed to target beginners. It seemed overly complexed in some areas and way too basic in others.
On the other hand, the IDE was great , definitely no comparison with Flash CS IDE , so for me it made sense to stick to AS3 projects and use Flex , now FlashBuilder to write my code.
( I need to point out that I'm not a Flash designer, so working with Flash CS was never an option. )
It's been a while since I had a look at the Flex framework and I'm wondering about other Flex/Flash developers position on this issue.
Would you only consider Flex for enterprise level projects? What are the advantages of using one over the other? If you were a Flash developer and moved to Flex, what were your motivations? If you're creating both Flex & Actionscript projects , what are your choice criteria?
Edit:
Although I have received a great answer, I would have been interested to hear from Flex's users, what's your main practical motivation ( as opposed to philosophical :) ) for using Flex over pure Actionscript projects?
Preamble: my experience is primarily with AS3 projects built using a combination of the Flash IDE (FIDE) and Flash Builder 4 (FB4).
I generally prefer pure AS3 (PAS3) projects over Flex projects for the following reasons:
Size - Flex projects have a much larger minimum size than PAS3 projects. Not suitable for lightweight applications.
Performance - Flash is not known for its performance, and the layout computations required by a complex Flex application will hammer the end-user's machine. To them, things just end-up feeling slow, non-responsive, or "gunky". Unfortunately, this means that the applications where Flex might be most attractive (i.e. a very complex, adaptable, UI) are the exact places where it stumbles. In the end, you end up writing all this bizarre performance-enhancing optimization code that takes away most of the time you gained from using the built-in layout system.
Metaphor and Appearance - Flex aims to allow developers to provide end-users with a mature, flexible UI that has the same widgets and widget behaviors that they are used to from native applications. However, due to the performance problems echoed above, the UI never feels quite as nice or responsive as a native app. In addition, it's missing all of the OS-specific peculiarities that end-users are used to and will expect. I don't really understand the motivation to try to emulate native app development or behavior - you're never going to win that fight. Best to make something that stands by itself, which is what most native web applications are doing.
Flexibility - Dovetailing into the previous argument, Flash's main advantage is its ability to do things that traditional UI widget libraries can't do (at least not very easily). You can make some really, really novel UIs in Flash that just aren't practical to do in native apps without mucking about in OpenGL. Using Flex makes creating novel UI hard again (but it does make creating standard UI much easier, even if it is, in my opinion, sub-standard UI).
I'm curious if anyone has some good examples of Flex being used in any popular, public websites. Grooveshark is the only one that I know about (which is quite nice, but suffers from many of the problems I've outlined, especially on OS X where Flash performance is still poor).
However - it's a tradeoff. Always remember that your time is valuable. Your users might accept a slightly clunky, slightly confusing interface if it lets them do really cool things and that would mean that you could release it now as opposed to later. This brings is to the major downsides of PAS3 development:
Effort vs. Reward - You have to program all of your own UI. All of it. This can lead to some really, really bloated code where you have to define tons of event listeners for every button you want to create. I don't know how many times I've written various kinds of layout code specific to what I was working on. You can try to write your own abstract classes for these (which I have done), but at some point you're just going to end up re-implementing the Flex framework. Hardly worth your time.
Development - You can either use just Flash Builder 4, in which case you have to construct every graphical asset by hand in code (which takes forever), or you use the FIDE, in which case you can make lovely artwork but you're stuck with a stone-age code IDE and it takes forrrrrreeeeeeevvvvver to compile anything. Currently I use a hybrid setup where art generated in the FIDE is automatically imported into my FB4 project, but even that is not a perfect solution. They really need to be integrated better.
Another set of things to keep in mind: things that Flash sucks at.
Flash sucks at text. Do not try to re-implement a web browser inside Flash. Flash is actually quite good at displayed relatively small amounts of text that is unselectable (and, through the use of embedded fonts, is always pixel-perfect), but don't try to create large, expansive text documents inside your Flash project. First, performance will be terrible, and second, users will expect the text to behave the same way all other large text fields do in their native applications (most specifically, their web browser). Selecting text in Flash doesn't feel right because it doesn't feel how your OS does it.
Flash doesn't play nice with mouse and keyboard input - it constantly fights with the enclosing browser for focus. If your system needs either of those things, users need to click on it first. Don't fall into a trap where people will get confused because their inputs are going to the wrong place.
Flash is a performance hog - we've all heard this one, and it's not nearly as much of a problem as people like to think, but it does mean that you'll have to put a lot of thought into the performance of your system. Your UI should run at a stable 60FPS when being used and should not use much if any CPU when the user is not interacting with it. If your FPS dips below 60, then your UI will feel slow and gunky compared to native or HTML5 UI. Also make sure to watch for memory leaks.
In the end: user your head. Both approaches are just tools in your arsenal.
I'm about to embark on my first attempt at Desktop Software Design and I wanted to know any similarities behind the core principles of Web design that i can take with me or differences or books or articles etc?
Any help greatly appreciated.
As mentioned many times here on SO, "Don't Make Me Think" by Steve Krug is an invaluable resource when it comes to usability and UI design.
I'm just going to throw one tip out there for you to keep in mind that I've found different: desktop apps should be responsive. Users on the web are somewhat acclimatized to wait for seconds for their action to take effect (well, not we SO readers, cause we're using the good stuff :-), but you know what I mean). On a desktop application, that wait can seem interminable, and especially unforgiving is if you lock up the main event loop while processing data for several seconds. Even repeated delays on the order of hundreds of milliseconds can make your app feel sluggish. Use threads to keep the UI snappy, and make sure scrolling and loading operations are crisp. Load lazily or incrementally if necessary.
I've been told that one of the most important things to keep in mind in web development is that you cannot rely on the user viewing your application in any particular browser. In particular, different browsers handle different window-sizes and screen resolutions differently.
For example, fixed-width versus variable-width pages are a constant concern in web development because of how different machines and browsers handle them.
Moving on to desktop software design (WinForms?), you will have much more fine-grain power to control the appearance and user-interface of your software.
But remember, young Peter Parker: With great power comes great responsibility!
I am working on a flex application.The application occupies 100% of the browser screen, but it is slow to load.How should i improve the performance, what are the best techniques one should follow for improving the performance of a flex App.
I did try some stuff though, i am not using relative layout instead i am using absolute layout and putting the buttons/images etc at exact places in a Canvas, still i feel it is slow.Can i profile the App or flex code to see where exactly the app is taking the maximum time to execute.
Adobe offers a great article about this topic: Flex Application Performance: Tips and Techniques for Improving Client Application Performance
Here are some great resources on improving performance of not only your Flex app, but of Actionscript in general:
Quick as a Flash Presentation by Grant Skinner - Optimizing Actionscript
Round up of Actionscript and Flex Optimizations
Flex Application Startup Performance
Actionscript Performance Tuning
Overall, some key things to always do:
Keep nesting thin: Don't nest too many VBoxes and Canvases, that will make your app dramatically lag/freeze
Don't Embed: Only embed things that are very small and need to show up immediately (icons in skins for example)
Deferred Instantiation: Only add what the user needs to see. Everything else will wait until the user goes there.
Explicitly size all item renderers. If DataGrid item renderers aren't explicitly sized, your app might freeze for an instance when constructing it.
Optimize Assets for the Web (icons ~< 20k, large images ~< 200k as a rule of thumb).
Refactor to remove excessing curly-bracket Binding (width="{something.other.width/4}"). Causes a bunch of events to be dispatched that you likely don't need. Too many events == too many temporary objects == lag.
People recommend using Modules to decrease swf size and only load what you need, but if your application isn't as large as a CMS, you generally don't need them.
Flex Builder Professional has a built-in profiler that works pretty well for profiling your own code. If the problem is drawing performance and layout, it's not as helpful (it profiles the code just fine, but it's harder to understand the results and apply them in a useful way to changes in your code).
I would like to make apps that can run in a flash enabled browser and decided flex would be best for me so I started to learn that. AFAIK flex has a GC but how that GC works compared to the ones in other languages I've seen may be a bit different. I have found this but apparently there is (or were) huge memory leaks that could not be prevented and a lot worse when run in IE.
Is flex safe to trust now. Have any leak that were there been fixed?
I work on a fairly large and complex Flex3 app, and we haven't had any terrible or uncontrollable memory leaks - even in IE.
This post by Grant Skinner on garbage collection in AS3 was very helpful to me. It was posted in 2006, but it's still entirely relevant (as we're still using AS3). It's part of a three-part series he did on resource management - there are links to the associated articles in his post.
http://www.gskinner.com/blog/archives/2006/06/as3_resource_ma.html
Something to understand/remember is that Flex apps run in the Flash Player - maybe you're clear on that, but I don't think it's entirely obvious if you aren't coming from a Flash development background. At least, I don't think it would have been for me. :)
There is an Adobe DevNet article that was published describing Flash Player Garbage Collection:
http://www.adobe.com/devnet/flashplayer/articles/garbage_collection.html
When you program in ActionScript your biggest concern related to memory is making sure that you do not keep references around to objects that are no longer needed. For example, when you add an event listener make sure that you also remove that event listener when it is no longer needed (or learn how to leverage weak references).
In my experience the Flex Framework is generally good at this type of memory bookkeeping. The memory footprint of your application will come down in part to how well you code with the garbage collector in mind.
If you do encounter issues with ever increasing memory, you can leverage the Profiler to take and compare memory snapshots in order to find leaking objects. You can find information about the Profiler here:
http://livedocs.adobe.com/flex/3/html/profiler_1.html
A couple resources you can have a look at are : Flex Bug Tracking which you could peruse for memory leak bugs that have been fixed/logged. Also in the Flex Builder IDE you can use the Profiler to monitor memory/CPU usage etc. I cant specifically answer your question. I think that part of the responsibility here is on you, the developer, and how you have designed and managed your code. Apart from that, I have noticed using the Flex 3 framework (or ASVM2 in general) that it has done a good job of managing the GC for me. Keep in mind as well that Flex 4 is around the corner.
In my experience, Flex 2 will leak significant memory over time, especially in Firefox 2. I'm not sure about Flex 3.
People at my job say there is a bug with ComboBox and autocomplete Event.