making mobile flex apps blazing fast

MAKING MOBILE FLEX APPS

BLAZING FAST Michał Wróblewski

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 - VIEWNAVIGATORAPPLICATION

QUICK INTRO - VIEWNAVIGATORAPPLICATION

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

OPTIMIZATION - BITMAPS

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

Handling multi 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

THE ROBOTLEGS WAY

“I and my team have been using Robotlegs to build

several apps for many months, and I've 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.

THE ROBOTLEGS WAY

A QUESTION TO YOU

How do you approach multiscreen

development?

THANKS!

Any questions?