Greenthreading in Flex
Presented by Huyen Tue Dao
About me
Fell in love with
programming in a C++ class
in high school.

Flex developer since 2006.

Second time presenting,...
Outline
The Problem

Some Solutions

Greenthreading

Comparison

Credit Where Credit Is Due

Conclusion

Questions

      ...
The Problem
Flash Player well suited to certain tasks: animation.

Seems to be able to do several things at once:
concurre...
The Problem
The problem revolves around Flash platform’s
event-driven, frame-base architecture.

Flash movies/SWFs: conten...
FLASH SWF
                        1        2    3    4      5         6

         TIMELINE


                             ...
The Problem
Flash platform is event-driven: most everything is
triggered by an event.

Events collected into the Event Que...
1   2      3       4   5     6

         TIMELINE

    EVENTS DISPATCHED IN FRAME 1




   EVENT QUEUE




               ...
The Problem
SWF plays at a certain number of frames per second
(FPS). The time per frame is 1/FPS.

Default FPS is 24. The...
The Problem
Another way to look at it, using Ted Patrick’s Elastic Mental Racetrack:




             IMAGE FROM SEAN CHRI...
Some Solutions
General idea: break up long-running code into
smaller batches/jobs.

Trigger batches at different times, di...
Some Solutions
Several ways to break up the process:

  callLater( ): function called using this will be queued and
  run ...
Some Solutions
AND NOW FOR A LITTLE CODE…
// To break up an algorithm via callLater()
// 1. Write a method that performs t...
Some Solutions
AND NOW FOR A LITTLE CODE…

//   To break up an algorithm via a ENTER_FRAME event.
//   1. Initialize progr...
Some Solutions
AND NOW FOR A LITTLE CODE…
//   To break up an algorithm via a Timer
//   1. Initialize progress variables....
Some Solutions
The good:

 Event Queue can process other events between
 batches.

 Application remains responsive.




  ...
Some Solutions
The not-so-good:

  Code becomes little more complex.

  Can take much longer to finish the job:

     Sprea...
Greenthreading
Multi-threading on FP:

   Developers can’t access threading FP uses:

      Networking

      Watchers on ...
Greenthreading
So what is a “green thread?”

   Want to give developer more control over when code gets executed.

   Can ...
Greenthreading
How does it work?

  Specify some amount of time to leave for other events:
  EPSILON

  Break long-running...
EXECUTED BEFORE         EPSILON
              GREENTHREAD STARTS
                                   2

          AFTER 1 I...
Greenthreading
Encapsulate all this as a class: GreenThread by
Charlie Hubbard.

http://code.google.com/p/greenthreads/

H...
Greenthreading
AND NOW FOR A LITTLE CODE…
public class MyGreenthreadAlgorithm extends GreenThread
{
  // Called when start...
ALGORITHM
                                                                                                  1 ITERATION


...
Timer             Timer
                    Original                                       GreenThread
                   ...
Greenthreading
The not-so-good:

 Still have overhead.

   More code complexity

   Runtime increase

 Still may need to m...
Greenthreading
The good:

 Application responsiveness

 Greenthread determines how much work to do
 itself given bounds.

...
Greenthreading
But what about multi-threading?

  Important to maintain EPSILON time to handle rest of the
  execution and...
Credit Where Credit Is
Due
Doug Knudsen: “AIR, CSVs, and Mean Greenies
oh my!” @ cubicleman.com

Charlie Hubbard, “Actions...
Conclusion
Applications that have long-running code can hang because Event
Queue stalls.

To keep application responsive:
...
Questions?


    THANKS FOR COMING!


                                 HUYEN TUE DAO
                              DAOTUEH...
Links
Greenthreading

   http://www.cubicleman.com/2009/03/08/air-csvs-and-mean-greenies-oh-my/

   http://wrongnotes.blog...
Upcoming SlideShare
Loading in …5
×

360|Flex Greenthreading In Flex

3,359 views
3,243 views

Published on

360|Flex 2010: Greenthreading in Flex
Presented by Huyen Tue Dao

Maintaining application responsiveness and integrity by emulating threading for data- and computation-heavy code.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,359
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
56
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide







