Sunday, June 19, 2011

Javascript Before jQuery

I get asked all the time how I learned as much as I have about jQuery.  And then answer really consists of 2 things.

1) I already knew Javascript really well.
2) I do a lot of jQuery Projects.

I really want to focus on number one.  Because jQuery makes coding javascript a lot easier, I find more and more new javascript coders, or new coders in general strictly using jQuery.  They even refer to jQuery as a programming language.  This of course is not true, because jQuery is just a javascript library.  But it demonstrates an important point that people are starting to skip a huge step in front end development.

jQuery is the most popular javascript library.  And IMO for good reason. But when people want to start making some kind of front end project, they turn straight to jQuery.  Now I won't say that "there are things jQuery can't do". But I will say that you shouldn't do everything in jQuery.

There are 2 main purposes of jQuery.
1) Simplify otherwise tedious javascript processes.
2) Handle cross browser craziness.

Basically something like $.post() for ajax makes it both simple to use and handles IE's differences with the XHR object.  What is the XHR object? Well if you started with Javascript you would know.

At any rate, lets talk about a few cases where you would NOT want to use jQuery.

1) Extreme speed without caring about browser compatibility.
Lets say you need to develop something for iPad.  Well you know there will only ever be 1 browser.  So you can write your javascript specifically for that, and not have to have jQuery do all it's extra stuff or if conditionals to check for IE and Firefox and opera and the rest. I'm not saying you have to, but if something in jQuery is being slow for you, maybe a loop is taking way too long, writing it in pure javascript can help.  Because with any javascript library there will always be SOME (maybe very small) latency because its not core  javascript, its a layer on top.

Its the same principal as, code will be faster in C than it is will be in PHP.

2) Element properties
This one I just found because I was doing something in jQuery I wasn't supposed to. This is actually correct behavior, but I really love this hack.  What I'm about to talk about is in this video

Basically this little plugin allows you set the "value" attribute on an html SELECT box (just like every other html input element) and it will select the correct OPTION in the drop down. So no need to load in PHP or anything, you can load the form data just like all its brothers and sisters. The problem though, is that jQuery's .val() and .attr("value") methods actually all call DOMElement.value.  Which, when set on a select box is actually the current value, not the value attribute.  Your not technically supposed to set a value on a select box because the OPTIONs  have the value, which is why jQuery isn't using the actual value attribute. So to get around this, you need to use plan javascript element.getAttribute("value") and that will work.  If I didn't know javascript I never would have gotten this hack to work.

3) Respect
You need to respect how much time you are saving by using jQuery instead of straight javascript.  Because it makes you appreciate the code more.  And I really believe that coding is an art form, and we are all artists.  Artist love their work and respect it, and understand it's roots. Take a look at this video I did on what doing AJAX looks likes WITHOUT jQuery. Its actually from the first time I learned about jQuery and jQuery Ajax.  I used to write out 20 lines of code for ajax.  And now its just 1 or 2 lines.  You really do appreciate what jQuery has done, and it I think it helps make you as a web developer want to make your clients feel that way about your creations. Respect.

4) Debugging
jQuery is software.  Like all software there are bugs. (What you write bugless code?) So what happens when something isn't working right? Or you need to do something that jQuery didn't write a nice little function for?  Your out of luck.  Better start learning the entire javascript language real fast now.  Which is going to seem incredibly hard now that you are used to jQuery.  And lets say something you want to do isn't working right, or is slow.  You could easily write it in javascript if you knew how, and move on with the project.

So long story short.  Its important to understand the core of something before you start using layers on top.  But we can't expect too much, this is how the world is going now a days.  We use computers on a daily basis but how many of us know how they actually work inside?  As time goes on, we as people tend to ignore how things became how they are, and I think thats not a good thing. We should always learn from the past, respect it, and appreciate why things are the way they are now.


  1. I recently started this series of books "Write Great Code: Understanding the Machine" for this purpose. This is a situation where the further you want to go to the root, the less resources (and video tutorials) there seems to be on it.

    I'm also guilty of learning jQuery before plain JavaScript, then picked up JavaScript after-the-fact. But jQuery is awesome in the fact that it's easy for beginners to jump into it, yet also has a ton of depth.

  2. Which javascript topics below are important before I start with jquery?

    Language Basics
    Variables, Scope, and Memory
    Reference Types
    Object-Oriented Programming
    Function Expressions
    The Browser Object Model
    Client Detection
    The Document Object Model
    DOM Extensions
    DOM Levels 2 and 3
    Scripting Forms
    Graphics with Canvas
    HTML5 Scripting
    Error Handling and Debugging
    Ajax and Comet
    Offl ine Applications and Client-Side Storage