Following a discussion with a colleague about how “necessary” jQuery is now-days, considering how far ES6 has come, I decided to conduct a small experiment: I would clone a live, functioning JS module and replace as much jQuery as possible (ideally all) with vanilla ES6.

TL;DR / TOC

• Select something
• Select something within a parent
• Add a CSS class
• Remove a CSS class
• Set an attribute
• Get an attribute
• Set a data attribute
• Get a data attribute
• Insert a text string
• Insert an HTML string
• Append an HTML element
• Append an HTML string
• Loop through an Array
• Loop through an Object
• Add an Event Listener
• Add a Delegate Event Listener
• Make an Ajax Request

Initially, I thought this would take the better part of an afternoon, including testing. Day two, still going…

While working my way through the cloned module, there have definitely been moments where I had to stop and hunt for the vanilla JS equivalent (jQuery sure can make one lazy!), as well as situations where I had to conduct small function tests to see if this would work to replace that.

Along the way, I am realizing that pretty much all jQuery functionality can fairly easily be replaced by vanilla ES6 (jQuery is, after all, just JS), but what I can see myself missing is the jQuery convenience…

No matter how comfy you get typing .querySelector, it will never be as easy as typing $… Not to mention having to know whether you need .querySelector or .querySelectorAll, and the fact that .querySelectorAll returns a NodeList instead of an array… And don’t get me started on the loss of function-chaining!

So, while jQuery certainly can be replaced, what remains to be seen is whether it should be… Yes, it is 30kb (minified), but is removing that additional weight and latency enough to warrant the additional coding time and code weight? No matter how frugal your code is, vanilla JS does take more code to write, which takes longer to type, and in the end makes your code base larger…

As of now, I am still enjoying the experiment, but more than once have I found myself thinking “You know, I should create a micro library to alleviate some of these pain-points, like creating my own $ selector, etc.” Then I immediately start to wonder how long it would take for that micro library to start approaching 30kb… :-)

Anyhow, below are a few of the work-arounds that I have found, documented mostly so that I can remember how to switch things later, but maybe some of you will find them useful, too!

• Select something

  // jQuery:
  $( '.something' );
  // ES6:
  // single item
  document.querySelector( '.something' );
  // multiple items
  document.querySelectorAll( '.something' );

  Documentation: querySelector, querySelectorAll

• Select something within a parent

  // jQuery:
  parent.find( '.something' );
  // ES6:
  // single item
  parent.querySelector( '.something' );
  // multiple items
  parent.querySelectorAll( '.something' );

  Documentation: querySelector, querySelectorAll

• Add a CSS class

  // jQuery:
  elem.addClass( 'className' );
  // ES6:
  elem.classList.add( 'className' );

  Documentation: classList, add

• Remove a CSS class

  // jQuery:
  elem.removeClass( 'className' );
  // ES6:
  elem.classList.remove( 'className' );

  Documentation: classList, remove

• Set an attribute

  // jQuery:
  elem.attr( 'attributeName', 'newValue' );
  // ES6:
  elem.setAttribute( 'attributeName', 'newValue' );

  Documentation: setAttribute

• Get an attribute

  // jQuery:
  elem.attr( 'attributeName' );
  // ES6:
  elem.getAttribute( 'attributeName' );

  Documentation: getAttribute

• Set a data attribute

  // jQuery:
  elem.data( 'attributeName', 'newValue' );
  // ES6:
  elem.dataset.attributeName = 'newValue';
  elem.setAttribute( 'data-attributeName', 'newValue' );

  Documentation: dataset, setAttribute

• Get a data attribute

  // jQuery:
  elem.data( 'attributeName' );
  // ES6:
  elem.dataset; // { attributeName: 'newValue' }
  elem.dataset.attributeName; // 'newValue'
  elem.getAttribute( 'data-attributeName' ); // 'newValue'

  Documentation: dataset, getAttribute

• Insert a text string

  // jQuery:
  elem.text( 'Something' );
  // ES6:
  elem.innerText = 'Something';

  Documentation: innerText

• Insert an HTML string

  // jQuery:
  elem.html( '<h1>Something</h1>' );
  // ES6:
  elem.innerHTML = '<h1>Something</h1>';

  Documentation: innerHTML

• Append an HTML element

  // jQuery:
  parent.append( '<a class="btn btn-success" href="' +url+ '">Sign up</a>' );
  // ES6:
  let elem = document.createElement( 'a' );
  elem.setAttribute( 'className', 'btn btn-success' );
  elem.setAttribute( 'href', url );
  elem.innerText = 'Sign up';
  parent.appendChild( elem );

  Documentation: createElement, setAttribute, innerText, appendChild

• Append an HTML string

  // jQuery:
  parent.append( '<a class="btn btn-success" href="' +url+ '">Sign up</a>' );
  // ES6:
  parent.insertAdjacentHTML( 'beforeend', `<a class="btn btn-success" href="${url}">Sign up</a>` );

  Documentation: insertAdjacentHTML

• Loop through an Array

  // jQuery:
  arr.each( (item), function{...} );
  // ES6:
  arr.forEach( item => { ... } );

  Documentation: forEach

• Loop through an Object

  // jQuery:
  obj.each( (key, value), function{...} );
  // ES6:
  for ( const key in obj ) {
      console.log(key, obj[key]);
  }
  // or:
  for ( const [key, value] of Object.entries(obj) ) {
      console.log(key, value);
  }

  Documentation: for…in, Object.keys(), Object.entries()

• Add an Event Listener

  // jQuery:
  elem.on( 'click', function(e) {...} );
  // ES6:
  elem.addEventListener( 'click', (e) => {...} );

  Documentation: addEventListener

• Add a Delegate Event Listener

  // jQuery:
  elem.on( 'click', 'div.className', function(e){...} );
  // ES6:
  elem.addEventListener( 'click', (e) => {
     if ( e.target.nodeName === 'DIV' && e.target.classList.contains('className') ) {
        ...
     }
  });

  Documentation: addEventListener, Event Delegation

• Make an Ajax Request

  // jQuery:
  $.ajax({
      url: 'https://example.com',
      method: 'post',
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(data),
      success: function( response ){
          ...
      },
      error: function( error ){
          ...
      }
  });
  // ES6:
  fetch( 'https://example.com', {
      method: 'post',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
  })
  .then( response => {
      ...
  })
  .catch( error => {
      ...
  });

  Documentation: fetch

Additional Resources

I found a few other similar resources, of course, some of which contained stuff I didn’t include, so I will link to them here; feel free to share your favorites too!

• https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
• https://youmightnotneedjquery.com/

Have any jQuery code that you need converted but isn’t addressed above? Feel free to share and I will see what we can come up with!

Happy coding,
Atg

Top⇪