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:13
(printf "hello world\n")
(check-expect (* 3 4 5) 60)
(current-seconds)
(image-url "http://racket-lang.org/logo.png")
(check-expect (big-bang 0
                        (on-tick add1 1)
                        (stop-when (lambda (x) (= x 10))))
              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:13))
(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:13)
(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:13
; 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:13))
(run-in-browser "falling-ball.rkt")