1. Fun in the Web: Web based programming environments Danny Yoo WPI

2. Functional event-driven programming on the Web!

3. (define (h a b) (sqrt (+ (sqr a) (sqr b)))) Functional... This matters for education: algebra and functional programming have a relationship that can reinforce each other.

4. … event driven...  Works well for writing games (driven by events like user interaction, clock ticks, etc...)  Behaves appropriately for multiple platforms, including both the desktop browser and the cell phone

5. … on the Web The Web is ubiquitous on both desktops and smartphones.

6. How do we make this program?

7. The World Programming Model Clock tick Key Press

8. A Simple World Program (define (descend height) (+ height 5)) (define (hits-floor? height) (> height 300)) (define UFO (image-url “http://world.cs.brown.edu/1/clipart/ufo.png”)) (define (draw height) (place-image UFO 150 height (empty-scene 300 300))) ;; The use of big-bang starts the world program. (big-bang 0 ;; initially, let the height be zero. (on-tick descend 1/15) ;; tick every 15 frames a second (to-draw draw) ;; use render to draw the scene (stop-when hits-floor?))

10. User OS Callback “World”

11. Current value of World New value of World Might be enriched with additional event information Will invoke event-specific functions

12. World Programs on the Phone on-tilt: world azimuth pitch roll → world on-acceleration: world x y z → world Programs that run on the phone can take in a variety of events. on-location-change: world latitude longitude → world How can other features (SMS, playing sounds) be adapted to this framework?

13. Current value of World New value of World World Callback Effect Callback Functional Effect Play sound, Send SMS, Turn off sleep-on-idle, Send network packet, etc. on-tick!: world → effect on-tick: world → world

14. Challenges to World Programming on the Web JavaScript is the language of the web. There are problems inherent to JavaScript: Bad error messages. Lack of tail calls... (… although this is not so important for beginner World programs, it can affect others.) But there are more serious issues...

15. Challenge: Image Initialization (define an-image (image-url “http://...”)) (define another-image (image-url “http://...”)) (overlap an-image another-image) var anImage = new Image(); anImg.src = “http://...”; var anotherImage = new Image(); anotherImage.src = “http://...”; overlap(anImage, anotherImage); += “block until loaded”

16. Functional programs on top of JavaScript need to be able to block.

17. This should be handled by the language, not the programmer. var anImage, anotherImage; var afterImageLoaded = function() { anotherImage = new Image(); anotherImage.onLoad = afterAnotherImageLoaded; anotherImage.src = “http://...”; }; var afterAnotherImageLoaded = function() { overlap(anImage, anotherImage); }; anImage = new Image(); anImage.onLoad = afterImageLoaded; anImage.src = “http://...”;

18. Modal dialogs key event (“y”)

19. Challenge: Big Bang for dialogs Mechanically, big-bang needs to give control to the browser to process events, to handle events like clock ticks or key events. Again, we need to abandon control back to the browser.

20. User OS Callback Control flow needs to be relinquished to the browser. Browser

21. Big-bang Should be an Expression! We want a functional big bang. big-bang should be composable; it should be possible use it in expressions without restriction. (define (user-chooses-yes?) (big-bang 'not-yet (to-draw...) (stop-when choice-made?) (on-key key-pressed))) (define (choice-made? w key) (not (eq? w 'not-yet))) (define (key-pressed w a-key) (cond [(key=? a-key “y”) true] [(key=? a-key “n”) false] [else w])) (if (user-chooses-yes?) (start-again) (quit-game)) The rest of the computation needs to be reinstated after big- bang stops.

22. Functional programs on JavaScript need to be able to abandon and restore their control context.

23. Solution with Continuations Javascript alone doesn't give us the necessary control primitives to implement images as values and expressional big-bang. Control operators can be applied toward this problem. (i.e. continuations!)

24. Continuation Operators Save Saves the current state of the computation Restore Restarts a saved computation Abort Abandons the current computation Prompt Delimits the extent to which the continuation is captured and restored

25. Continuation Operators Continued... For image initialization: var image = new Image(); saveContinuation(); image.onLoad = function() { restoreContinuation(image); } img.src =...;

26. Continuation Operators Continued... For big-bang: On stopWhen(): function bigBang(initialWorld,...) { theWorld = initialWorld; initializeEventHandlers(); saveContinuation(); abortContinuation(); } restoreContinuation(theWorld);

27. Implementing the Evaluator

28. 1. Naïve Compilation to JavaScript Captured basic functional event-driven programs. But: Image initialization bug hit us hard! big-bang could only be used at top-level. Student programs couldn't use advanced language features (macros, modules). Recursive programs (more advanced students) could hit the JavaScript stack ceiling.

29. 2. Interpretation Bytecode interpreter with explicit representation for the control stack. Uses Racket's production level compiler to get optimized bytecode. Resolves asynchronous issues. But: interpretation overhead proved high enough to affect more sophisticated programs (dijkstra, depth first search, etc.).

30. 3. Compilation (again) Build JS compiler, but avoid the JavaScript stack entirely and maintain explicit control stack representation.

31. Example run (let* ([x 3] [y 4]) (+ x y)) (Top (Prefix (list (ModuleVariable '+ '#%kernel))) (Let1 (Constant 3) (Let1 (Constant 4) (App (ToplevelRef 4 0) (list (LocalRef 3) (LocalRef 2)))))) (ExtendEnvironment/Prefix! (list (ModuleVariable '+ '#%kernel))) (PushEnv 1) (Assign (StackRef 0) (Const 3)) (PushEnv 1) (Assign (StackRef 0) (Const 4)) (Assign 'val (CallKernel '+ (StackRef 1)(StackRef 0))) (PopEnvironment 2 0) env.push([Primitives["+"]]); env.push(undefined); env[env.length - 1 - 0] = 3; env.push(undefined); env[env.length - 1 - 0] = 4; val = (env[env.length - 1 - 1] + env[env.length - 1 - 0]); env.length = env.length - 2; Racket compile IL Compile JS translate Can reuse Racket compiler's optimizations (constant folding, loop unrolling, etc) Simple intermediate language, including assignments, stack operations, gotos...

32. Caveat: GOTOs and pointer arithmetic JavaScript doesn't have GOTO statements, nor does it have pointer arithmetic. GOTO for primitive flow control. Pointer arithmetic for GOTO jumping into offsets of labeled addresses, specifically for the efficient handling of multiple-value returns. onMultipleValueReturn:... afterCallSingle: … returnAddress =... goto (returnAddress - 1) ??

33. Lambda, the Ultimate GOTO However, JS supports functions. And these functions are objects that can hold attributes. Each basic block transforms to a function. Limited pointer arithmetic can be supported by attaching attributes to the function values (e.g. the function corresponding to the preceding label).

34. var onMultipleValueReturn = function(MACHINE) {... }; var afterCallSingle = function(MACHINE) {... }; afterCallSingle.pred = onMultipleValueReturn; … var returnAddress = … return(returnAddress.pred(MACHINE)); onMultipleValueReturn:... afterCallSingle: … returnAddress =... goto (returnAddress - 1)

35. More details about the prototype To offset the problem of unbounded recursion, use trampolines to clear the stack. Periodic yielding of control to the browser after n trampolines. Allows for the implementation of interrupts. Allows the web browser to remain responsive. Application of continuation marks on the control frames to get reasonable stack traces.

36. Related work Web evaluators and programming environments Server-side evaluators (Try Ruby, Try Haskell, ideone)  Textual output  Non-real-time interaction with the user Client-side evaluators (wscheme, HotRuby, Obrowser)  No direct support for control operators.

37. Expected Contributions Web-based evaluator that supports functional, event-driven programs Web-based programming environment (WeScheme) Used in Bootstrap (http://www.bootstrapworld.org/), by dozens of middle school kids.http://www.bootstrapworld.org/ Toolchain for phone programming (Moby) (minor) Functional effects to provide access to IO interfaces on a platform like the smartphone