Upload
michal-wroblewski
View
10.613
Download
5
Embed Size (px)
DESCRIPTION
This is my presentation i did at try{harder} conference ( http://tryharder.org.uk/ ) about mobile flex apps and how to make them fast.
Citation preview
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?