Queue N Cache
          by Aaron Hardy at 360|Flex 2010
  view demos and code at AaronHardy.com
HELLO           my name is




  Aaron Hardy

Aaron Hardy   aaronhardy.com
Extending Flex


            Flex was written from day one to be an
            open, extensible framework…Don’t like the
...
Queue
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Case Study – Studio J




        Aaron Hardy   aaronhardy.com
Test App




       Aaron Hardy   aaronhardy.com
Generic Requests




                                      View Screencast




       Aaron Hardy   aaronhardy.com
The Lunch Line




       Aaron Hardy   aaronhardy.com
Delay the Catalyst
                                           URLRequest
Loader.load()
                                   ...
Categorize Requests




       Aaron Hardy   aaronhardy.com
Categorize Requests




       Aaron Hardy   aaronhardy.com
Categorize Requests




       Aaron Hardy   aaronhardy.com
Priority Shifting
                                        Lunch Lady #1
                                        Lunch Lady...
Priority Shifting
                                        Lunch Lady #1
           Kit Thumbnail Requests
                ...
Priority Shifting
                                        Lunch Lady #1
           Kit Thumbnail Requests
                ...
Requests with Priority Shifting




                                       View Screencast




        Aaron Hardy   aaron...
Queue Combinations
Separate queue for uploads?
Separate queue for AMF requests?




           Aaron Hardy   aaronhardy.com
Green Threading




               Emulating multiple threads using a single thread.




       Aaron Hardy   aaronhardy.c...
Green Threading




                                 Execute
                 Frame




                                  ...
Green Threading
                                      Execute
                       Frame
                               ...
Green Threading
                                      Execute
                       Frame
                               ...
Pros N Cons of Queuing
Pros
   • Prioritizability
   • Retryability

Cons
   • Overhead
   • Complexity
   • Possible unde...
Cache
Duplicate Images




       Aaron Hardy   aaronhardy.com
Duplicate Images




       Aaron Hardy   aaronhardy.com
Duplicate Images




       Aaron Hardy   aaronhardy.com
Duplicate Images




       Aaron Hardy   aaronhardy.com
Duplicate Images




       Aaron Hardy   aaronhardy.com
Generic Loading of Duplicate Images




       Aaron Hardy   aaronhardy.com
Compressed vs. Uncompressed
1 JPG at 1200x900 = 152 KB
21 JPG x 152 KB = 3.1 MB

1 BitmapData at 1200x900 = 1,080,000 pixe...
Generic Scrolling




                                       View Screencast




        Aaron Hardy   aaronhardy.com
The Summer of George




       Aaron Hardy   aaronhardy.com
Locality of Reference



                 Temporal Locality:
                 A phenomenon in computer science
           ...
Asset Sharing
                                                    adds request to queue


                                ...
Asset Sharing
                                                    adds request to queue


                                ...
Asset Invalidation

                                       Invalidation




                                              ...
Asset Invalidation




                                                   Cache




                      Image Renderer  ...
Reference Management



                                     1.jpg

                                     2.jpg

          ...
Reference Management




              1.jpg
                                         1
                                  ...
Reference Management




              1.jpg
                                         0                 c
              2....
Reference Management
              1.jpg

              2.jpg

              3.jpg

              4.jpg

              5.j...
Loading Duplicate Images with Cache




       Aaron Hardy   aaronhardy.com
Scrolling with Cache




                                       View Screencast




        Aaron Hardy   aaronhardy.com
Pros N Cons of Manual Caching
Pros
   • Sharing of bitmap data (less memory usage)
   • Faster bitmap re-access

Cons
   •...
cacheAsBitmap



    vector                              vector    vector




    display                             disp...
cacheAsBitmap


     vector




    bitmap                              bitmap    bitmap




    display                  ...
cacheAsBitmap
Good: object is being translated
Bad: object is rotated and/or scaled




            Aaron Hardy   aaronhar...
cacheAsBitmap




           6 vectors                   6 bitmaps
                                     6 bitmapdata




 ...
Manual cacheAsBitmap




                                               6 bitmaps
                                        ...
