making mobile flex apps blazing fast

Download Making mobile flex apps blazing fast

Post on 22-Apr-2015

10.602 views

Category:

Technology

5 download

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.

TRANSCRIPT

  • 1. MAKING MOBILE FLEX APPSBLAZING FASTMicha Wrblewski
  • 2. ABOUT @wrobel221 Live in Pozna, Poland We make games in BlackMoon Design I come from wiebodzin
  • 3. QUICK OUTLINE Quick intro to Flex Mobile. A hard way from 5 FPS to 30+ FPS? TricksnTips The Robotlegs Way Q&A
  • 4. SOMETHING ABOUT YOU How many of you got your hands dirty with mobile (especially Flex Mobile) development?
  • 5. QUICK INTRO - VIEWNAVIGATORAPPLICATION You can choose one of these: ViewNavigatorApplication TabbedViewNavigatorApplication SplitViewNavigatorApplication (coming with Flex 4.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. QUICK INTRO - VIEWNAVIGATORAPPLICATION
  • 8. QUICK INTRO - VIEWNAVIGATORAPPLICATION
  • 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. QUICK INTRO - VIEWNAVIGATOR Navigation methods: replaceView, pushView, popView, popToFirstView, popAll
  • 11. QUICK INTRO - VIEWNAVIGATOR Skin states: portrait, landscape, portraitAndOverlay, landscapeAndOverlay
  • 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 tag.
  • 13. QUICK INTRO COMMONS Label Icon actionContent navigationContent
  • 14. OPTIMIZATION
  • 15. OPTIMIZATION - BITMAPS
  • 16. OPTIMIZATION - BITMAPS BitmapImage: Extends GraphicElement Remote loading Scaling Caching
  • 17. OPTIMIZATION - BITMAPS Image (spark) Extends SkinnableComponent Has BitmapImage Supports progress Broken image icon Custom skinning
  • 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. OPTIMIZATION - TEXT RichEditableText RichText Label StyleableTextField (new in Flex 4.5) StageText (coming in Flex 4.6)
  • 20. OPTIMIZATION - TEXT Only StyleableTextField extends flash.text.TextField Cant use StyleableTextField directly in MXML, so youre quite pushed to use it in AS3.
  • 21. OPTIMIZATION LISTS AND ITEMRENDERERS All mentioned before apply uber-optimized LabelItemRenderer and IconItemRenderer
  • 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. 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. TRICKSNTIPS Adding platform specific UI patterns CSS media rules Separate projects with common code base Ready multiplatform mobile themes
  • 25. TRICKSNTIPS Handlingmulti DPI devices with MultiDPIBitmapSource
  • 26. TRICKSNTIPS Be sure not to put references to view instances anywhere.
  • 27. TRICKSNTIPS Dont interfere expensive process of parsing data into view when doing a transition. Use BusyIndicator before or after transition.
  • 28. TRICKSNTIPS Dont cheat by testing your app on a high-end smartphone
  • 29. TRICKSNTIPS Please dont use filters.
  • 30. TRICKSNTIPS Have memory usage and limitations in mind
  • 31. TRICKSNTIPS On every level make your display list as flat as possible. Use Shauns script to show more info about the display list tree
  • 32. TRICKSNTIPS At the end: [profile, test, optimize].loop()
  • 33. THE ROBOTLEGS WAY
  • 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. THE ROBOTLEGS WAY Views are being destroyed when you push a new view. The same will happen with Mediators
  • 36. THE ROBOTLEGS WAY Youll need an instance of ViewNavigator in your navigator manager.