Code Review #154

veillette · 2021-07-30T17:49:18Z

Replace {{GITHUB_ISSUE_LINK}} with links to GitHub issues.
Fill in (or delete) the Specific Instructions section.

PhET Code-Review Checklist (a.k.a "CRC")

Mark failed items with ❌ and note any related GitHub issues.
Call attention to items with ⚠️ and note any related GitHub issues.
Mark items that are not applicable with N/A

Specific Instructions

Provide specific instructions here. For example: known problems that will fail CRC items, files that can be skipped, code that is not completed, shared or common code that also needs to be reviewed,... If there are no specific instructions, then delete this section.

GitHub Issues

The following standard GitHub issues should exist. If these issues are missing, or have not been completed, pause code review until the issues have been created and addressed by the responsible dev.

results of memory testing for brands=phet, see Memory testing #148
~~results of memory testing for brands=phet-io (if the sim is instrumented for PhET-iO), see {{GITHUB_ISSUE_LINK}}~~
performance testing and sign-off, see performance testing and sign-off #149
review of pointer areas, see review of pointer areas #147
credits (will not be completed until after RC testing), see credits for 1.1 release #146

Build and Run Checks

If any of these items fail, pause code review.

Does the sim build without warnings or errors?
Does the html file size seem reasonable, compared to other similar sims?
Does the sim start up? (unbuilt and built versions)
Does the sim experience any assertion failures? (run with query parameter ea)
Does the sim pass a scenery fuzz test? (run with query parameters fuzz&ea) CT: assertion failure in Graph.computeWindingMap #72
Does the sim behave correctly when listener order is shuffled? (run with query parameters ea&shuffleListeners and ea&shuffleListeners&fuzz) Inaccurate rendering with shuffleListeners query parameter #145 and Incorrect ruler length with shuffleListeners query parameter #133
Does the sim output any deprecation warnings? Run with ?deprecationWarnings. Do not use deprecated methods in new code.

Memory Leaks

Does a heap comparison using Chrome Developer Tools indicate a memory leak? (Describing this process is beyond the scope of this document.) Test on a version built using grunt --minify.mangle=false. Compare to testing results done by the responsible developer. Results can be found in {{GITHUB_ISSUE_LINK}}.
For each common-code component (sun, scenery-phet, vegas, …) that opaquely registers observers or listeners, is
there a call to that component’s dispose function, or is it obvious why it isn't necessary, or is there documentation
about why dispose isn't called? An example of why no call to dispose is needed is if the component is used in
a ScreenView that would never be removed from the scene graph.
Are there leaks due to registering observers or listeners? The following guidelines should be followed unless documentation (in-line or in implementation-notes.md) describes why following them is not necessary.
- AXON: Property.link or lazyLink is accompanied by unlink.
- AXON: Property.multilink is accompanied by unmultilink.
- AXON: Creation of Multilink is accompanied by dispose.
- AXON: Creation of DerivedProperty is accompanied by dispose.
- AXON: Emitter.addListener is accompanied by removeListener.
- AXON: ObservableArrayDef.element*Emitter.addListener is accompanied by ObservableArrayDef.element*Emitter.removeListener
- SCENERY: Node.addInputListener is accompanied by removeInputListener
- TANDEM: Creation of an instrumented PhetioObject is accompanied by dispose.
Do all types that require a dispose function have one? This should expose a public dispose function that calls this.disposeMyType(), where disposeMyType is a private function declared in the constructor. MyType should exactly match the filename.

Performance

Play with sim, identify any obvious performance issues. Examples: animation that slows down with large numbers of objects; animation that pauses or "hitches" during garbage collection.
If the sim uses WebGL, does it have a fallback? Does the fallback perform reasonably well? (run with query parameter webgl=false)

Usability

Are UI components sufficiently responsive? (especially continuous UI components, such as sliders)
Are pointer areas optimized, especially for touch? (run with query parameter showPointerAreas)
Do pointer areas overlap? (run with query parameter showPointerAreas) Overlap may be OK in some cases, depending on the z-ordering (if the front-most object is supposed to occlude pointer areas) and whether objects can be moved.

Internationalization

