Do you need really need jQuery anymore?

October 20, 2020 2:17 pm Published by Leave your thoughts

This jQuery Ajax was the very first jQuery API I had learned to use some 10 yrs. ago.

$(document).ready( function() {
  $( "#sidebar" ).load( "sidebar.php" );
});

And I’ve used .load API on countless projects. Few years ago, I had built my first WordPress theme/site without any jQuery for my home page at hackya.com. And I had struggled to replace .load as I’ve found XMLHttpRequest hard to use.

A “simple” example in the above link consists of 30 lines of code!! That’s simple? Seriously? haha

Anyhow, back then, fetch API, which is simpler and easier to use, was not being supported by any Microsoft browsers and it really couldn’t be used for production sites or apps.

Google’s Introduction to Fetch API

Well, since Microsoft had adopted Chromium for Microsoft Edge, fetch API has become a real viable option on a production site/app.

Can I use looks beautiful for fetch API now.

And in fetch API, I can load the content this way.

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("sidebar.php" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("sidebar").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
} 

Not quite an one-liner but hey, this is much less headache than making a XMLHttpRequest.

Below is XMLHttpRequest example:


function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('sidebar')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "sidebar.php", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

I just can’t get used to XMLHttpRequest. I am just glad I can stick with Fetch API.

I write this because I am currently working on a pretty large project as a project manager & a front-end lead. And one of my teammates (who is a back-end guy) was wondering why I don’t use jQuery.

“Doesn’t jQuery make your life easier?”, he asked. sigh…

“Well, using Bootstrap would also make my life easier but I don’t use it because…”

Well, that’s for another blog post. I need to get back to work.

Tags: , , ,

Categorized in: ,

This post was written by hackya

Leave a Reply

Your email address will not be published. Required fields are marked *