Concurrent Programming with ActionScript workers

1. Concurrent programming with ActionScript workers Paul Robertson | Adobe Developer Relations | @probertson | http://probertson.com/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

8. “I want to run code in the “My UI keeps background” freezing!” Why concurrent programming? “Give me multithreaded ActionScript… ” “…or give me death!”© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8

9. Why concurrent programming? Flash Runtime’s execution model  Single threaded  All* code runs in a single line of execution  This includes your code (event handlers) and runtime’s rendering code© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9

10. Why concurrent programming? Flash Runtime’s execution model  Frame model  Code execution is scheduled into time units a.k.a. “frames”  Length based on frame rate  Tries to execute all code in one thread in a frame’s worth of time© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10

13. Why concurrent programming? For example… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13

14. Why concurrent programming? For example… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void Load complete event private function onDataLoad(event:Event):void© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14

15. Why concurrent programming? For example… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void Load complete event private function onDataLoad(event:Event):void Mouse event private function onClick(event:MouseEvent):void© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15

16. Why concurrent programming? For example… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void Load complete event private function onDataLoad(event:Event):void Mouse event private function onClick(event:MouseEvent):void ...© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16

17. Why concurrent programming? For example… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void Load complete event private function onDataLoad(event:Event):void Mouse event private function onClick(event:MouseEvent):void ... Rendering <native player code>© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17

20. Why concurrent programming? Now suppose… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void Load complete event private function onDataLoad(event:Event):void Mouse event private function onClick(event:MouseEvent):void ... Rendering <native player code>© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20