Are there any strings that are not internationalized, and does the sim layout gracefully handle internationalized strings that are shorter than the English strings? (run with query parameter stringTest=X. You should see nothing but 'X' strings.)
Does the sim layout gracefully handle internationalized strings that are longer than the English strings? (run with query parameters stringTest=double and stringTest=long)
Does the sim stay on the sim page (doesn't redirect to an external page) when running with the query parameter
stringTest=xss? This test passes if sim does not redirect, OK if sim crashes or fails to fully start. Only test on one
desktop platform. For PhET-iO sims, additionally test ?stringTest=xss in Studio to make sure i18n strings didn't leak
to phetioDocumentation, see https://github.com/phetsims/phet-io/issues/1377
Avoid using concatenation to create strings that will be visible in the user interface. Use StringUtils.fillIn and a string pattern to ensure that strings are properly localized.
Use named placeholders (e.g. "{{value}} {{units}}") instead of numbered placeholders (e.g. "{0} {1}").
Make sure the string keys are all perfect, because they are difficult to change after 1.0.0 is published. Guidelines for string keys are:

(1) Strings keys should generally match their values. E.g.:
```
"helloWorld": {
  value: "Hello World!"
},
"quadraticTerms": {
  value: "Quadratic Terms"
}
```
(2) If a string key would be exceptionally long, use a key name that is an abbreviated form of the string value, or that captures the purpose/essence of the value. E.g.:
```
// key is abbreviated
"iWentToTheStore": {
  value: "I went to the store to get milk, eggs, butter, and sugar."
},

// key is based on purpose
"describeTheScreen": {
  value: "The Play Area is a small room. The Control Panel has buttons, a checkbox, and radio buttons to change conditions in the room."
}
```
(3) If string key names would collide, use your judgment to disambiguate. E.g.:
```
"simplifyTitle": {
   value: "Simplify!"
},
"simplifyCheckbox": {
   value: "simplify"
}
```
(4) String keys for screen names should have the general form "screen.{{screenName}}". E.g.:
```
  "screen.explore": {
    "value": "Explore"
  },
```
(5) String patterns that contain placeholders (e.g. "My name is {{first}} {{last}}") should use keys that are unlikely to conflict with strings that might be needed in the future. For example, for "{{price}}" consider using key "pricePattern" instead of "price", if you think there might be a future need for a "price" string.
If the sim was already released, make sure none of the original string keys have changed. If they have changed, make sure any changes have a good reason and have been discussed with @jbphet.

Repository Structure

Coding Conventions

This section deals with PhET coding conventions. You do not need to exhaustively check every item in this section, nor do you necessarily need to check these items one at a time. The goal is to determine whether the code generally meets PhET standards.

For example, both of these are acceptable:

Property.multilink(
  [ styleProperty, activeProperty, colorProperty ],
  ( style, active, color ) => {
    // some algorithm that uses style and active
} );

Property.multilink(
  [ styleProperty, activeProperty, colorProperty ],
  ( style, active ) => {
    // some algorithm that uses style and active
} );

This is not acceptable, because the 3rd parameter is incorrect.

Property.multilink(
  [ styleProperty, activeProperty, colorProperty ],
  ( style, active, lineWidth ) => {
    // some algorithm that uses style and active
} );

ES5 getters/setters defined in sims should be used judiciously when a Property exists, only when the benefit of
conciseness outweighs the potential loss of readability. If ES5 getters/setters exist, try to not mix usage of them
with Property access.
The model and view code should be written such that it makes no assumptions about the animation frame rate this it
will encounter. The default max dt (delta time) value is defined in Screen.js, and smaller values should be used if
the default is too large. There is no minimum value for dt, which implies that there is no maximum supported frame
rate. The sim should be able to handle this. For an example of a problem that resulted from assuming that a max rate
of 60 FPS would be the norm, please see this GitHub issue.

Documentation

This section deals with PhET documentation conventions. You do not need to exhaustively check every item in this
section, nor do you necessarily need to check these items one at a time. The goal is to determine whether the code
generally meets PhET standards.

/**
 * Updates this node.
 * @abstract
 * @protected
 */
 update() {
   throw new Error( 'update must be implemented by subclass' );
 }

Type Expressions

This section deals with PhET conventions for type expressions. You do not need to exhaustively check every item in this section, nor do you necessarily need to check these items one at a time. The goal is to determine whether the code generally meets PhET standards.

Type expressions should conform approximately to Google Closure Compiler syntax. PhET stretches the syntax in many cases (beyond the scope of this document to describe).
Prefer the most basic/restrictive type expression when defining APIs. For example, if a client only needs to know that a parameter is {Node}, don’t describe the parameter as {Rectangle}.
All method parameters should have type expressions. For example @param {number} width.
In sim-specific code, options and fields should have type expressions when their type is not obvious from the context. “Obvious” typically means that the value type is clearly shown in the righthand-side of the definition. E.g. const width = 42 clear shows that width is {number}. E.g. const checkbox = new Checkbox(…) clearly shows that checkbox is {Checkbox}. If the type is obvious from the context, the developer may still provide a type expression at his/her discretion. Examples:
```
// @public {GameState} the current state of the game
this.gameState = this.computeGameState();

// @public (read-only) the width of the container
this.containerWidth = 150;

// @private the checkbox used to show particles
this.particlesVisibleCheckbox = new Checkbox(...);
```

In common code repositories all options and fields should have type expressions, regardless of their visibility, and regardless whether their type is obvious from the context. If the same examples from above appeared in common code:

// @public {GameState} the current state of the game
this.gameState = this.computeGameState();

// @public (read-only) {number} the width of the container
this.containerWidth = 150;

// @private {Checkbox} the checkbox used to show particles
this.particlesVisibleCheckbox = new Checkbox(...);

Type expressions for Enumeration values should be annotated as instances of that Enumeration, see examples in https://github.com/phetsims/phet-core/blob/master/js/Enumeration.js for more.

/**
 * @param {LeftOrRight} - whichHand
 */
 function getHand( whichHand ){
   if( whichHand === LeftOrRight.LEFT ){
     return new LeftHand();
   }
   else if( whichHand === LeftOrRight.RIGHT ){
     return new RightHand();
   }
  }

Type expressions for functions have a variety of possibilities, increasing in complexity depending on the case. In general note that {function} is not enough information. Here are some better options:
1. The most basic option it to use Google Closure Type syntax, for more info see https://github.com/google/closure-compiler/wiki/Types-in-the-Closure-Type-System. This specifies the param/return types, but nothing more. Here are some examples:
  - @param {function()} noParamsAndNoReturnValue
  - @param {function(number)} giveMeNumberAndReturnNothing
  - @param {function(number, number):Vector2} getVector2
  - @param {function(new:Node)} createNode - a function that takes the Node constructor
2. When needing to be a bit more specific, add a name to parameters of the function. Sometimes this is all that is needed for clarity on what the param does:
  - @param {function(model:MyModel, length:number, name:string): Node} getLengthNode
  - @param {function(aSelfExplanatoryNameForAString:string): Node} getStringNode
3. If (2) isn't enough, use English to explain the parameters and return values. This is easy because they are named, and can be easily mentioned:
  - @param {function(model:MyModel, length:number, name:string): Node} getLengthNode - returns the length Node that you have always wanted, name is the name of the source of your aspirations, length is a special number according to the following 24 criteria. . .
4. If needing more complexity, or using jsdoc rendering tools (like PhET-iO documentation does), you must use a JSDoc compatible format, not (2) or (3), and you may need to use the more complicated solution. See JSDoc docs for more info. Here is an example of a named callback:
```
/**
 * @name mySpecialCallback
 * Converts a string to a number
 * @param {string}
 * @returns {number}
 */
/**
 * @param {mySpecialCallback} callback
*/
x = function( callback) { callback( 'still chocolate' ) };
```
Type expressions for anonymous Objects have a variety of possibilities, increasing in complexity depending on the case.
1. When the documentation is close by, then {Object} is still acceptable. This mainly applies to options and similar patterns:
  - @param {Object} [options] // this is great because of the extend call 5 lines down
2. When using an Object with specific properties, name them and their types like so:
  - @param {name:string, address:{street:string}, returnNode:function(number):Node, [shoeSize:number]} personalData // note that shoeSize is optional here
3. When you need a bit more explanation, keep the same type expression as (2), but feel free to outline specifics in English after the param name.
```
@ param {name:string, address:{street:string}, returnNode:function(number):Node, [shoeSize:number]} personalData - use english after to explain pieces of this
    (if needed, outline properties on their own lines)
    name is something
    address is something else
    returnNode does this thing
```
4. Not all objects have named keys like (2) and (3). Here is how to document dictionary-like Objects, where each key is some type, and the value is another type. For key value pairs use this:
  - {Object.<string, number>} Where keys are strings, and values are numbers.
  - {Object.<phetioID:string, count:number>} - naming each of these can help identify them too. Feel free to explain in English after the type expression if needed.
5. If things are too complicated for the above cases, use a *Def.js file (especially is used in more than one file), or a @typedef declaration right above the jsdoc that uses the typedef.
Look for cases where the use of type expressions involving Property subclasses are incorrect. Because of the structure of the Property class hierarchy, specifying type-specific Properties ({BooleanProperty}, {NumberProperty},...) may be incorrect, because it precludes values of type {DerivedProperty} and {DynamicProperty}. Similarly, use of {DerivedProperty} and {DynamicProperty} precludes values of (e.g.) {BooleanProperty}. Especially in common code, using {Property.<TYPE>} is typically correct, unless some specific feature of the Property subclass is required. For example, {Property.<boolean>} instead of {BooleanProperty}.

Visibility Annotations

This section deals with PhET conventions for visibility annotations. You do not need to exhaustively check every item in this section, nor do you necessarily need to check these items one at a time. The goal is to determine whether the code generally meets PhET standards.

Because JavaScript lacks visibility modifiers (public, protected, private), PhET uses JSdoc visibility annotations to document the intent of the programmer, and define the public API. Visibility annotations are required for anything that JavaScript makes public. Information about these annotations can be found here. (Note that other documentation systems like the Google Closure Compiler use slightly different syntax in some cases. Where there are differences, JSDoc is authoritative. For example, use Array.<Object> or Object[] instead of Array<Object>). PhET guidelines for visibility annotations are as follows:

Use @public for anything that is intended to be part of the public API.
Use @protected for anything that is intended for use by subtypes.
Use @private for anything that is NOT intended to be part of the public or protected API.
Put qualifiers in parenthesis after the annotation, for example:
- To qualify that something is read-only, use @public (read-only). This indicates that the given Property (AND its value) should not be changed by outside code (e.g. a Property should not have its value changed)
- To qualify that something is public to a specific repository, use (for example) @public (scenery-internal)
- For something made public solely for a11y, use @public (a11y)
- For something made public solely for phet-io, use @public (phet-io)
- Separate multiple qualifiers with commas. For example: @public (scenery-internal, read-only)

For JSDoc-style comments, the annotation should appear in context like this:

/**
 * Creates the icon for the "Energy" screen, a cartoonish bar graph.
 * @returns {Node}
 * @public
 */

For Line comments, the annotation can appear like this:

// @public {function(listener:function)} - Adds a listener
addListener: function( listener ) { /*...*/ }

Verify that every JavaScript property and function has a visibility annotation. Here are some helpful regular expressions to search for these declarations as PhET uses them.
- Regex for property assignment like x.y = something: [\w]+\.[\w]+\s=
- Regex for function declarations: [\w]+: function\(

Math Libraries

DOT/Utils.toFixed or DOT/Utils.toFixedNumber should be used instead of toFixed. JavaScript's toFixed is notoriously buggy. Behavior differs depending on browser, because the spec doesn't specify whether to round or floor.

IE11

IE is no longer supported. With that in mind remove IE-specific workarounds
Use string.includes and string.startsWith where possible.

Organization, Readability, and Maintainability

The text was updated successfully, but these errors were encountered:

veillette · 2021-07-30T18:14:53Z

I just deployed
https://phet-dev.colorado.edu/html/geometric-optics/1.0.0-dev.9/phet/geometric-optics_en_phet.html
This is the most recent dev version prior to this code review.

zepumph · 2021-08-04T13:50:08Z

I made some mostly formatting updates to the model and implementation notes. Feel free to update or change as you go.

zepumph · 2021-08-04T14:04:55Z

Does the sim pass a scenery fuzz test? (run with query parameters fuzz&ea)

I gave this sim 100x11 seconds of fuzz testing, and didn't run into any assertion errors locally.

zepumph · 2021-08-04T18:56:56Z

Today I only made it through the first instantiation of a Target in GeometricOpticsModel.js.

zepumph · 2021-08-05T21:37:22Z

Code review complete. I spent the vast majority of time in the model. The view looks really swell. Nice work! All issues have been linked to this issue, though I didn't spend the time to check all the boxes in the checklist. Back to @veillette. Let me know if you'd like assistance, help, or to discuss anything further.

…Optic.positionProperty, #154

pixelzoom · 2021-09-16T01:54:03Z

All REVIEW comments have been addressed.

pixelzoom · 2021-09-22T20:05:05Z

All of the remaining code-review feedback is in GitHub issues, labeled "code-review". So I'm going to close this issue.

veillette added the dev:code-review label Jul 30, 2021

veillette assigned zepumph Jul 30, 2021

veillette mentioned this issue Jul 30, 2021

Internal Code Review CheckList (MV and SC) #129

Closed

This was referenced Aug 4, 2021

Assertion failed in Spotlight.getIntersection() #156

Closed

No cursor change on hover #157

Closed

zepumph added a commit that referenced this issue Aug 4, 2021

updates to the model/implementation-notes md files, #154

276d32b

zepumph added a commit that referenced this issue Aug 4, 2021

public: false is redundant, #154

f530833

zepumph added a commit that referenced this issue Aug 4, 2021

review comments, #154

1628f6f

zepumph added a commit that referenced this issue Aug 4, 2021

review comments, #154

621764e

zepumph added a commit that referenced this issue Aug 5, 2021

review comments, #154

e85490b

This was referenced Aug 5, 2021

CT: assertion failure in Graph.computeWindingMap #72

Closed

lens/ProjectionScreen.js dependency common model code #173

Closed

Shouldn't rays go behind the control panel? #174

Closed

Questions about Guide #175

Closed

zepumph assigned veillette and unassigned zepumph Aug 5, 2021

zepumph added a commit that referenced this issue Aug 7, 2021

review comments, #154

7181504

pixelzoom mentioned this issue Sep 14, 2021

Inconsistent pattern for passing tandem to constructor #179

Closed

pixelzoom added a commit that referenced this issue Sep 15, 2021

clean up formatting, comments, JSDoc, etc. #154

eb08d2e

pixelzoom added a commit that referenced this issue Sep 15, 2021

clean up formatting, comments, JSDoc, etc. #154

8461e4c

pixelzoom added a commit that referenced this issue Sep 15, 2021

clean up formatting, comments, JSDoc, etc. #154

597db17

pixelzoom added a commit that referenced this issue Sep 15, 2021

rename screenIntersectionProperty, #154

23a1a1c

pixelzoom added a commit that referenced this issue Sep 15, 2021

rename opticPath and opticOutlinePath, #154

b461441

pixelzoom added a commit that referenced this issue Sep 15, 2021

address REVIEW comment via this.maxDiameter, #154

2b991dc

pixelzoom added a commit that referenced this issue Sep 16, 2021

address REVIEW comment by breaking coupling between SourceObject and …

9e9cacd

…Optic.positionProperty, #154

pixelzoom mentioned this issue Sep 18, 2021

Geometric Optics Master Checklist #1

Closed

58 tasks

pixelzoom assigned pixelzoom and unassigned veillette Sep 18, 2021

pixelzoom closed this as completed Sep 22, 2021

zepumph mentioned this issue Jan 22, 2022

Create a reusable codebase for optics/light sims. phetsims/optics-lab#38

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code Review #154

Code Review #154

veillette commented Jul 30, 2021 •

edited by zepumph

Loading

veillette commented Jul 30, 2021

zepumph commented Aug 4, 2021

zepumph commented Aug 4, 2021

zepumph commented Aug 4, 2021

zepumph commented Aug 5, 2021

pixelzoom commented Sep 16, 2021 •

edited

Loading

pixelzoom commented Sep 22, 2021

Code Review #154

Code Review #154

Comments

veillette commented Jul 30, 2021 • edited by zepumph Loading

PhET Code-Review Checklist (a.k.a "CRC")

Specific Instructions

GitHub Issues

Build and Run Checks

Memory Leaks

Performance

Usability

Internationalization

Repository Structure

Coding Conventions

Documentation

Type Expressions

Visibility Annotations

Math Libraries

IE11

Organization, Readability, and Maintainability

veillette commented Jul 30, 2021

zepumph commented Aug 4, 2021

zepumph commented Aug 4, 2021

zepumph commented Aug 4, 2021

zepumph commented Aug 5, 2021

pixelzoom commented Sep 16, 2021 • edited Loading

pixelzoom commented Sep 22, 2021

veillette commented Jul 30, 2021 •

edited by zepumph

Loading

pixelzoom commented Sep 16, 2021 •

edited

Loading