Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making mobile flex apps blazing fast

11,428 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.

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?

×