Modernize ROSE UI Javascript

[yaacov]

Issue:
Current Javascript user interface uses very old Javascript syntax and depend on jQuery, moving to ES6 (also known as ECMAScript 2015) and removing jQuery from a project can have several benefits:

• ES6 introduces a plethora of new features and a more concise syntax, which can lead to cleaner and more maintainable code.
• Native JavaScript (vanilla JS) can often be faster than jQuery because you're directly interacting with the Web APIs without the overhead of an additional library.
• Removing jQuery can reduce the file size which in turn can lead to faster load times for your website or application.
• Modern browsers have become much better at adhering to the latest web standards. A lot of the utilities and helper functions provided by jQuery are now natively supported by these browsers, so using jQuery can be redundant.
• By not relying on jQuery, developers are encouraged to learn and understand the native methods and APIs that the browser provides.

What are the updates proposed by this PR:

• Refactor Variable Declarations: Replace var with let or const based on mutability.
• Implement Arrow Functions: Especially useful if you're using functions as callbacks or in contexts where you want this to retain its context.
• Use ES6 Classes: Rewrite the prototypes and constructor functions using the new class syntax.
• Template Literals: Replace string concatenation with template literals.
• Replace jQuery AJAX with Fetch: The Fetch API is a modern way to make network requests and can replace jQuery's $.ajax or $.post.
• Replace jQuery Selectors with Native Selectors: Use document.querySelector() or document.querySelectorAll() instead of $().
• Replace jQuery Event Handlers: Use addEventListener instead of jQuery's .click(), .on(), etc.

[yaacov]

@nirs @sleviim hi, can you review / refer to a reviewer ?

[nirs]

I don't know much about modern javascript, but I don't have time to maintain this code. If you want to maintain this code and this change makes it easier for you than why not.

[yaacov]

I don't know much about modern javascript, but I don't have time to maintain this code. If you want to maintain this code and this change makes it easier for you than why not.

Thanks, sure I can help maintain the code ( part time :-) ), @sleviim do you know who currently maintain this code, do you want me to help ?

[sleviim]

Thanks, @yaacov
I also don't have time to maintain the code.
I know that @eshulman2 had some code contributions
@nirs can we also add her as a reviewer?

[yaacov]

I don't know much about modern javascript, but I don't have time to maintain this code. If you want to maintain this code and this change makes it easier for you than why not.

I will be happy to help maintain the code, here is some reference for this PR:

in the last session of Nitazanim the students where given a task to write a pull request for the ROSE repository, the students had some trouble relate to the code.

The ROSE code base uses deprecated dialects:
a. python 2.7 is deprecated (since 2020), we should teach student to use python3
b. ES5 is depracated (since 2015), we should teach students ES6

The ROSE code uses refactored logic, students may need more experience to understand:
a. for example score calculating logic is refactored to use reverse tests.

This PR is for making the code more ready for next year Nitzanim task, but IMHO more work need to be done to update ROSE code, for example:
a. replace Twisted with asyncio for python3 compatibility.
b. replace RPC communication with HTTP request response logic for better compatibility with Openshift stateless containers.
c. ML examples, or at least some docs on how to train an a driver using pytorch, tensorflow or keras

[sleviim]

Thanks for the notes @yaacov !
Currently, we're running the code via virtual env, cause running the code locally raised some deps issues, as the twisted library (see #454)
I guess it won't affect this one?
@nirs wdyt? Is it better to keep using the venv?

[yaacov]

about #454
If we are moving to containers and Openshift we can replace both venv and pipenv with podman build

[nirs]

Thanks, @yaacov I also don't have time to maintain the code. I know that @eshulman2 had some code contributions @nirs can we also add her as a reviewer?

Sure, please do.

[nirs]

@yaacov @sleviim an issue is a better place to discuss replacing the venv with a container.

[yaacov]

@cben hi, I am looking for a reviewer, can you review this PR ?

[yaacov]

@sgratch hi, I am looking for a reviewer, can you review this PR ?

[bennypowers]

Code looks fine. Ideas for improvement:

this looks like a perfect example of a web components use case. Instead of creating a Game class and having it "mount" on some div in the DOM, what about having something like this:

class Game extends HTMLElement {
  static template = document.createElement('template');
  static {
    this.template.innerHTML = `
      <p>game DOM here</p>
      <canvas></canvas>
    `;
  }

  constructor() {
    super();
    // create private Shadow DOM for the game
    this.attachShadow({ mode: 'open' })
      // efficiently clone game DOM
      .append(Game.template.content.cloneNode(true));
  }
  
  connectedCallback() {
    // initialize game...
  }
}

customElements.define('rose-game', Game);

Then in your page HTML

<rose-game></rose-game>

etc etc

You could also use a web components framework (I recommend Lit) to help with dynamic updates. You don't need a build step to do this, you can load Lit as es modules from a CDN.

I'm available to pair on this if you're interested in learning more

[yaacov]

@bennypowers thanks for the review ❤️

I have updated the PR according to comment #475 (comment)

this looks like a perfect example of a web components use case. Instead of creating a Game class and having it "mount" on some div in the DOM, what about having something like this:

Sounds cool ! it will be great idea for the next PR.

[yaacov]

@sleviim @nirs hi,
@bennypowers reviewed the code, it's as reviewed as we can get, and ready for merge.

Note:
The web-component upgrade is an improvement we think will make the code simpler and easy for students to understand, but it's a big change, not in the scope of this PR, @bennypowers and me talked about it offline, and we will look at the best way to implement web components in later time.

[sleviim]

Since it was omitted as part of the patch, just to make sure:
Does the UI work as expected and does the game behave as normal?
I haven't tested it

[yaacov]

🔥 yes, works for me :-)

Screencast.from.2023-09-06.17-24-09.webm

[bennypowers]

Modules always run in strict mode

As well, all code in class bodies runs in strict mode

[bennypowers]

Modules run in strict mode and are always deferred

[sleviim]

@nirs wdyt?