1 Quick Start

To make sure js-vm is working, save the following program as "test.rkt" in some working directory.
  #lang planet dyoo/js-vm:1:10
  (printf "hello world\n")
  (check-expect (* 3 4 5) 60)
  (image-url "http://racket-lang.org/logo.png")
  (check-expect (big-bang 0
                          (on-tick add1 1)
                          (stop-when (lambda (x) (= x 10))))
  "last line"

This program is in a language that has been enriched with Javascript-specific functions. It can be partially evaluated in plain Racket, but evaluation will halt at the call to image-url because image-url constructs a image DOM element and needs to run in an Javascript context.

Once the program is saved, create a new file called "run.rkt" in the same working directory with the following contents:

  #lang racket
  (require (planet dyoo/js-vm:1:10))
  (run-in-browser "test.rkt")

When this program is executed, run-in-browser will take "test.rkt" and translate it to run on the browser; a temporary web-server will opened and your browser’s window will open with the running program.

Finally, you can create zip packages by using create-zip-package. For example, modify "run.rkt" to be:

  #lang racket
  (require dyoo/js-vm:1:10)
  (create-zip-package "test.rkt" "test.zip")

A slightly more substantial example is an animation using a built-in functional event-driven programming library.

  #lang planet dyoo/js-vm:1:10
  ; falling.ball.rkt
  ; Simple falling ball example. A red ball falls down the screen
  ; until hitting the bottom.
  (define-struct world (radius y))
  ; The dimensions of the screen:
  (define WIDTH 320)
  (define HEIGHT 480)
  ; The radius of the red circle.
  (define RADIUS 15)
  ; The world is the distance from the top of the screen.
  (define INITIAL-WORLD (make-world RADIUS 0))
  ; tick: world -> world
  ; Moves the ball down.
  (define (tick w)
    (make-world RADIUS (+ (world-y w) 5)))
  ; hits-floor?: world -> boolean
  ; Returns true when the distance reaches the screen height.
  (define (hits-floor? w)
    (>= (world-y w) HEIGHT))
  ; We have some simple test cases.
  (check-expect (hits-floor? (make-world RADIUS 0)) false)
  (check-expect (hits-floor? (make-world RADIUS HEIGHT)) true)
  ; render: world -> scene
  ; Produces a scene with the circle at a height described by the world.
  (define (render w)
    (place-image (circle RADIUS "solid" "red")
                 (/ WIDTH 2)
                 (world-y w)
                 (empty-scene WIDTH HEIGHT)))
  ; Start up a big bang, 15 frames a second.
  (check-expect (big-bang INITIAL-WORLD
                          (on-tick tick 1/15)
                          (to-draw render)
                          (stop-when hits-floor?))
                (make-world 15 480))

Again, to run this in the browser, we use run-in-browser:
  #lang racket
  (require (planet dyoo/js-vm:1:10))
  (run-in-browser "falling-ball.rkt")