Remove JQ in 2025 and use native JS 🇺🇦🇺🇦🇺🇦 🤚🏻🤚🏻🤚🏻🤚🏻

[zdimaz]

Objective. Reduce jQuery dependency to decrease bundle size and technical debt, improve runtime performance and maintainability by adopting native JavaScript.

Key benefits

Smaller bundle → faster page loads.

Fewer external dependencies → reduced security/compatibility risk.

Modern browser APIs (Fetch, classList, closest, querySelector / querySelectorAll, Promise / async-await) cover most use cases.

Easier debugging and clearer codebase for the engineering team.

Migration roadmap

Code audit — locate all jQuery usage (DOM, AJAX, animations, third-party plugins).

Prioritize — classify by risk: business-critical vs low-impact scripts.

Build small internal utils — DOM helpers and an AJAX wrapper to avoid adding heavy dependencies.

Polyfills — include only if required by your supported browsers. In 2025, IE support is typically unnecessary—align with your browser support policy.

Incremental refactor — migrate files one-by-one, add unit/integration tests, use feature flags or phased deploys.

Testing — run E2E and regression tests across targeted browsers/devices.

Remove jQuery — once refactor and tests pass, remove package and rebuild.

Update docs & reviews — refresh internal guidelines and enforce a native-JS review checklist.

Practical replacements (quick snippets)

DOM ready: document.addEventListener('DOMContentLoaded', ...)

Selectors/classes: document.querySelector() + .classList

Delegated events: parent.addEventListener('click', e => { const it = e.target.closest('.item'); ... })

AJAX: replace $.ajax with fetch / async-await.

Risks & mitigations

jQuery-dependent plugins — replace, wrap, or isolate.

Insufficient tests — add coverage before removing jQuery.

Team adoption — provide training, coding standards, and PR templates.

`

DOM ready:

// jQuery
$(document).ready(() => { /* init */ });

// Native
document.addEventListener('DOMContentLoaded', () => { /* init */ });

Селекторы и классы:

// jQuery
const $el = $('.btn'); $el.addClass('is-active');

// Native
const el = document.querySelector('.btn'); el.classList.add('is-active');

Делегирование событий:

// jQuery
$(parent).on('click', '.item', handler);

// Native
parent.addEventListener('click', (e) => {
const item = e.target.closest('.item');
if (item && parent.contains(item)) handler.call(item, e);
});

AJAX → Fetch:

// jQuery
$.ajax({ url: '/api', method: 'POST', data: { a:1 } })
.done(res => ...)
.fail(err => ...);

// Native
fetch('/api', { method: 'POST', body: JSON.stringify({ a:1 }), headers: {'Content-Type':'application/json'} })
.then(r => r.json())
.then(res => ...)
.catch(err => ...);
`