Fun in the Web: Web based programming environments

1
Fun in the Web Web based programming environments
Danny Yoo WPI
2
Functional event-driven
programming
on the Web!
3
(No Transcript)
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) (gt height 300)) (define UFO
(image-url http//world.cs.brown.edu/1/clipa
rt/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?))
9
(No Transcript)
10
Callback
User
OS
World
World
World
World
11
Will invoke event-specific functions
Current value of World
Might be enriched with additional event
information
New value of World
12
World Programs on the Phone

• Programs that run on the phone can take in a
  variety of events.

on-tilt world azimuth pitch roll ? world
on-acceleration world x y z ? world
on-location-change world latitude longitude ?
world
How can other features (SMS, playing sounds) be
adapted to this framework?
13
(No Transcript)
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
(No Transcript)
16
Functional programs on top of JavaScript need to
be able to block.
17
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 afterImageLoadedanImag
e.src http//...
This should be handled by the language, not the
programmer.
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
Callback
User
Browser
OS
Control flow needs to be relinquished to the
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(im
age) img.src ...
26
Continuation Operators Continued...

• For big-bang
• On stopWhen()

function bigBang(initialWorld, ...)
theWorld initialWorld initializeEventHandle
rs() 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
Can reuse Racket compiler's optimizations
(constant folding, loop unrolling, etc)
(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))))))
Racket compile
IL Compile
Simple intermediate language, including
assignments, stack operations, gotos...
(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)
envenv.length - 1 - 0 3 env.push(undefined)
envenv.length - 1 - 0 4 val
(envenv.length - 1 - 1
envenv.length - 1 - 0) env.length env.length
- 2
JS translate
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.
• Toolchain for phone programming (Moby)
• (minor) Functional effects to provide access to
  IO interfaces on a platform like the smartphone