Flex Performance on Mobile Devices

This past weekend I spent an hour optimizing the Flex 4 scrolling demo that I posted last week. The original demo was intended to show how to hook up touch events to the Flex 4 List / DataGroup controls. This new version adds some optimizations for the touch event handling and adds the kinetic flick behavior. Check it out and let me know what you think:

I’ve posted the code for this second version of the touch scrolling demo. It was pretty trivial to optimize it this far. With a little more work it’ll be as smooth as silk and as fast as Apolo Ohno. :)

Over the past few days I’ve received some questions about the performance of Flex apps on mobile devices. My Census RIA Benchmark has been a great way to compare the performance of various data loading techniques and technologies. Now that I have my Android based Nexus One mobile device with an early build of Flash Player 10.1 I wanted to see how fast I could load and render large amounts of data in a Flex application. I’m really impressed with the results! 20,000 rows of data loaded from the server and rendered on my phone in about 2 seconds! Those 20,000 rows can then be sorted on the device instantaneously. Pretty amazing performance for such a little device! Check out the video:

You can run the mobile version of the Flex AMF Census Test and check out the source code. Let me know what you think.

  • Pingback: Flex 4 List Scrolling on Android with Flash Player 10.1()

  • Real Nice! And Super Fast! – Suppose you could use Catalyst to make custom components that are more ‘finger friendly’? Look forward to demos of the AIR apps on android too – do you reckon this is something you will demo on the blog here? Thanks for keeping us up to speed.

  • James,

    The performance of the datagrid with 20.000 rows had the Wow Effect on me.

    Still cann’t believe it…. it’s WOW !! Fast !!

    thanxs for showing that to me ! (thanxs to ted who twittered it !)

  • Yeah, I’m super excited about Flash 10.1 being mobile….

    I can’t wait until all the current Android devices get the update as well!

  • tranquila

    but what is about using an itemrenderer inside the grid ?

  • @tranquila What do you mean?

  • Thank you for your fast optimization! You impressed me again!

    I will looking forward for your next demonstration.

  • James,

    What about next generation of flex output on mobile devices which is completely native application
    Is this possible to do it exactly like this with fully interaction with server-side back-end such as LCDS and BlazeDS via RPC,RTMP, etc?

    -Hr

  • Hey Hamidreza,

    LCDS and BlazeDS work great with Flex apps on mobile devices. The Mobile Census demo uses AMF Remoting. The Tour de Flex Dashboard demo uses LCDS / RTMP:
    http://www.jamesward.com/2010/02/17/flex-apps-on-mobile-devices/

    -James

  • Yes but I’m talking about native applications without flash player on mobile devices

    My Question is flash native applications On iPhone and generally on portable devices can do this exactly as well as flex/flash apps under flash player on mobile devices?

    Also what about iPad James? Has Adobe the plan for this device like iPhone on the future?
    You know one GHz is slow for flash player rendering system to run flex/flash apps on it. either iPhone!

    Best

  • Great demo, and performs really well!

    I’d be interested to see how a Flex 4 medium sized app runs (i.e. as soon as we have multiple containers inside each other, all calling validation on each other, does it grind to a halt?).

  • @Hamidreza Some mobile devices will support Adobe AIR for installed apps. For others like the iPhone we cross-compile to native apps.

  • @Tink Check out my first Nexus One video where I show the full Tour de Flex Dashboard.

  • Hey James, nice work. I have been doing some similar work, and the stopPropogation on the events was one of the things that gave my sliding list better performance. You can also get a little more performance out of this if you mark the functions as final, resulting in quicker lookups when running. I am still working on it but leveraging startTouchDrag and stopTouchDrag that are part of AIR 2, might also give you a speed increase during the swipe/flick/throw since that should be a native way to move the entire list while your finger is still down during the move event, since you could avoid some of the calculations and scrollTo tweening, and let the player core handle the updates/movement until release, and then apply the kinetic ease. Working on something similar.

    Regards,
    Rob

  • Kevin E

    It should be noted that Ward isn’t using DataGrid…its a DataGroup which is much lighter than a Grid. I’d be curious to know if the DataGrid would make the phone crawl.

  • @Kevin

    In the Census demo I’m using a DataGrid.

  • Russ

    James,
    All of your demos are super exciting, but you need to get a Droid and test on that, for performance comparison. The Nexus One is the fastest on the market, It would be interesting to see these examples on a slower phone.

  • Pingback: PhysicalFoursquare – A Flash Player 10.1 Demo App Using the Foursquare API | Ryan Stewart – Rich Internet Application Mountaineer()

  • Rex

    Hey James,
    Loaded your Mobile Census onto Nexus One – is the data service available to the yokel off the street?
    Thanks,

    Jon

    • Yeah. Should be. Are you having any problems?

      • Jon

        Yes, selecting 2000 records starts “Test running…” but it never returns or times out.

        • Is this the AIR app or the browser app?

          • Whoops. Just realized that my server was broken. Should work now.

          • Jon

            It’s unbelievably cool to see this actually working on a phone. Downloading, sorting, scrolling thousands of columns in fractions of seconds…. the future is here.


            Jon

  • ektorp

    hey ward,

    great work on the scrollable list in flex. what level of effort would it take to make this possible with just flash and a long movie clip that would need scrolling. the movie clip count be just text or images…basically any length of content that is longer than the stage height that would need touch scrolling for an Android AIR app. i’ve looked all over the web and can’t seem to find anything that could help me.

    • I know this has been done but I have no idea what level of effort it was. You probably want to ask this on the AIR for Android prerelease site.

  • Alex Silvi

    Very nice example, applied your method to s:List component and everything worked very well , my dataProvider length was 350 records so a good average (cant imagine having more than that to look after).
    I’ve installed my application on Nexus One and was as smooth as the iphone.

    Again thanks for this example !

    Alex

  • darab

    Do you happen to have a sample using the flex SDK 3.2?

    • No. Sorry. I tried this with Flex 3 but had some challenges because list scrolling in Flex 3 doesn’t support fractional / smooth scrolling.

  • This is a Flex 4 spark list with gesture support and a custom scroller class. Performs great on Android 2.2, nice smooth scrolling.

    http://www.dgrigg.com/post.cfm/09/29/2010/custom-flex-list-and-droplist-for-android

  • Gary

    The framerate isn’t that impressive as it scrolls, especially when you flick it. Maybe a slow framerate on YouTube?

    • Things have gotten much better now that Flex 4.5 (Hero) Lists support touch scrolling. I need to record a new video to show them off. Coming soon. :)

  • javier

    James,

    Great demo,
    You are using blazeds to generate AMF.
    What about zendamf. I’m testing zendamf and it performance is very bad (30 seconds to get about 6000 rows, 60 columns per row).

    • I haven’t tested this with Zend AMF. Is it taking 30 seconds just on the server side?

      • javier

        This is the result of my zendamf test. i am using xampp, php 5.3.1 mysql 5.1.41,zendamf 1.11 and fb4 with default php generated services.

        rows request time render time
        ——————————————————————————–
        100 1.387 secs 0.508 secs
        1000 5.857 0.511
        5000 33.857 0.499
        10000 93.001 0.518

        • That is pretty slow! You’ll probably need to instrument your php code to see where that time is being spent on the server side. If it’s mostly in the amf serializing then you’ll have to see how that can be fixed. Maybe a new version of zendamf?

  • Mandeep

    hi,

    I want to display the selectedItem from the List in Android application when I return back to that view using popView.

  • Hey James,

    I have a Google Nexus One developer handset, and running the Tour De Flex AIR app the performance is not even close to what you were demoing in that video a year ago! If I load the 20,000 rows of data, and try and sort it, it will hang the phone.

    Any idea, why the AIR app is so much slower now than in this demo?

    Cheers,
    mark