21. Why concurrent programming? Now suppose… Enter frame private function onEnterFrame(event:Event):void Mouse event private function onMouseOver(event:MouseEvent):void Load complete event private function onDataLoad(event:Event):void { var myXML:XML = _loader.data; for each (var dataPoint:XML in myXML.dataPoint) { // parse thousands of XML nodes and create objects } } Mouse event private function onClick(event:MouseEvent):void ... Rendering <native player code>© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21

33. What are Workers (redux)? A separate AVM instance ActionScript object  Represents a container in which a SWF file executes  Yes, that includes non-concurrent apps too© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33

38. What are Workers (redux)? WorkerDomain “Primordial” Worker public class App extends Sprite { WorkerDomain.current.createWorker(); }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38

39. What are Workers (redux)? WorkerDomain “Primordial” Worker public class App extends Sprite { WorkerDomain.current.createWorker(); } “background” Worker public class BGWorker extends Sprite { // ... }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39

40. What are Workers (redux)? WorkerDomain “Primordial” Worker public class App extends Sprite { WorkerDomain.current.createWorker(); } “background” Worker public class BGWorker extends Sprite { // ... }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40

45. How do I use a Worker? Step 2. Get the bytes of the SWF [Embed] [Embed(source="../swfs/BgWorker.swf", mimeType="application/octet-stream")] private static var BgWorker_ByteClass:Class; private function createWorker():void { var workerBytes:ByteArray = new BgWorker_ByteClass(); } Load var workerLoader:URLLoader = new URLLoader(); workerLoader.dataFormat = URLLoaderDataFormat.BINARY; workerLoader.addEventListener(Event.COMPLETE, loadComplete); workerLoader.load(new URLRequest("BgWorker.swf")); private function loadComplete(event:Event):void { var workerBytes:ByteArray = event.target.data as ByteArray; }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45

46. How do I use a Worker? Step 3. Create the Worker from the WorkerDomain [Embed(source="../swfs/BgWorker.swf", mimeType="application/octet-stream")] private static var BgWorker_ByteClass:Class; private var bgWorker:Worker; private function createWorker():void { var workerBytes:ByteArray = new BgWorker_ByteClass(); bgWorker = WorkerDomain.current.createWorker(workerBytes); }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46

47. How do I use a Worker? Step 4. Register for the workerState event and start the worker [Embed(source="../swfs/BgWorker.swf", mimeType="application/octet-stream")] private static var BgWorker_ByteClass:Class; private var bgWorker:Worker; private function createWorker():void { var workerBytes:ByteArray = new BgWorker_ByteClass(); bgWorker = WorkerDomain.current.createWorker(workerBytes); bgWorker.addEventListener(Event.WORKER_STATE, workerStateHandler); bgWorker.start() } private function workerStateHandler(event:Event):void { if (bgWorker.state == WorkerState.RUNNING) { // The worker is running -- send it a message or wait } }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47

50. Worker communication Two new communication mechanisms  Worker shared properties  MessageChannel “Classic” techniques  Local shared objects  Write to/read from files  Server communication  SQLite database© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50

51. Worker communication Worker shared properties  “dictionary” of properties stored in a worker  String keys and * values  Available for reading and writing from within and outside the worker© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51

52. Worker communication Worker shared properties  “dictionary” of properties stored in a worker  String keys and * values  Available for reading and writing from within and outside the worker Setting shared property (e.g. in parent worker): bgWorker.setSharedProperty("propertyName", someObject); Reading shared property (e.g. in background worker): var receivedProperty:Object; receivedProperty = Worker.current.getSharedProperty("propertyName");© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52

53. Worker communication Worker shared properties  Available even before worker.start() is called Parent worker: private function createWorker():void { var workerBytes:ByteArray = new BgWorker_ByteClass(); bgWorker = WorkerDomain.current.createWorker(workerBytes); bgWorker.setSharedProperty("propertyName", someObject); bgWorker.addEventListener(Event.WORKER_STATE, workerStateHandler); bgWorker.start() } Background worker: public class BGWorker extends Sprite { public function BGWorker() { var receivedProperty:Object; receivedProperty = Worker.current.getSharedProperty("propertyName"); } }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53

54. Worker communication MessageChannel  One-way data-passing channel  One worker is the “sender,” another is the “receiver”  When a message is sent, MessageChannel dispatches an event© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54

55. Worker communication Step 1. Sending worker creates the MessageChannel Code in the sending worker: var sendChannel:MessageChannel; sendChannel = Worker.current.createMessageChannel(receivingWorker);© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55

56. Worker communication Step 2. Sending worker passes the MessageChannel to the receiver Code in the sending worker: var sendChannel:MessageChannel; sendChannel = Worker.current.createMessageChannel(receivingWorker); receivingWorker.setSharedProperty("incomingChannel", sendChannel);© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56

57. Worker communication Step 3. Receiving worker gets the MessageChannel object Code in the receiving worker: var incomingChannel:MessageChannel; incomingChannel = Worker.current.getSharedProperty("incomingChannel");© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57

58. Worker communication Step 4. Receiving worker listens for the channelMessage event Code in the receiving worker: var incomingChannel:MessageChannel; incomingChannel = Worker.current.getSharedProperty("incomingChannel"); incomingChannel.addEventListener(Event.CHANNEL_MESSAGE, handleIncomingMessage);© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58

59. Worker communication Step 5. Sending worker calls the MessageChannel’s send() method Code in the sending worker: var sendChannel:MessageChannel; sendChannel = Worker.current.createMessageChannel(receivingWorker); receivingWorker.setSharedProperty("incomingChannel", sendChannel); // ... sendChannel.send("This is a message");© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59

60. Worker communication Step 6. Receiving worker handles the channelMessage event Code in the receiving worker: var incomingChannel:MessageChannel; incomingChannel = Worker.current.getSharedProperty("incomingChannel"); incomingChannel.addEventListener(Event.CHANNEL_MESSAGE, handleIncomingMessage); private function handleIncomingMessage(event:Event):void { var message:String = incomingChannel.receive() as String; }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60

63. Worker communication Object passing rules Objects passed to setSharedProperty() or MessageChannel.send() are… …Serialized in AMF format by sending worker© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63

64. Worker communication Object passing rules Objects passed to setSharedProperty() or MessageChannel.send() are… …Serialized in AMF format by sending worker …Deserialized by receiving worker© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64

67. Worker communication Object passing rules Side effects of using AMF:  Objects that can’t be serialized in AMF can’t be passed© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67

70. Caveats (part 2) Code execution order is no longer guaranteed (across workers) e.g. setting a breakpoint makes code nondeterministic© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70

71. Caveats (part 2) Performance impact “Adobe recommends that you do not use more than one or two background workers in a typical scenario.”© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 71

73. “Crystal Ball” Shareable ByteArray  Avoid AMF overhead  Especially useful when data is binary by nature (e.g. BitmapData)© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 73

76. “Crystal Ball” Language features Warning: totally made up pseudocode: public class MyClass { public function doSomething():void { // do some stuff in the main thread backgroundThread { // do something in the background // using variables/methods that are in scope } // do more in the main thread } }© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76