Executive Summary

  • Faster site: Pages load quicker and feel more responsive, improving customer experience and conversions.
  • Fewer glitches: Modern tools reduce random UI bugs, broken forms, and carousel issues.
  • More reliable forms: Submissions, uploads, and live updates work more smoothly (fewer lost leads).
  • Better mobile experience: Cleaner, modern code works consistently across phones and tablets.
  • Improved SEO/Core Web Vitals: Speed and stability help rankings and paid ad quality scores.
  • Stronger security: Old code and libraries are removed, lowering vulnerability risk.
  • Quicker feature delivery: Developers ship changes faster with less rework.
  • Lower maintenance cost: Less legacy code means less time fighting build problems.
  • Future‑proofing: Positions us to upgrade to Rails 8 and adopt modern tools without disruption.
  • Easier hiring/onboarding: Modern stack is familiar to candidates, reducing onboarding time.

Frontend Modernization Plan (Rails 7 → Rails 8-ready)

This guide prioritizes removing Rails UJS and jQuery-era dependencies first, while keeping the existing Webpack build intact. The goal is to reduce complexity and risk, and to get the codebase ready to switch to Vite Ruby with a short, low-risk cutover when we choose to do so.

Objectives

  • Remove Rails UJS and consolidate on Turbo 8 + Stimulus.
  • Remove jQuery dependency and migrate off jQuery-based plugins.
  • Keep Webpack as-is during modernization (no parallel build system).
  • Prune outdated packages and loaders to minimize the future cutover surface area.
  • Establish a clear “Ready for Vite” checklist.

Local environment

  • Node: >= 22 via mise
  • Yarn: v4 with nodeLinker: node-modules (avoid PnP breakage with older libs)
  • Rails 7 in development, HTTPS local hosts:
    • Main site: https://www.warmlyyours.me:3000
    • CRM: https://crm.warmlyyours.me:3000

Add to .yarnrc.yml (if not present):

nodeLinker: node-modules

Build command (unchanged while on Webpack):

eval "$(mise activate zsh)" && yarn build

Phase 1 — Remove Rails UJS and consolidate on Turbo/Stimulus ✅ COMPLETE

Rails UJS (@rails/ujs) has been fully removed. All forms and links use Turbo Streams/Frames.
No remote: true, local: true, or data-remote attributes remain in views.

Phase 2 — Remove jQuery and plugin dependencies ✅ COMPLETE

jQuery has been fully removed from both WWW and CRM bundles:

  • All $(...), jQuery(...), $.ajax, $.getJSON calls converted to vanilla JS and fetch()
  • jQuery UI replaced with SortableJS, Tom Select, and native Bootstrap components
  • Slick Carousel replaced with Fancyapps Carousel (@fancyapps/ui)
  • Select2/Chosen replaced with Tom Select
  • File uploads use Uppy
  • jQuery Timepicker replaced with Flatpickr
  • jQuery UI Accordion replaced with Bootstrap 5 Collapse
  • jQuery UI Autocomplete replaced with vanilla fetch-based implementations
  • blueimp-tmpl retained (zero jQuery dependency)

Phase 3 — Prune packages and Webpack loaders ✅ COMPLETE

Removed from package.json:

  • @rails/ujs, jquery, jquery-ui, jquery-bridget, infinite-scroll
  • slick-carousel, select2, select2-bootstrap-5-theme, chosen-js
  • blueimp-file-upload, dropzone, autosize, domurl

Webpack config cleaned: no jQuery ProvidePlugin, aliases, or vendor chunk groups.

Current package.json retains: Turbo, Stimulus, Tom Select, Flatpickr, Uppy,
Grid.js, Intl Tel Input, @fancyapps/ui (Carousel + Fancybox), blueimp-tmpl.

Phase 4 — Validation and readiness for Vite Ruby

Run checks

  • Build succeeds: mise exec -- yarn build
  • Pages function without jQuery/UJS (WWW and CRM critical paths).
  • No Webpack-only plugin dependencies remain (besides core Webpack itself).

Ready-for-Vite checklist

  • Rails UJS fully removed; Turbo in place.
  • jQuery and jQuery plugins removed or isolated behind Stimulus replacements.
  • CSS/JS imports are standard ESM (no loader-specific hacks).
  • Dynamic import() works as expected in Webpack.
  • No reliance on Webpack manifest helpers in ERB (or plan to replace).

Cutover plan (when we choose to switch)

  1. Add vite_ruby gem and vite devDeps. Configure HTTPS dev server to match www.warmlyyours.me:3000 and crm.warmlyyours.me:3000.
  2. Create Vite entrypoints mirroring www and crm bundles; wire layouts with vite_client_tag/vite_javascript_tag.
  3. Verify HMR/fast refresh in dev; run vite build in CI; then remove Webpack.

Testing plan

Manual regression (critical flows)

  • WWW: home carousel/landing pages, product galleries, contact forms, cart and checkout steps, intl-tel-input formatting, lightboxes.
  • CRM: search/autocomplete, image library infinite scroll, file uploads, date/time pickers, presence timer, tabs.

Automation

  • Keep Minitest for server behaviors. For UI: smoke-click key forms/pages using Capybara where possible; add simple stimulus-driven unit tests only where logic warrants.

Command snippets (reference)

Build and verify:

mise exec -- yarn build

Rollout status

  1. Phase 1: Remove Rails UJS COMPLETE
  2. Phase 2: Remove jQuery and plugin dependencies COMPLETE
  3. Phase 3: Prune packages/loaders COMPLETE
  4. Phase 4: Validate and mark "Ready for Vite" — in progress

The remaining work is Vite Ruby cutover: ESM-only imports, removing Webpack manifest reliance, and configuring Vite dev server.