Cloud Notebooks

Jan Poeschko

Wolfram Research

Cloud notebooks demo

typing text

evaluating code

graphics

Manipulate

Suggestions Bar

dynamic controls

typesetting

Challenges

What makes it so hard to render notebooks in a web browser?

custom line breaking and baseline alignment

need to bypass all the browser’s layout mechanisms

arbitrary nesting of custom, dynamic elements

no existing JavaScript library supports that

The easy way doesn’t work

ExportString[Grid[{{300!,2}}],"HTMLFragment"]

Export["test.html",Grid[{{300!,2}}],"HTMLFragment"]

ExportString[x/y+z,"HTMLFragment"]

Evolution of the Cloud notebook interface

Lines of code

Architecture

JavaScript box rendering

model of the box tree created from box expression (using Backbone.js)

model resolves options (using async.js and promises)

view renders model into a DOM node + dimension information

to optimize performance: virtual DOM representation (using React)

Active development

speed up notebook rendering and editing

support more notebook (box) structures

Future directions

API to embed and control individual notebook pieces

two-dimensional editing

live collaboration on cloud notebooks

How does Dynamic work?

Kernel evaluation turns Dynamic into a DynamicBox

Dynamic[x]//ToBoxes

Client receives the box expression

Client registers a callback in the kernel that gets triggered on changes to x

Whenever x gets changed in the kernel, the client is notified, either:

through the regular response to an evaluation

through a polling request

When an update is triggered and the Dynamic is (still) visible on screen, the client requests the new content.

Building Cloud applications:
Demo “Salesman Trips”

CloudObject["tsp/index"]