CSC/ECE 517 Spring 2022 - E2228. Refactor JavaScript on Expertiza: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
(Created page with "== Problem Statement== Refactor JavaScript on Expertiza for but not limited to the Assignment View == Background == Expertiza’s primary language for managing views is JavaS...")
 
No edit summary
Line 3: Line 3:


== Background ==
== Background ==
Expertiza’s primary language for managing views is JavaScript. However, these scripts are not well structured and present a large scope of improvement in terms of code quality and optimization.
Expertiza is a software project that uses peer review to produce reusable learning items. It also allows for the uploading of practically any document type, including URLs and wiki pages, as well as team projects.Expertiza’s primary language for managing views is JavaScript. However, these scripts are not well structured and present a large scope of improvement in terms of code quality and optimization.


== Issues with existing functionality ==
== Issues with existing functionality ==
Line 13: Line 13:


== What needs to be done ==
== What needs to be done ==
* Extract non-ruby js functions into a separate file.  
* Most JavaScript functions are present as part of erb files. The erb files that use JavaScript but do not use arguments that can be accessed by Ruby code have to be extracted and included as a JavaScript partial.
* Find a solution to get rid of the ruby part in the JavaScript and extract those functions out of the html file too.  
* For functions that utilize JavaScript and Ruby code, we have two choices
* Optimize the code so that it follows DRY principles.
  * Refactor the existing methods to ensure that it follows DRY, ensure functions are modular and follow Single Responsibility.
* Very few code comments present. Add comments for the functions, explaining what the method does.
  * Use an npm package called erb to inject erb code into JavaScript code.
* Introduce Single Responsibility Principle - A method/function should only have one purpose to fulfill (Read more about it here) and increase code reusability.
* Optimize all the code so that they follow DRY principles.
* Identify and fix functions are useless and do not serve any purpose.
* Documentation for each method and proper indentation is absent. Our aim would be to provide descriptive comments for each method as well as make code readable by properly indentation.
* Introduce the Single Responsibility Principle, which stipulates that a method or function should only be used for one reason and thereby increases code reuse.
* Identify and remove functions do not serve any purpose as well as remove unnecessary documentation/methods that have been commented out.

Revision as of 01:05, 11 April 2022

Problem Statement

Refactor JavaScript on Expertiza for but not limited to the Assignment View

Background

Expertiza is a software project that uses peer review to produce reusable learning items. It also allows for the uploading of practically any document type, including URLs and wiki pages, as well as team projects.Expertiza’s primary language for managing views is JavaScript. However, these scripts are not well structured and present a large scope of improvement in terms of code quality and optimization.

Issues with existing functionality

  • assignments/edit/_due_dates.html.erb -> 470 lines of JS.
  • assignments/edit/_rubrics.html.erb -> 400 lines of JS.
  • assignments/_general.html.erb -> ~200 lines of JS.
  • hasTeamsChanged has violated the DRY principle. It adds input fields and handles checkboxes hidden states in other views. Every UI element that depends on hasTeams? checkbox should add a listener in their own view's js file. (Refer assignments/edit/_review_strategy.html.erb line 203 for reference).
  • assignments/edit.html.erb -> 76 lines of JS

What needs to be done

  • Most JavaScript functions are present as part of erb files. The erb files that use JavaScript but do not use arguments that can be accessed by Ruby code have to be extracted and included as a JavaScript partial.
  • For functions that utilize JavaScript and Ruby code, we have two choices
 * Refactor the existing methods to ensure that it follows DRY, ensure functions are modular and follow Single Responsibility. 
 * Use an npm package called erb to inject erb code into JavaScript code.
  • Optimize all the code so that they follow DRY principles.
  • Documentation for each method and proper indentation is absent. Our aim would be to provide descriptive comments for each method as well as make code readable by properly indentation.
  • Introduce the Single Responsibility Principle, which stipulates that a method or function should only be used for one reason and thereby increases code reuse.
  • Identify and remove functions do not serve any purpose as well as remove unnecessary documentation/methods that have been commented out.