Do we need jQuery in 2018?

Tom Szpytman
Sep 27, 2018 · 2 min read

When I took over one of the projects I currently maintain, I was given a list of npm packages and was told that these shouldn’t be upgraded. As a rule of thumb, I always suggest that software developers keep their applications’ packages up-to-date. At the time, however, being new to the project, I didn’t have the domain-specific knowledge to resolve this package crisis. Fast forward a year, armed with the in-depth project knowledge I’d acquired, I decided to re-architect and re-structure the application. Part of this included getting rid of all version-specific and unnecessary package dependencies. The most time-consuming upgrade of all was removing the jQuery dependence, and as such, this blogpost lists a few of the jQuery/Typescript conversions I used.

Converting jQuery functions to native Typescript

Extracting text from an HTML string

// jQuery
$('<div>' + input + '</div>').text();
// Typescript
export const getPlainText = (input: string): string => {
const elem = document.createElement('div');
elem.textContent = input;
return elem.innerHTML;
};

Finding specific children

// jQuery
element.find('p > a')
// Typescript
element.querySelectorAll('p > a');

Adding an event listener

// jQuery
$(element).on('event_name', function() {
// Handler
});
// Typescript
element.addEventListener('event_name', function() {
// Handler
});

Parsing an HTML string

// jQuery
$.parseHTML(inputString);
// Typescript
export function parseHTML(inputString: string): Node[] {
if (inputString.indexOf('<') === -1) {
return [document.createTextNode(inputString)];
}

const parser = new DOMParser();
const doc = parser.parseFromString(`<tmp>${inputString}</tmp>`, 'text/xml');
const rootNode = doc.querySelector('tmp');
return rootNode ? Array.from(rootNode.childNodes) : [];
}

Replacing an element with a set of elements

// jQuery
$(oldElement).replaceWith(newElements);
// Typescript
export function replaceElementWith(oldElement: Node, newElements: Node[]) {
const parent = oldElement.parentNode;

if (parent && newElements.length) {
const elementsToInsert = newElements.reverse();
for (let i = 0; i < elementsToInsert.length; i ++) {
const elem = elementsToInsert[i];
parent.insertBefore(elem, oldElement.nextSibling);
}
parent.removeChild(oldElement);
}
}

Conclusion

Do we need jQuery then? The answer is most likely no. As always, there are likely to be some exceptions to this rule, but for the average Javascript project, the likelihood is that it’s overkill to bundle jQuery with a project just for the sake of a few functions. When using an external library in your project, it’s always worth questioning whether or not use of the library could be avoided. In the case of the particular project I maintain, jQuery was used only for a handful of its functions, all of which could quite easily be replaced by native Javascript functions.

Find more about Tom Szpytman at tomszpytman.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade