Javascript Runtime

This page describe the javascript runtime generation process. The javascript is similar to the Java runtime, if you want an overview of the concepts used in the actual code, please visit the dedicated page.

Overview

The Javascript runtime was developed in typescript, using p5.js and ODE.js.

Using npm tools, the whole runtime is generated into a single runtime.js file while ode.js is kept as a single file libode.js from its downloaded package (node_modules/odejs/lib). These two files contains all the dependencies of a simulation and no further requirement is needed.

Upon generation of simulations into HTML files, those files are copied into the HTML file.

Note: ode.js is kept as a file on his own because it does not seem to be a node module (works in a web environment) and cannot be imported the same way as other requirements.

Extending the runtime

To work on the runtime, you will need :

• node and npm
• An editor for typescript files (WebStorm, notepad...)

Open the runtime folder in your favorite IDE and install the dependencies using NPM.

cd solutions/jetbrains.mps.samples.Physics.javascript.runtime
npm install

You can then edit the runtime as you wish. Once done, update the bundle using npm run build, this will compile typescript files and bundle them in build/runtime.js.

Difference with java runtime

The structure of the runtime was kept the same as the java runtime. Some difference we can notice are :

• Metrics are not rendered on the canvas : it would require a font file and using HTML elements is easier
• Rendering of simulations views is independent : rendering all views on the same HTML canvas has proven to be quite slow, so each view now uses a single canvas
• Some remote picture are not usable due to browsers CORS security policy : this would require to use a web server with the resources on it