JS + CSS Dependencies Audit

[JuanVqz]

I had the bots generate a comprehensive audit to know what our current status is and a plan to upgrade/migrate some jQuery plugins and CSS for the HTML Report.

I have a plan to create some sub-issues from here (or if we could use the feature board), it would be nice.

I'd like to know what you think @faisal, @etagwerker

Scope

This report covers front-end JavaScript and CSS libraries bundled under:

• lib/rubycritic/generators/html/assets
• lib/rubycritic/generators/html/templates
• lib/rubycritic/generators/html/assets/javascripts/application.js

Inventory (in use)

JavaScript

• jQuery (vendor/javascripts/jquery.min.js)
• Bootstrap JS (vendor/javascripts/bootstrap.min.js)
• Highcharts 4.0.1 (vendor/javascripts/highcharts.src-4.0.1.js)
• Google Code Prettify (vendor/javascripts/prettify.js)
• jQuery plugins:
  • tablesorter (vendor/javascripts/jquery.tablesorter.min.js)
  • filterTable (vendor/javascripts/jquery.filtertable.min.js)
  • scrollTo (vendor/javascripts/jquery.scrollTo.min.js)
  • timeago (vendor/javascripts/jquery.timeago.js)

CSS

• Bootstrap 3.3.7 (vendor/stylesheets/bootstrap.min.css)
• Font Awesome 4.7.0 (vendor/stylesheets/font-awesome.min.css)
• Prettify default (vendor/stylesheets/prettify.css)
• Prettify custom theme (vendor/stylesheets/prettify.custom_theme.css)
• App styles (stylesheets/application.css)

Where each library is used

Templates

• Bootstrap classes (navbar, container-fluid, row, col-*, table, btn, glyphicon, pull-*) across:
  • templates/layouts/application.html.erb
  • templates/overview.html.erb
  • templates/code_index.html.erb
  • templates/code_file.html.erb
  • templates/smells_index.html.erb
  • templates/simple_cov_index.html.erb
• Font Awesome icons in sidebar/header:
  • templates/layouts/application.html.erb
• Prettify hooks:
  • templates/code_file.html.erb (<code class="prettyprint linenums ...">)
• jQuery timeago hook:
  • view_helpers.rb (<time class='js-timeago'>)

application.js

• Highcharts: scatter + pie charts
• jQuery DOM operations + plugins:
  • scrollTo for line highlight
  • tablesorter for sortable tables
  • filterTable for table search
  • timeago for relative timestamps

Update / replacement difficulty (easiest -> hardest)

1. jquery.scrollTo

• Use: smooth scroll to highlighted line
• Update difficulty: low
• Vanilla alternative: element.scrollIntoView({ behavior: "smooth" }) + offset handling

2. jquery.timeago

• Use: “Updated X ago” timestamps
• Update difficulty: low
• Vanilla alternative: Intl.RelativeTimeFormat + a small helper

3. jquery.filtertable

• Use: table search filters
• Update difficulty: low
• Vanilla alternative: input keyup + row text matching; CSS highlight

4. jquery.tablesorter

• Use: sortable tables
• Update difficulty: low–medium
• Vanilla alternative: click headers -> sort rows with numeric/string parsing

5. prettify.js + prettify.css

• Use: syntax highlighting + line numbers
• Update difficulty: medium
• Alternative: pre-render highlighted HTML during report generation (removes client JS)

6. font-awesome 4.7

• Use: icons in sidebar/header
• Update difficulty: medium
• Alternative: inline SVG icons or a self-hosted icon set

7. jQuery (core)

• Use: pervasive DOM manipulation and plugin glue
• Update difficulty: medium–high
• Alternative: rewrite application.js to vanilla and remove plugin dependencies

8. Bootstrap 3.3.7 (CSS + JS)

• Use: layout grid, navbar, tables, buttons, glyphicons
• Update difficulty: high (major class/markup changes in v4/v5; glyphicons removed)
• Alternative: rebuild layout with custom CSS; heavy template changes required

9. Highcharts 4.0.1

• Use: chart rendering
• Update difficulty: high (jQuery adapter removed in modern versions)
• Alternative: Chart.js/D3 or a custom SVG/Canvas solution; rewrite chart init

Should we replace with vanilla JS / native CSS?

Recommended (low effort, high payoff):

• Replace small jQuery plugins (scrollTo, timeago, filterTable, tablesorter) with minimal vanilla JS.

Conditional:

• Replace jQuery only if the plugins above are removed; then rework application.js.

Not ideal to drop without a replacement:

• Highcharts and Prettify are not “native CSS/JS” features; replace with another chart/highlight library or pre-rendered output if you want to remove them.
• Bootstrap is deeply embedded in markup and layout. Removing it is a larger redesign.

Suggested phased approach

Phase 1 (easy wins):

• Replace scrollTo, timeago, filterTable, tablesorter with small vanilla modules.
• Keep jQuery temporarily for remaining code, then remove when unused.

Phase 2:

• Remove jQuery, rewrite remaining DOM logic in application.js.

Phase 3 (optional):

• Decide on Highcharts and Prettify strategy (upgrade or replace).
• Decide on Bootstrap strategy (upgrade to v5 or custom CSS refactor).

Why upgrade / reduce dependencies

• Security and risk: several bundled libraries are legacy and no longer maintained, increasing exposure to known vulnerabilities.
• Maintenance cost: fewer dependencies mean fewer version conflicts, simpler debugging, and smaller surface area to keep up to date.
• Performance: replacing small plugins with lightweight vanilla code reduces bundle size and page load time.
• Modern browser APIs: features like smooth scrolling and relative time formatting are now native, so legacy plugins provide limited extra value.
• Future-proofing: upgrading charting and CSS frameworks avoids tech debt and makes UI changes easier later.
• Product alignment: RubyCritic helps teams spot code quality issues and tech debt, so keeping its own front-end stack modern reinforces the tool’s mission and credibility.

Issue description draft (GitHub)

Title: Audit and modernize JS/CSS dependencies in HTML report assets

Background:
RubyCritic ships bundled JS/CSS assets for the HTML report UI. Several dependencies are legacy (e.g., Bootstrap 3, jQuery plugins, Highcharts 4, Font Awesome 4), which increases maintenance burden, security risk, and makes future UI changes harder. As a tool focused on surfacing tech debt, we should keep our own front-end stack modern.

Scope:

• Replace small jQuery plugins (scrollTo, timeago, filterTable, tablesorter) with vanilla JS equivalents.
• Remove jQuery when no longer needed by the report UI.
• Decide on a strategy for Highcharts and Prettify (upgrade or replace).
• Decide on a strategy for Bootstrap (upgrade to v5 or replace with custom CSS).

Why now:

• Reduces tech debt in the report UI while aligning with RubyCritic’s mission.
• Minimizes exposure to vulnerabilities in old, bundled libraries.
• Improves performance by dropping legacy dependencies and plugins.

Acceptance criteria:

• Report UI functions unchanged (charts, tables, filtering, navigation, syntax highlighting).
• No jQuery dependency remains in generated report assets.
• Dependencies are updated or replaced with modern equivalents.
• Documentation updated with the chosen approach and rationale.