Skip to content

Latest commit

 

History

History
442 lines (342 loc) · 9.85 KB

README.md

File metadata and controls

442 lines (342 loc) · 9.85 KB
Raw

You Don't Need jQuery

"You Don't Need jQuery" is based on You Might Not Need jQuery, but is updated to reflect new APIs, new methodologies, and better, more simplified examples.

It's 2018; Things Have Changed

10+ years after jQuery's initial release, the browser landscape has drastically changed.

The purpose of this is not to tell you that you shouldn't use jQuery, but rather to re-educate you on what exactly jQuery is useful for. The DOM, and other browser APIs, have been much better standardized, and many of the previous pitfalls of compatibility no longer exist. While jQuery is still useful, it is less so than before, and it's important for you--the developer--to be familiar with the underlying APIs that libraries are abstracting.

A lot of the new APIs and methodologies are much easier to understand, and are sometimes more coherent than those in libraries like jQuery.

[...] Please take a moment to consider if you actually need jQuery as a dependency; maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.

[...] Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, [modern] browsers are pretty easy to deal with on their own.

- YouMightNotNeedjQuery.com

Most of the APIs that I'll be showing can be polyfilled, meaning that if the browser is modern, and supports the APIs, it will use those, but if the browser is legacy, it will update the APIs with the new features, and allow all browsers to work.

Modern features that can be polyfilled for legacy browsers:

  • Promise
  • fetch
  • classList
  • Array.from
  • Object.assign
  • More...

Although a couple of the modern examples have more characters in their code, they should not deter you from trying to understand these new APIs. Read carefully, and try to understand what the code is doing so that you can better reflect on whether or not you should use a library.

AJAX GET

jQuery

$.ajax({
    url: '/path/to/json',
    success: data => {
        // use 'data' here
    },
    error: error => {
        // use 'error' here
    }
});

Modern | Using the fetch API and Promises

fetch('/path/to/json')
.then(response => response.json())
.then(data => {
    // use 'data' here
})
.catch(error => {
    // use 'error' here
});

New | Using async/await

try {
    const response = await fetch('/path/to/json');
    const data = await response.json();
    // use 'data' here
}
catch (error) {
    // use 'error' here
}

AJAX POST

jQuery

$.ajax({
    url: '/path/to/whatever',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(myObjectHere),
    success: data => {
        // use 'data' here
    },
    error: error => {
        // use 'error' here
    }
});

Modern | Using the fetch API and Promises

fetch('/path/to/whatever', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(myObjectHere)
})
.then(response => response.json())
.then(data => {
    // use 'data' here
})
.catch(error => {
    // use 'error' here
});

New | Using async/await

try {
    const response = await fetch('/path/to/whatever', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(myObjectHere)
    });
    const data = await response.json();
    // use 'data' here
}
catch (error) {
    // use 'error' here
}

Querying the DOM

via CSS selectors

jQuery

const myElement = $('.foo');

Modern | Using querySelector or querySelectorAll

const myElement = document.querySelector('.foo');
// or
const myMultipleElements = document.querySelectorAll('.foo');

Element's Class

add | remove | toggle

jQuery

$(myElement).addClass('foo');
$(myElement).removeClass('foo');
$(myElement).toggleClass('foo');

Modern | Using the classList API

myElement.classList.add('foo');
myElement.classList.remove('foo');
myElement.classList.toggle('foo');

Attributes

get | set

jQuery

const foo = $(myElement).attr('foo');
$(myElement).attr('bar', foo);

Modern

const foo = myElement.getAttribute('foo');
myElement.setAttribute('bar', foo);

Input's Value

get | set

jQuery

const value = $(myElement).val();
$(myElement).val('foo');

Modern

const value = myElement.value;
myElement.value = 'foo';

Text & HTML

jQuery

$(myElement).text('lorem ispum');
$(myElement).html('<span>lorem ipsum</span>');
$(myElement).append('<span>foo bar</span>');

Modern | Using native properties and insertAdjacentHTML

myElement.textContent = 'lorem ipsum';
myElement.innerHTML = '<span>lorem ipsum</span>';
myElement.insertAdjacentHTML('beforeend', '<span>foo bar</span>');

Data Attributes

jQuery

$(myElement).data('foo', 'bar');

Modern | Using the dataset API

myElement.dataset.foo = 'bar';

Element Styles

jQuery

$(myElement).css({ background: 'red', color: 'white' });

Modern

Object.assign(myElement.style, { background: 'red', color: 'white' });
// or
myElement.style.background = 'red';
myElement.style.color = 'white';

Append Child & Remove Element

append | prepend | remove

jQuery

$(myElement).append(anotherElement);
$(myElement).prepend(anotherElement);
$(myElement).remove();

Modern | Using remove

myElement.appendChild(anotherElement);
myElement.insertBefore(anotherElement, myElement.firstChild);
myElement.remove();

New | Using append and prepend as well

myElement.append(anotherElement);
myElement.prepend(anotherElement);
myElement.remove();

Event Listeners

add | remove

jQuery

$(myElement).on('click', myEventHandler);
$(myElement).off('click', myEventHandler);

Modern | Using addEventListener and removeEventListener

myElement.addEventListener('click', myEventHandler);
myElement.removeEventListener('click', myEventHandler);

Filter Elements

jQuery

$(myMultipleElements).filter('.some-class-here');

Modern

Array.from(myMultipleElements).filter(x => x.classList.contains('some-class-here'));

Find Elements

from single | from multiple

jQuery

const x = $(myElement).find('.foo');
const y = $(myMultipleElements).find('.foo');

Modern | (This one is probably not a great example...)

const x = myElement.querySelectorAll('.foo');
const y = Array.from(myMultipleElements, x => Array.from(x.querySelectorAll('.foo'))).reduce((a, b) => a.concat(b));

New | Using flat

const x = myElement.querySelectorAll('.foo');
const y = Array.from(myMultipleElements, x => Array.from(x.querySelectorAll('.foo'))).flat();

Each Element

jQuery

$(myMultipleElements).each((i, x) => {
    // use 'x' here
});

Modern

Array.from(myMultipleElements).forEach((x, i) => {
    // use 'x' here
});

New | Using for..of and entries

for (const [i, x] of Array.from(myMultipleElements).entries()) {
    // use 'x' here
}

Parent Element

jQuery

const parent = $(myElement).parent();

Modern

const parent = myElement.parentElement;

All Parents

jQuery

const parents = $(myMultipleElements).parents('.foo');

Modern | Using closest

const parents = Array.from(myMultipleElements, x => x.closest('.foo'));

Children

jQuery

const children = $(myElement).children();

Modern

const children = myElement.children;

Siblings

jQuery

const siblings = $(myElement).siblings();

Modern

const siblings = Array.from(myElement.parentNode.children).filter(x => x !== myElement);

Next & Previous Sibling

jQuery

const next = $(myElement).next();
const prev = $(myElement).prev();

Modern

const next = myElement.nextElementSibling;
const prev = myElement.previousElementSibling;

Hide & Show Element

jQuery

$(myElement).hide();
$(myElement).show();

Modern

myElement.hidden = true;
myElement.hidden = false;

This repo of knowledge is a work in progress; if you'd like to contribute, please submit an issue or a pull request.