Making mobile flex apps blazing fast

10,902 views
10,653 views

Published on

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

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,902
On SlideShare
0
From Embeds
0
Number of Embeds
1,531
Actions
Shares
0
Downloads
101
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Making mobile flex apps blazing fast

  1. 1. MAKING MOBILE FLEX APPSBLAZING FASTMichał Wróblewski
  2. 2. ABOUT @wrobel221 Live in Poznań, Poland We make games in BlackMoon Design I come from Świebodzin
  3. 3. QUICK OUTLINE Quick intro to Flex Mobile. A hard way from 5 FPS to 30+ FPS? Tricks’n’Tips The Robotlegs Way Q&A
  4. 4. SOMETHING ABOUT YOU How many of you got your hands dirty with mobile (especially Flex Mobile) development?
  5. 5. QUICK INTRO - VIEWNAVIGATORAPPLICATION  You can choose one of these: ViewNavigatorApplication TabbedViewNavigatorApplication SplitViewNavigatorApplication (coming with Flex 4.6)
  6. 6. QUICK INTRO - VIEWNAVIGATORAPPLICATION Contains an instance(s) of ViewNavigator(s). You setup some global properties of your app e.g, ActionBar content
  7. 7. QUICK INTRO - VIEWNAVIGATORAPPLICATION
  8. 8. QUICK INTRO - VIEWNAVIGATORAPPLICATION
  9. 9. 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
  10. 10. QUICK INTRO - VIEWNAVIGATOR Navigation methods:  replaceView,  pushView,  popView,  popToFirstView,  popAll
  11. 11. QUICK INTRO - VIEWNAVIGATOR Skin states:  portrait,  landscape,  portraitAndOverlay,  landscapeAndOverlay
  12. 12. 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.
  13. 13. QUICK INTRO – COMMONS Label Icon actionContent navigationContent
  14. 14. OPTIMIZATION
  15. 15. OPTIMIZATION - BITMAPS
  16. 16. OPTIMIZATION - BITMAPS BitmapImage:  Extends GraphicElement  Remote loading  Scaling  Caching
  17. 17. OPTIMIZATION - BITMAPS Image (spark)  Extends SkinnableComponent  Has BitmapImage  Supports progress  Broken image icon  Custom skinning
  18. 18. 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
  19. 19. OPTIMIZATION - TEXT RichEditableText RichText Label StyleableTextField (new in Flex 4.5) StageText (coming in Flex 4.6)
  20. 20. 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.
  21. 21. OPTIMIZATION – LISTS AND ITEMRENDERERS All mentioned before apply uber-optimized LabelItemRenderer and IconItemRenderer
  22. 22. 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)
  23. 23. 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.
  24. 24. TRICKS’N’TIPS Adding platform specific UI patterns  CSS media rules  Separate projects with common code base  Ready multiplatform mobile themes
  25. 25. TRICKS’N’TIPS Handlingmulti DPI devices with MultiDPIBitmapSource
  26. 26. TRICKS’N’TIPS Be sure not to put references to view instances anywhere.
  27. 27. TRICKS’N’TIPS Don’t interfere expensive process of parsing data into view when doing a transition. Use BusyIndicator before or after transition.
  28. 28. TRICKS’N’TIPS Don’t cheat by testing your app on a high-end smartphone
  29. 29. TRICKS’N’TIPS Please don’t use filters.
  30. 30. TRICKS’N’TIPS Have memory usage and limitations in mind
  31. 31. 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
  32. 32. TRICKS’N’TIPS At the end: [profile, test, optimize].loop()
  33. 33. THE ROBOTLEGS WAY
  34. 34. 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
  35. 35. THE ROBOTLEGS WAY Views are being destroyed when you push a new view. The same will happen with Mediators
  36. 36. THE ROBOTLEGS WAY You’ll need an instance of ViewNavigator in your navigator manager.
  37. 37. 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.
  38. 38. THE ROBOTLEGS WAY
  39. 39. A QUESTION TO YOU Howdo you approach multiscreen development?
  40. 40. THANKS! Any questions?

×