  • Frame event: especially important because where drawing of the stage occurs.
  • Bring up simple parser application code and the parsing loop and reiterate that because application keeps processing loop, application becomes unresponsive, hangs, beach ball of death.
  • Bring up simple parser application code and the parsing loop and reiterate that because application keeps processing loop, application becomes unresponsive, hangs, beach ball of death.


  • Now go to application code and show parser example using callLater
  • Now go to application code and show parser example using a Timer event.

  • So what we have here is a trade-off between a quicker-running application that’s unresponsive and a responsive application that takes way too long to run.
  • So what we have here is a trade-off between a quicker-running application that’s unresponsive and a responsive application that takes way too long to run.



  • Frame event: especially important because where drawing of the stage occurs.

  • Now go to main demo application and show green






  • Links to these blog posts are included at the end of my slides.



  • 360|Flex Greenthreading In Flex

    1. 1. Greenthreading in Flex Presented by Huyen Tue Dao
    2. 2. About me Fell in love with programming in a C++ class in high school. Flex developer since 2006. Second time presenting, first time at 360|Flex. Weapons of choice in L4D2: grenade launcher/katana “…PATENTED APPROACH OF SHOOT FIRST, SHOOT LATER, I AM THE STIG…OKAY, NOT REALLY BUT I DID PASS MY SHOOT SOME MORE AND THEN WHEN EVERYBODY'S DEAD DRIVER’S TEST ON THE FIRST GO TRY TO ASK A QUESTION OR TWO.”
    3. 3. Outline The Problem Some Solutions Greenthreading Comparison Credit Where Credit Is Due Conclusion Questions GREENTHREADING IN FLEX
    4. 4. The Problem Flash Player well suited to certain tasks: animation. Seems to be able to do several things at once: concurrency. However, it can get hung up if one of these things requires lots of processing. Does not take complex code to hang it up either. Let me show you… GREENTHREADING IN FLEX
    5. 5. The Problem The problem revolves around Flash platform’s event-driven, frame-base architecture. Flash movies/SWFs: content divided into frames played according to a timeline. GREENTHREADING IN FLEX
    6. 6. FLASH SWF 1 2 3 4 5 6 TIMELINE FLEX SWF 1 2 FRAME 2 REPEATEDLY CALLED TIMELINE FRAME 1 FRAME 2 BOOTSTRAPPING/ APPLICATION CODE PRELOADER WHAT THE SWF KIND OF LOOKS LIKE ARTIST (NOT-SO-MUCH) RENDERING
    7. 7. The Problem Flash platform is event-driven: most everything is triggered by an event. Events collected into the Event Queue. FP handles one event at time. To get to the next frame? An event is triggered. GREENTHREADING IN FLEX
    8. 8. 1 2 3 4 5 6 TIMELINE EVENTS DISPATCHED IN FRAME 1 EVENT QUEUE KEYBOARD EVENT MOUSE EVENTS *FRAME EVENT THE EVENT QUEUE ARTIST (NOT-SO-MUCH) RENDERING
    9. 9. The Problem SWF plays at a certain number of frames per second (FPS). The time per frame is 1/FPS. Default FPS is 24. Therefore, a frame needs to execute every ~42 milliseconds. Application FPS is not a minimum, it’s a maximum. If code running in a frame takes longer than allotted time, FP cannot process next frame event “on time.” Hello, non-responsive window/beach ball of death. GREENTHREADING IN FLEX
    10. 10. The Problem Another way to look at it, using Ted Patrick’s Elastic Mental Racetrack: IMAGE FROM SEAN CHRISTMANN’S UPDATED ‘ELASTIC RACETRACK’ FOR FLASH 9 AND AVM2 The racetrack extends to accommodate whatever code it is asked to execute. No built-in way to defer execution till later. If FP starts executing long-running code, code execution half will just keep elongating. FP gets stuck running on the first half of the track. GREENTHREADING IN FLEX
    11. 11. Some Solutions General idea: break up long-running code into smaller batches/jobs. Trigger batches at different times, different frames. Gives FP a chance to catch up. Allow other events to be processed (including the important screen-updating events). GREENTHREADING IN FLEX
    12. 12. Some Solutions Several ways to break up the process: callLater( ): function called using this will be queued and run either at handler for RENDER event or at the next ENTER_FRAME event UIComponent method “Some features, like effects, can cause queued functions to be delayed until the feature completes…” ENTER_FRAME: run a batch explicitly at each frame Timers: run a batch every χ milliseconds GREENTHREADING IN FLEX
    13. 13. Some Solutions AND NOW FOR A LITTLE CODE… // To break up an algorithm via callLater() // 1. Write a method that performs the main work of algorithm and takes as // parameters the current iteration and the total iterations to execute. // 2. In method heck for stopping condition and if it has not been reached, // use callLater to schedule a new call to method. ... <!-- Some object that is being displayed --> <mx:UIComponent id=”obj”/> ... var numIterations : int = 0; var totalIterations : int = 100000; private function runLoop(... args) : void { // Do work of iteration here. numIterations++; if(numIterations < totalIterations) { obj.callLater( runLoop, /* args to pass to next method call */ ); } } GREENTHREADING IN FLEX
    14. 14. Some Solutions AND NOW FOR A LITTLE CODE… // To break up an algorithm via a ENTER_FRAME event. // 1. Initialize progress variables. // 2. Add a listener to the application for the ENTER_FRAME event the does // main work of the algorithm. // 3. In handler check for stopping condition and remove the listener if it // has been reached. var numIterations : int = 0; var totalIterations : int = 100000; Application.application.addEventListener(Event.ENTER_FRAME, runLoop); private function runLoop(event : Event) : void { // Do work of iteration here. numIterations++; if(numIterations >= totalIterations) { Application.application.removeEventListener(Event.ENTER_FRAME,runLoop); } } GREENTHREADING IN FLEX
    15. 15. Some Solutions AND NOW FOR A LITTLE CODE… // To break up an algorithm via a Timer // 1. Initialize progress variables. // 2. Initialize a Timer with a delay. Here delay ≈≈ time/frame. // 3. Add listener for TimerEvent.TIMER that does main work of algorithm. // 4. In handler check for stopping condition and call stop() on Timer if it // has been reached. var numIterations : int = 0; var totalIterations : int = 100000; var timer : Timer = new Timer(1000 / Application.application.stage.frameRate); timer.addEventListener(TimerEvent.TIMER, runLoop); timer.start(); private function runLoop(event : TimerEvent) : void { // Do work of iteration here. numIterations++; if(numIterations >= totalIterations) { timer.stop(); } // Else next iteration will execute next TimerEvent.TIMER event. } GREENTHREADING IN FLEX
    16. 16. Some Solutions The good: Event Queue can process other events between batches. Application remains responsive. GREENTHREADING IN FLEX
    17. 17. Some Solutions The not-so-good: Code becomes little more complex. Can take much longer to finish the job: Spread out over time. More overhead. Fine tune amount of work done and how often you do it. Can be time-consuming for developer. Might need to re-tune if code or data changes. GREENTHREADING IN FLEX
    18. 18. Greenthreading Multi-threading on FP: Developers can’t access threading FP uses: Networking Watchers on your code for timeouts True threading available via PixelBender: Designed for media processing and to take advantage of ability of shaders, filters, and blenders to run multi-threaded. Works great if you can find a way to convert your problem space to PIxelBender’s. GREENTHREADING IN FLEX
    19. 19. Greenthreading So what is a “green thread?” Want to give developer more control over when code gets executed. Can emulate threads in developer code, i.e., green threads. Similar to how other platforms provide threading even for single processor systems. General idea: Do as much work as possible in frame. Leave enough time for other events to process, for screen to update. GREENTHREADING IN FLEX
    20. 20. Greenthreading How does it work? Specify some amount of time to leave for other events: EPSILON Break long-running code into basic blocks that will run repeatedly. Each time greenthread finishes with a block, check how much total time used so far in frame. If the total time used >= TIME_PER_FRAME - EPSILON, stop running for now. GREENTHREADING IN FLEX
    21. 21. EXECUTED BEFORE EPSILON GREENTHREAD STARTS 2 AFTER 1 ITERATIONS 2 AFTER 2 ITERATIONS 2 AFTER X ITERATIONS EXECUTED AFTER GREENTHREAD PAUSES 2 WAITING FOR NEXT FRAME GREENTHREADING ARTIST (NOT-SO-MUCH) RENDERING
    22. 22. Greenthreading Encapsulate all this as a class: GreenThread by Charlie Hubbard. http://code.google.com/p/greenthreads/ Hubbard’s class also provides statistics, progress monitoring via events. To use: convert your code block/algorithm/job etc. to a GreenThread. GREENTHREADING IN FLEX
    23. 23. Greenthreading AND NOW FOR A LITTLE CODE… public class MyGreenthreadAlgorithm extends GreenThread { // Called when start() called on a GreenThread override public function initialize() : void { // Initialize variables needed. progress = 0; maximum = 100; } override public function run() : Boolean { // Do work of one iteration here. progress++; // Return true if done, false otherwise. } } GREENTHREADING IN FLEX
    24. 24. ALGORITHM 1 ITERATION DIVIDE + CONQUER ENTER_FRAME TIMER 1 2 1 2 LEFTOVER TIME INCREASE ITERATIONS RUN PER FRAME ENTER_FRAME TIMER GREENTHREADING EPSILON 1 2 1 2 1 2 KEY SPECIFY EPSILON: SET AMOUNT OF TIME LEFT IN FRAME FOR PROCESSING OTHER EVENTS. FILL UP REMAINING FRAME TIME WITH ITERATIONS GREENTHREADING VS OTHER SOLUTIONS ARTIST (NOT-SO-MUCH) RENDERING, NOT DRAWN TO SCALE
    25. 25. Timer Timer Original GreenThread (1 loop/frame) (20k loop/frame) Runtime 58 sec* ~11 hrs - 62 sec 85 sec Slow Down None* V. Large Small Moderate Responsive NOT NO YES YES ? REALLY *If the application doesn’t crash that is. DEMO COMPARISON RUNTIME AND RESPONSIVENESS
    26. 26. Greenthreading The not-so-good: Still have overhead. More code complexity Runtime increase Still may need to make adjustments to time left over to rest of events. GREENTHREADING IN FLEX
    27. 27. Greenthreading The good: Application responsiveness Greenthread determines how much work to do itself given bounds. Greenthread encapsulates management of time/ work. Makes some things neater. GREENTHREADING IN FLEX
    28. 28. Greenthreading But what about multi-threading? Important to maintain EPSILON time to handle rest of the execution and rendering of the frame. Queue up Greenthreads as they are instantiated. Time allocated to each Greenthread: (time for frame - EPSILON) / # active Greenthreads. When Greenthreads finish executing, they are removed from queue. Implemented in Hubbard’s library: just create as many GreenThreads as needed. GREENTHREADING IN FLEX
    29. 29. Credit Where Credit Is Due Doug Knudsen: “AIR, CSVs, and Mean Greenies oh my!” @ cubicleman.com Charlie Hubbard, “Actionscript and Concurrency” @ wrongnotes.blogspot.com Drew Cummins, “Green Threads” @ blog.generalrelativity.org Jesse Warden, “Parsing & Rendering Lots of Data in Flash Player” @ jessewarden.com GREENTHREADING IN FLEX
    30. 30. Conclusion Applications that have long-running code can hang because Event Queue stalls. To keep application responsive: Break work down into small jobs Trigger jobs at different time, give Event Queue a chance to process other events. Greenthreading: fit as much work into frame as possible, leave time for other events. Costs of greenthreading: more complex code, little longer runtime. GREENTHREADING IN FLEX
    31. 31. Questions? THANKS FOR COMING! HUYEN TUE DAO DAOTUEH@GMAIL.COM QUEENCODEMONKEY @ TWITTER WWW.QUEENCODEMONKEY.COM GREENTHREADING IN FLEX
    32. 32. Links Greenthreading http://www.cubicleman.com/2009/03/08/air-csvs-and-mean-greenies-oh-my/ http://wrongnotes.blogspot.com/2009/02/concurrency-and-actionscript-part- i-of.html http://blog.generalrelativity.org/actionscript-30/green-threads/ http://jessewarden.com/2009/02/parsing-rendering-lots-of-data-in-flash- player.html Frame execution model http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9- and-avm2/ http://www.onflex.org/ted/2005/07/flash-player-mental-model-elastic.php GREENTHREADING IN FLEX

    ×