• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Making mobile flex apps blazing fast

Making mobile flex apps blazing fast



This is my presentation i did at try{harder} conference ( http://tryharder.org.uk/ ) about mobile flex apps and how to make them fast.

This is my presentation i did at try{harder} conference ( http://tryharder.org.uk/ ) about mobile flex apps and how to make them fast.



Total Views
Views on SlideShare
Embed Views



4 Embeds 1,526

http://blog.flexibleair.pl 874
http://www.scoop.it 650
http://webcache.googleusercontent.com 1
http://web.archive.org 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Making mobile flex apps blazing fast Making mobile flex apps blazing fast Presentation Transcript

    • ABOUT @wrobel221 Live in Poznań, Poland We make games in BlackMoon Design I come from Świebodzin
    • QUICK OUTLINE Quick intro to Flex Mobile. A hard way from 5 FPS to 30+ FPS? Tricks’n’Tips The Robotlegs Way Q&A
    • SOMETHING ABOUT YOU How many of you got your hands dirty with mobile (especially Flex Mobile) development?
    • QUICK INTRO - VIEWNAVIGATORAPPLICATION  You can choose one of these: ViewNavigatorApplication TabbedViewNavigatorApplication SplitViewNavigatorApplication (coming with Flex 4.6)
    • QUICK INTRO - VIEWNAVIGATORAPPLICATION Contains an instance(s) of ViewNavigator(s). You setup some global properties of your app e.g, ActionBar content
    • QUICK INTRO - VIEWNAVIGATOR Manages moving between views. Has a stack of view data objects By default only one view exists, others are destroyed after remove (only data persists) Setup of default transitions Access to current view
    • QUICK INTRO - VIEWNAVIGATOR Navigation methods:  replaceView,  pushView,  popView,  popToFirstView,  popAll
    • QUICK INTRO - VIEWNAVIGATOR Skin states:  portrait,  landscape,  portraitAndOverlay,  landscapeAndOverlay
    • QUICK INTRO - VIEW Visual container for a view of your mobile app. You should only add mobile-optimised Flex components here Accepts data passed in pushView Returns data by overriding createReturnObject() Has destructionPolicy (default – auto) to control whether the view should be destroyed on pop or just cached. Setup menu by placing ViewMenuItem in a <s:viewMenuItems> tag.
    • QUICK INTRO – COMMONS Label Icon actionContent navigationContent
    • OPTIMIZATION - BITMAPS BitmapImage:  Extends GraphicElement  Remote loading  Scaling  Caching
    • OPTIMIZATION - BITMAPS Image (spark)  Extends SkinnableComponent  Has BitmapImage  Supports progress  Broken image icon  Custom skinning
    • OPTIMIZATION - BITMAPS BitmapImage 3x faster than spark Image Try to avoid compressed image formats like JPG Do caching (on by default) and queuing (off by default) by using ContentCache. Assign it to contentLoader property of BitmapImage and Image
    • OPTIMIZATION - TEXT RichEditableText RichText Label StyleableTextField (new in Flex 4.5) StageText (coming in Flex 4.6)
    • OPTIMIZATION - TEXT Only StyleableTextField extends flash.text.TextField Can’t use StyleableTextField directly in MXML, so you’re quite pushed to use it in AS3.
    • OPTIMIZATION – LISTS AND ITEMRENDERERS All mentioned before apply uber-optimized LabelItemRenderer and IconItemRenderer
    • OPTIMIZATION – LISTS AND ITEMRENDERERS Mobile item renderers – if possible use bundler uber-optimized LabelItemRenderer and IconItemRenderer, they were shown in all Flex Mobile demos. Avoid complex binding expressions. Turn off autoDrawBackground if not needed. Use cacheAsBitmap, but be careful. Use opaqueBackground itemRendererFunction prevents pooling and recycling. Favor FXG over spark graphic elements (if possible)
    • OPTIMIZATION - SKINS Extend MobileSkin instead of SparkSkin AS3 version will perform better than MXML Use FXG for static vector graphics, use where possible Use GraphicElement as lightweight graphic primitives. E.g. Backgrounds, borders etc.
    • TRICKS’N’TIPS Adding platform specific UI patterns  CSS media rules  Separate projects with common code base  Ready multiplatform mobile themes
    • TRICKS’N’TIPS Handlingmulti DPI devices with MultiDPIBitmapSource
    • TRICKS’N’TIPS Be sure not to put references to view instances anywhere.
    • TRICKS’N’TIPS Don’t interfere expensive process of parsing data into view when doing a transition. Use BusyIndicator before or after transition.
    • TRICKS’N’TIPS Don’t cheat by testing your app on a high-end smartphone
    • TRICKS’N’TIPS Please don’t use filters.
    • TRICKS’N’TIPS Have memory usage and limitations in mind
    • TRICKS’N’TIPS On every level make your display list as flat as possible. Use Shaun’s script to show more info about the display list tree
    • TRICKS’N’TIPS At the end: [profile, test, optimize].loop()
    • THE ROBOTLEGS WAY “I and my team have been using Robotlegs to build several apps for many months, and Ive never had any issues caused by Robotlegs” Paul Robertson
    • THE ROBOTLEGS WAY Views are being destroyed when you push a new view. The same will happen with Mediators
    • THE ROBOTLEGS WAY You’ll need an instance of ViewNavigator in your navigator manager.
    • THE ROBOTLEGS WAY Don’t hesitate to use viewManager in your View. Dispatch a command only if you need some data from the rest of the application.
    • A QUESTION TO YOU Howdo you approach multiscreen development?
    • THANKS! Any questions?