4.6 Strategy for development

As someone who had to go through all the hassle of using the PhET sims framework to develop simulations, I know that all the information can be overwhelming. To that end, here are a few steps that one can take to efficiently plan out and execute their ideas with this amazing software.

4.6.1 Planning

Everything starts of with a robust, defined plan. As a developer, the first thing I do is to understand the needs of the simulation: The components to use, the logic to implement, the results to produce.

One crucial part about planning is to understand what you are trying to do and to be very clear on how it is to be done. For example, later on in this documentation we will embark on a journey to make a simulation for the Newton-Raphson Method and so I know I need to somehow put a graph on the screen, which raises a very peculiar question, especially in the minds of novice programmers.

“How do I get a graph on this screen and where does it come from?”


In my opinion, a lot can be learned through thorough analysis of the code for tons of simulations made by PhET.

Additionally I want to point out that if at any time in your programming journey using this framework you encounter any trouble with the usage of these components, you can always reach out to the Developing Interactive Simulations in HTML5. They can even help you figure out what components you would need for your idea and provide some guidance on executing your plan.

4.6.2 Developing

This next step is really the key to executing your plan to say the least. Once you have an understanding of the layout of your prospective simulation accompanied by knowledge on using the components you will be needing you are ready to develop.

Word of Advice

It is important to understand that a big part of developing a piece of software is the eruption of errors and bugs, don’t be discouraged by these messages, rather focus your attention towards solving those small little issues so that you can eventually see your software work as intended because that satisfaction is worth all the frustration and effort spent into the project.


In this documentation, I will be walking you through building the Newton-Raphson Method simulation and you will learn how to use panels, sliders, graphs, listener properties and much more.

Note


Often, the development process is divided into segments. It is considered good practice to work on a portion of the project and test for functionality. This helps preventing the case where developers get bombarded with hundreds of errors with little information of where the error originates from.

In that sense, when building your own simulations, if you have a component that takes in input from the user then make sure to test out the inputs received first before stepping into working with those values. The errors, if any, at this stage are going to be limited so you can easily get through them.

Step through each component in a similar fashion and then you will be left with a simulation where each part is working independently error free. Once you reach this point, then you can begin tinkering with parts to combine functionality in a sense of dependency. For example, working on making the results panel produce output dynamically with changes to the input values. After ensuring that the project is functional, you can continue to the next step.

4.6.3 Testing

Once you have a fully functional simulation, you need to make sure that the outputs being produced are to your expectations.

Rule of thumb

  • Make test cases that test the accuracy of the results based on input values of extremeties i.e values nearing the minimum and maximum of the allowed values. Most errors that I have encountered have occured in this region of input.
  • During the development phase, if you have some logic that you’re executing. For example, a couple of methods on calculating a functions value for every x, you can have these functions/methods in a separate .js file to serve as the backend information. See - Developing backend files. This practice makes it easy to test if there is a case where the values for the output are correct on the console but different on screen, you will be able to verify that the error is on the frontend rendering side of things


This is usually the fun part because you get to play around with what you’ve been working on for hours and see the results in real time. In my opinion, testing for accuracy of results is crucial in optimizing my logic from the development phase, in case it was flawed.

Once you are content with the results by testing for a number of test cases, you can move forward to the next step - deployment.

4.6.4 Deployment

After you are done with all of the aforementioned steps, you are ready to deploy your project online.

There are two ways to go about it. I’ll start with the naive way of putting your work online and something you probably shouldn’t do.

4.6.4.1 First Method (Bad Practice)

Remember how we talked about the phetsims folder where all the projects you develop end up? If not, See - Cloning phetsims on your local machine.

Well if you had an online hosting service at hand you could just upload the whole phetsims folder and then access the .html file as you would when using the http-server on your local machine. It would work as expected.

Note

Notice how I said to upload the whole phetsims folder and not just the folder of you simulation like in this case it would be newton-raphson. The reason being, your project is importing multiple files from all over the phetsims directory. Therefore, without the correct pathing and availability of these files your simulation is non-functional.


The problem here is that the whole phetsims folder is over 1 GB in storage size which is incredibly dense and inefficient for online hosting. Sounds terrible doesn’t it? Well fret not for the second method is what you should be doing in the first place, and the icing on the cake here is that the result of the second method is just one .html file of about 2 - 3 MBs.

4.6.4.2 Second Method (The Ideal Way)

The basic idea of this method is to use a command that can minify all the development files into a single .html file which is standalone.

Note

You will still need to include your external .js files that serve as backend for your simulation. For more information on this, See - Adding script tags to include js files


Anyhow, I have written a whole chapter on using the grunt build command and deploying your simulation online. See - Deploying your simulation on the internet