There's been a lot of discussion lately about not needing to use any kind of library when writing JavaScript. Even JQuery. JQuery has been a staple in every app I've written since I first started writing JS apps four or five years ago. So I decided to give it a try and see if I could write an app without JQuery.
I've been working on building a library of classes in TypeScript to make it easier to work with HTML elements in my single page applications. So I set a goal of making this library not depend on any other external library, including JQuery. My other goal was that it would work for all browsers that support HTML5, including IE9. (One could argue either way that IE9 supports HTML5, at least minimally, and after this experience I'm starting to lean against.)
Things stated off pretty well. It's now very easy to do JQuery-like lookups to find elements in the DOM. I was feeling pretty confident that it was going to be easy to ditch JQuery. Then I ran into my first problem. I wanted to provide a method to get mouse event coordinates relative to the element they occurred in. You do this by getting the offset of the element on the page and subtracting that from the page coordinates of the mouse. It's easy to get the offset when you're using JQuery but not so much without it. I was able to figure it out with some help from the internet though and moved on.
From there everything was looking great. I actually went back and refactored one of my apps (Daylight Calculator) to use my library and chucked my reference to JQuery! It started to look like these guys were right. You might need to do a little extra work yourself but it is possible to write an app without JQuery.
Buoyed by my success I continued with developing my library without JQuery. I started working on a more complex application, one that did a lot of DOM manipulation and changing of CSS styles at runtime. Here's another area that JQuery excels at. When you start trying to do this stuff yourself you see that it's not so simple. There are new low-level things you have to know about like computed styles compared to declared. When you're using JQuery you don't have to care about any of that. It just works.
After figuring out the HTML element API I continued on my journey. And it was going great until I tested it in IE9. Then all of sudden everything broke. Seems that it's not that easy to change styles or classes in IE9 as it doesn't implement the standard HTML5 interfaces. Another problem I ran into was that IE9 actually changes the type attribute of an input element if it doesn't like it (e.g. "number" changes to "text") while I was depending on it not changing (other browsers only change it in the underlying API) . I was able to fix most these issues in my library as well with a little research. But at this point it's starting to look like a clone of JQuery!
So now I'm starting to think, "Why am I doing this again??" Should I just go back to depending on JQuery? Or should I just drop support for IE9 from my list of requirements? I really don't want to go back to using JQuery after all of the work I put into making it work without it. I would also like my library to work with IE9 but I don't have the time or desire to figure out all of these little quirks.
So are we ready to jump ship and say goodbye to JQuery? I guess it depends on the context. If you are doing really simple stuff in a modern browser, probably. If you are writing highly interactive single page apps with a lot of DOM manipulation maybe not, unless you like spending time figuring out how to make things work. Especially if you want to support older browsers. Although things are improving there are still some things JQuery does that we take for granted. Personally I like to spend my time writing apps and not worrying about low level stuff and nonsense.