cacheAsBitmap Off




       Aaron Hardy   aaronhardy.com
cacheAsBitmap On




      Aaron Hardy   aaronhardy.com
cacheAsBitmap Manual




      Aaron Hardy   aaronhardy.com
Thanks
check out demos and code at AaronHardy.com
Upcoming SlideShare
Loading in...5
×

Queue N Cache

535

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
535
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Queue N Cache

  1. 1. Queue N Cache by Aaron Hardy at 360|Flex 2010 view demos and code at AaronHardy.com
  2. 2. HELLO my name is Aaron Hardy Aaron Hardy aaronhardy.com
  3. 3. Extending Flex Flex was written from day one to be an open, extensible framework…Don’t like the way Image behaves? Write your own Image tag! Get enough people doing that, and there’ll soon be a wealth of new and improved frameworks and components out there for everyone to choose from. - Ely Greenfield Aaron Hardy aaronhardy.com
  4. 4. Queue
  5. 5. Case Study – Studio J Aaron Hardy aaronhardy.com
  6. 6. Case Study – Studio J Aaron Hardy aaronhardy.com
  7. 7. Case Study – Studio J Aaron Hardy aaronhardy.com
  8. 8. Case Study – Studio J Aaron Hardy aaronhardy.com
  9. 9. Case Study – Studio J Aaron Hardy aaronhardy.com
  10. 10. Case Study – Studio J Aaron Hardy aaronhardy.com
  11. 11. Case Study – Studio J Aaron Hardy aaronhardy.com
  12. 12. Case Study – Studio J Aaron Hardy aaronhardy.com
  13. 13. Case Study – Studio J Aaron Hardy aaronhardy.com
  14. 14. Case Study – Studio J Aaron Hardy aaronhardy.com
  15. 15. Test App Aaron Hardy aaronhardy.com
  16. 16. Generic Requests View Screencast Aaron Hardy aaronhardy.com
  17. 17. The Lunch Line Aaron Hardy aaronhardy.com
  18. 18. Delay the Catalyst URLRequest Loader.load() Context URLLoader.load() URLRequest URLRequest FileReference.upload() DataFieldName TestUpload Command NetConnection.call() Responder Parameters Aaron Hardy aaronhardy.com
  19. 19. Categorize Requests Aaron Hardy aaronhardy.com
  20. 20. Categorize Requests Aaron Hardy aaronhardy.com
  21. 21. Categorize Requests Aaron Hardy aaronhardy.com
  22. 22. Priority Shifting Lunch Lady #1 Lunch Lady #2 Kit Thumbnail Requests Loader URLRequest Context Pattern Thumbnail Requests Aaron Hardy aaronhardy.com
  23. 23. Priority Shifting Lunch Lady #1 Kit Thumbnail Requests Lunch Lady #2 Pattern Thumbnail Requests Loader Kit Thumbnail Requests URLRequest Context Aaron Hardy aaronhardy.com
  24. 24. Priority Shifting Lunch Lady #1 Kit Thumbnail Requests Lunch Lady #2 Pattern Thumbnail Requests Awaiting Retry Kit Thumbnail Requests Aaron Hardy aaronhardy.com
  25. 25. Requests with Priority Shifting View Screencast Aaron Hardy aaronhardy.com
  26. 26. Queue Combinations Separate queue for uploads? Separate queue for AMF requests? Aaron Hardy aaronhardy.com
  27. 27. Green Threading Emulating multiple threads using a single thread. Aaron Hardy aaronhardy.com
  28. 28. Green Threading Execute Frame Render Aaron Hardy aaronhardy.com
  29. 29. Green Threading Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Aaron Hardy aaronhardy.com
  30. 30. Green Threading Execute Frame Render Execute Frame Render other code Execute Frame execution Render Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Execute Frame Render Aaron Hardy aaronhardy.com
  31. 31. Pros N Cons of Queuing Pros • Prioritizability • Retryability Cons • Overhead • Complexity • Possible underutilization of server resources Aaron Hardy aaronhardy.com
  32. 32. Cache
  33. 33. Duplicate Images Aaron Hardy aaronhardy.com
  34. 34. Duplicate Images Aaron Hardy aaronhardy.com
  35. 35. Duplicate Images Aaron Hardy aaronhardy.com
  36. 36. Duplicate Images Aaron Hardy aaronhardy.com
  37. 37. Duplicate Images Aaron Hardy aaronhardy.com
  38. 38. Generic Loading of Duplicate Images Aaron Hardy aaronhardy.com
  39. 39. Compressed vs. Uncompressed 1 JPG at 1200x900 = 152 KB 21 JPG x 152 KB = 3.1 MB 1 BitmapData at 1200x900 = 1,080,000 pixels * 4 bytes = 4.1 MB 21 BitmapData x 4.1 MB = 86.1 MB BitmapData 27 times larger than JPG (numbers are from test app and are only approximates) Aaron Hardy aaronhardy.com
  40. 40. Generic Scrolling View Screencast Aaron Hardy aaronhardy.com
  41. 41. The Summer of George Aaron Hardy aaronhardy.com
  42. 42. Locality of Reference Temporal Locality: A phenomenon in computer science that states that if a value is referenced, there is a high probability it will be referenced again soon. - Wikipedia Aaron Hardy aaronhardy.com
  43. 43. Asset Sharing adds request to queue Portable Asset initiates request, provides progress, stores bitmap data Cache Image Renderer Aaron Hardy aaronhardy.com
  44. 44. Asset Sharing adds request to queue Portable Asset initiates request, provides progress, stores bitmap data Cache Image Renderer Image Renderer Aaron Hardy aaronhardy.com
  45. 45. Asset Invalidation Invalidation Cache Image Renderer Image Renderer Aaron Hardy aaronhardy.com
  46. 46. Asset Invalidation Cache Image Renderer Image Renderer Aaron Hardy aaronhardy.com
  47. 47. Reference Management 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg 6.jpg 7.jpg Aaron Hardy aaronhardy.com
  48. 48. Reference Management 1.jpg 1 c 2.jpg 1 c 3.jpg 1 4.jpg 1 5.jpg Cache Queue 6.jpg 7.jpg Aaron Hardy aaronhardy.com
  49. 49. Reference Management 1.jpg 0 c 2.jpg 1 c 3.jpg 1 4.jpg 1 5.jpg 1 6.jpg Cache Queue 7.jpg Aaron Hardy aaronhardy.com
  50. 50. Reference Management 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg 6.jpg 1 c 7.jpg 2 c 2 1.jpg 2 2.jpg 1 3.jpg Cache Queue 4.jpg 5.jpg 6.jpg 7.jpg Aaron Hardy aaronhardy.com
  51. 51. Loading Duplicate Images with Cache Aaron Hardy aaronhardy.com
  52. 52. Scrolling with Cache View Screencast Aaron Hardy aaronhardy.com
  53. 53. Pros N Cons of Manual Caching Pros • Sharing of bitmap data (less memory usage) • Faster bitmap re-access Cons • Overhead • Complexity • Possible use of more memory than necessary Aaron Hardy aaronhardy.com
  54. 54. cacheAsBitmap vector vector vector display display display TIME Aaron Hardy aaronhardy.com
  55. 55. cacheAsBitmap vector bitmap bitmap bitmap display display display TIME Aaron Hardy aaronhardy.com
  56. 56. cacheAsBitmap Good: object is being translated Bad: object is rotated and/or scaled Aaron Hardy aaronhardy.com
  57. 57. cacheAsBitmap 6 vectors 6 bitmaps 6 bitmapdata Aaron Hardy aaronhardy.com
  58. 58. Manual cacheAsBitmap 6 bitmaps 1 bitmapdata vector bitmapdata Aaron Hardy aaronhardy.com
  59. 59. cacheAsBitmap Off Aaron Hardy aaronhardy.com
  60. 60. cacheAsBitmap On Aaron Hardy aaronhardy.com
  61. 61. cacheAsBitmap Manual Aaron Hardy aaronhardy.com
  62. 62. Thanks check out demos and code at AaronHardy.com

×