Skip to main content

JavaScript without jQuery

Tags

JavaScript

In the last 6 months or so I have noticed that a lot of the JavaScript that I have been writing to perform DOM traversal, manipulation, and event handling has gone back to vanilla JavaScript.  Outside of writing Drupal themes I find myself not wanting to use jQuery at all.  So, what is happening here?  How did I go from a web developer that primary uses jQuery as his library of choice to completely removing it from my arsenal for everything that is outside of Drupal themes?  

In reflecting upon this concept I came up with three main catalysts that I think are responsible for this shift in thinking.  The first catalyst without a doubt is ReactJS.   I have been spending a lot of time writing React lately and in getting involved with writing components I find myself not wanting to include any jQuery non-sense into the mix.  React has support for animations, global event listening, and DOM Manipulation.  Using these features in React coupled with the power that vanilla JavaScript gives me already makes me not really even consider using jQuery while writing anything that includes React.

The second catalyst I found in my shift away from jQuery is me becoming too reliant on jQuery.  So what do I mean by this? I mean that myself as a web developer just was not thinking about what was happening when I was using jQuery methods like attr(), css(), and append().  These all are very simple methods that are relying on the jQuery library to perform when these all are very simple one or two line procedures in vanilla JavaScript.  I thought to myself, "WAKE UP," you are using a third party library for something that takes one or two lines!  This just did not seem efficient to me.

The third catalyst in shifting away from jQuery goes along with the second, and that is the file size of jQuery.  Currently, at the time of writing this post, the current minified library size of jQuery 1.11.3 is 96kb.  That is too large for a library that I am relying on for methods that can be easily replaced with vanilla JavaScript.  Libraries like React, while their compressed file size is larger than 96kb, provide much more value to the end product than simple utility methods like jQuery does.

Having said that, I do not want to sound like I am completely opposed to jQuery for every project.  Projects such as Drupal already load jQuery as part of it's core libraries so this becomes a good option when a situation arises that you need to communicate with Drupal core or a contrib module.  In my opinion, Ajax and xhr calls have always been one of jQuery's strong points.   Lately, I just feel that I really need to decide if I absolutely need jQuery or if vanilla JavaScript does just as good of a job for me already without loading a third party library.  Please let me know your opinion.

Logo referenced from: http://www.w3devcampus.com/javascript-w3c-course/

Member for

3 years
Matt Eaton

Long time iOS and server side team lead with a love for Python, Swift, ObjC, C, C++, networking, testing, network debugging, embedded development, technical writing, and research.

Comments

I will use jquery only the day it will be native. I dont need a wrapper for the ultimate language.

Michael

Wed, 07/08/2015 - 03:19 AM

Hi, this is interesting to me.
I am starting out learning how to code, and have got the basics of js down now. I am starting to look at python finding myself not wanting to get involved in understanding jquery. As someone who learns by understanding the mechanics of how stuff works, I do not want to simply import pre written lines to do what I want, I want to spend time understanding what I am writing in order to learn and am less interested in the final product at this stage.

Hello Micheal, I completely agree your thought process about making sure you understand the code you write as opposed to copying and pasting code together from examples. I think Python is a great language to learn as it can be used in just about all aspects of development. Thank you for the reply.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.