Recovering From jQuery

I started learning jQuery more than 10 years ago. I needed to implement Ajax and make pages more dynamic - or so my boss regurgitated at meeting one day. I had been toying with HTML since the stone age (1996) and started learning PHP/MySQL because our simple site just had to have it.

But JavaScript? Really? I hated it! I tried to get some stuff done with it during the IE 4/Netscape 4 browser wars, but it was not easy and I really didn't want to mess with it. Ever.

I found the simplest setup for an Ajax call I could find (roughly 20 lines of code, I think) and started making requests to PHP. I had PHP render all the HTML which I passed back and dumped via .innerHTML... Ah, the good ol' days. (lol)

A lot has changed since then, primarily finding and learning jQuery -- which led to me landing my current position.

Little did I know I was walking into a hornets' nest with this Backbone.js/jQuery project. It had already been in production for a year or two and I was told to never, ever, under any circumstance, update any of the existing libraries, especially jQuery (because, in the past, everything broke).

That was all well and good, until a client ran a scan for vulnerabilities on our system. Oops! I was now told jQuery (1.7 at the time) had to be updated, as well as any and all libraries that could be updated. This, ladies and gentlemen, was not fun.

I had already started playing around with React and was looking at Angular. I saw that jQuery wasn't really something people were (intentionally) working with these days, that plain old JavaScript was better (and easier to use) than it used to be!

Now that all of our libraries have been updated and our potential client is our actual client, I have decided to refactor as much/many of our views as I can without the use of jQuery. I started out just using some arrow functions, changing var to let||const, changing $ to document.querySelector, and .html() to .innerHTML. I'm currently writing mini-libraries to replace jQuery UI (among others).

I am learning so much doing things this way. (The first thing I learned was that I didn't know JavaScript, I just knew jQuery.)

However, I'd be remiss to not leave you with some of the resources that have really been helping me:

• Moving from jQuery
• (Now More Than Ever) You Might Not Need jQuery
• From jQuery to JavaScript: A Reference
• MDN :: JavaScript (Invaluable!)

I would love to see what resources/methods others have incorporated to make this change. Please comment with your story/path/whatever!

*Please don't bother commenting with rants about not upgrading earlier.

Check out Refactoring jQuery to continue this journey with me.

Comments

[Jannis Jorre]

Just dropping in to say that you shouldn't use .innerHTML unless you can be 100% sure that what you'll insert is safe. XSS (Cross-site-scripting) is a very relevant attack vector.
Of course if the whole site is built on it, it's hard to migrate to .innerText, because it's just not a replacement. But still, .innerHTML opens up your app to all sorts of issues.

(Classic example attack:
Site's behavior: user enters information like their username, sends it to server, server responds with HTML including that username which is inserted using .innerHTML.
The attack: simply an added <script>...</script>-Tag, which can now wreak hammock on the site. Not very interesting if it's only rendered to the same user, but extremely interesting if the username is rendered into the markup of the page while another user is logged in (or even better: is logging in, so the script could read the password).)

Even better than .innerText would be appendChild and friends, of course, but that's more advanced.

Thanks for all the links! I'll pass them on whenever someone tells me how much easier jQuery is compared to JS😜