About simulation development cycle

[25. Sai Surya]

Hi All,

I'm new bee trying to get hands-on. I have below questions.

1) In general, how development works? Do I need to write required MVC (P) code in TypeScript which eventually converted to JS code using transpiler (Grunt?) Or I can start writing code in JavaScript itself? What's the recommended approach?

2) When I look at exampleSim, I see a .js file created for bar magnet image (barMagnet_png.js). As I can see, it's base 64 encoding of image along with other piece of code. How am I supposed to get this file generated for other images? 

Apologies if these are repeated questions.

Thanks & Regards,
Sai Surya.

[cmalley]

Welcome Sai!

Since you’re new, be sure you’ve read the "PhET Development Overview" at https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md.

To answer your questions…

> 1) In general, how development works? Do I need to write required MVC (P) code in TypeScript which eventually converted to JS code using transpiler (Grunt?) Or I can start writing code in JavaScript itself?

PhET recently started using TypeScript. You can continue to develop in either TypeScript or JavaScript, but all code (TypeScript and JavaScript) must be run through the transpiler. The steps for doing that are described in the “Transpile TypeScript” section of "PhET Development Overview", at https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md#transpile-typescript

> What's the recommended approach?

PhET is writing all new code in TypeScript. But your approach is up to you. JavaScript code should continue to work. If it doesn't, please report to phet...@colorado.edu.

> 2) When I look at exampleSim, I see a .js file created for bar magnet image (barMagnet_png.js). As I can see, it's base 64 encoding of image along with other piece of code. How am I supposed to get this file generated for other images? 

To add an new image:

* Put your file in the images/ subdirectory of the simulation repository.
* Add info about your new image to images/license.json (required by PhET build tools)
* At the root of the simulation repository, run ‘grunt modulify’. This generates the associated .ts file for the image. It works for other types of resources too.
* Use your image by importing it into your .js or .ts file, just like you would with a source-code module.

Note that PhET recently changed 'grunt modulify' to generate .ts files, so it sounds like you may be working with an older version of example-sim.

> Apologies if these are repeated questions.

Never a need for apologies in this forum!  I hope this helps.

Chris Malley
PixelZoom, Inc.