jQuery is a JavaScript library which can be included in web pages to make JavaScript programming on the page easier. Do you need it? Is it worth it?
This article presents an introduction and “both sides of the aisle” view of the technology and what it can provide.
Often programmers can include libraries “for the sake of it” which leads to bloatware.
Doing things for the right reasons and used in the right ways is sensible.
When you go on holidays do you literally pack the kitchen sink? You might need a sink?!
The right tool for the job is what jQuery represents, so knowing what you need where is the most important first step.
- Some basics
- The highlights
- Drawbacks
- Get building
[read more=”Read more” less=”Read less”]
Some basics
Web page basic technologies
To make the most of a technology stack you need some tools.
A web page has three primary technologies. Basic HTML (HyperText Markup Language) which allows you to construct a document.
HTML uses tags. For example <i>Hello World</i> Produces italics Hello World.
To save time in terms of making things look pretty there is a second styling language called Cascading Style Sheets (CSS).
So combined a paragraph tag with some style <p style=”color=red;”>Hello World</p> to get
Hello World
So now we have a pretty document new we want to have the ability to change things and this gives us a third technology.
This technology is a programming language. JavaScript, which is very different from the programming language Java.
JavaScript allows you to make things change on the page dynamically. Imagine a book. After it’s printed, it’s set.
With JavaScript you can change anything in the book after it’s printed. This makes JavaScript useful and enables advanced capabilities.
jQuery is written in JavaScript.
Playing with a DOM
So we have three technologies already in the mix : HTML, CSS and JavaScript.
The program you use to surf the Internet is called an Internet browser or just browser for short. There are many varieties of browser.
The most common are Internet Explorer, Mozilla Firefox, Google Chrome, Opera Opera, Apple Safari.
Because JavaScript can change the HTML and CSS dynamically it needs a mechanism to manipulate it.
When you open a tab or new browser window the entire contents are grouped together into something called the DOM or Document Object Model.
Each DOM enables JavaScript to change things. JavaScript basically gives the DOM instructions on what to do.
The browser manages the DOM and makes the changes as instructed. The concept of a DOM is common across all browsers.
Yet how you interact when changing things in a DOM results in browsers doing things slightly differently.
jQuery makes working with the DOM easier.
Inclusion or including
So if you’ve reached this point you have the five most important concepts. HTML, CSS, JavaScript, Browsers and the DOM.
When you start with a blank document there is quite a bit of building before anything appears on the page.
If you have a lot of web pages in your website, this results in a lot of management.
Let’s say you like the background of your web pages blue. So you build 3 pages blue.
After a while you decide to change to red. You have 3 pages to change, not one.
There has to be easier management surely? This is where including files becomes useful.
If you have a CSS style sheet in a separate document. This document says “the background is red”
On pages 1, 2 and 3 you don’t mention colour, but you include the CSS sheet. Each of the pages background becomes red.
Yet when you want to update, you only have to change 1 file.
This is the basic principle of reusability.
This ability to include allows you to stock pile CSS styles and javascript programming so they can be easily reused.
You include jQuery in a similar manner to how you include CSS styles.
So where does jQuery fit in all this?
Like the CSS include, jQuery is a JavaScript file.
It has a ton of programming work already done in JavaScript.
So if you include jQuery on your page, you get all the functions available to you.
What functions and how do they help?! Off we go.
The highlights
Not all browsers are the same
Cross browser compatibility is the bane of web programmers lives. What is that?
You write some JavaScript code, test it and it works. However that is just the start.
Your code now needs to be tested in EVERY browser your customers / viewers use.
That means not just the current browser but historical versions as well!
For example, testing in Internet Explorer, 6, 7, 8, 9, 10, 11 and Edge don’t all act the same way.
Sometimes you have to write code for specific versions.
jQuery can hide some of these headaches as they’ve done the different versions of the same code for you.
Different versions of jQuery hide the challenges of some cross browser compatible programming.
It’s not a perfect fix but it can help speed things up a lot, as using jQuery can save your testing.
They’ve done it for you.
Saving time
So what else have they done for you?
There are a host of functions and capabilities all available in the library.
For some functionality five lines of jQuery are equivalent to 25 lines of conventional JavaScript code.
This means less code for the developer, smaller web pages and faster loading times.
Events
When HTML started it focused on documents. The dynamism happens when someone clicks something.
If something happens this is called an Event.
Scroll up, scroll down, click something, hover over something, move something. These are all events.
The programming language allows you to say what happens when this event occurs.
When the user clicks this link, do this. If the user hovers over this text, do that.
jQuery in a very cross browser way makes it much easier for programmers to add actions to events.
Browsers implement events in very different ways sometimes. Quite often code that works for Chrome doesn’t work for IE.
Yes you can do it without jQuery but the cross browser compatibility of jQuery makes this a big selling point.
Events make websites cool and interesting.
The jQuery community
jQuery is free open source code which means any person or company can use it.
As a result a lot of programmers who have built cool tools and features based on it.
Most share their solutions for free, while some licence the solutions commercially.
Libraries built from other libraries …
Here are some of those that are based on jQuery.
- jQueryUI is about user interface effects, such as dragging, dropping, etc.
- jQueryMobile has a host of features to make websites work better across mobiles and computers.
- JQWidgets is a commercial library of widgets built originally on jQuery.
- Creativebloq list 20 others
Learning to make the most of jQuery has become the topic of many training books.
A Flash in the pan
Adobe is a multinational company and they invented a technology called Adobe Flash.
Flash allowed animation and specifically did a great job of working with events, animation and multimedia in web pages.
As programmers, we expect all of these features in a browser.
Dedicated technology controlled by one company does not help global growth.
jQuery allows a lot of what was previously only done in Flash to be easily done without Flash.
Everything done in jQuery is done as text.
As a result search engines such as Google, can read your page and know what’s going on.
When the content was wrapped up in Flash, Google can’t see what it is.
So for this reason it allows search engines see more of your content. This is called Search Engine Optimisation.
You don’t have to but making things easier to find is good for increasing traffic to your site. Every little helps.
Drawbacks
Programmer Dependence
Remember though that anything you can do in jQuery can be done in JavaScript without the whole jQuery library.
Programmers become dependent on jQuery and lose some of the understanding of how and why jQuery works.
jQuery is not universally compatible with all browsers.
When a programmer is learning “how to program” it is important to understand the fundamentals and not just rely on a specific version.
So how will your programmers deal with an issue where jQuery doesn’t work in that browser and they still need to work out a way to make it work.
When you get into the habit of reusability you expect things to be there and work.
If they don’t work it can cause significant issues and stress.
For security reasons Flash has been moved away from as HTML 5 and CSS 3 grow as free standards.
So being able to develop solutions without Flash is often the current preferred approach.
How load times affect your experience
When you fly by plane you bring bags with you usually. Those bags have weight limits.
Before you travel you work out what you need and what you don’t need.
What if there was no limit on the amount of baggage?
Invariably people would get lazier and bring things they wouldn’t need.
You might just see a kitchen sink packed.
When a web page has to load, it downloads the HTML, the CSS, the images and the code.
This all takes time. By including jQuery, it needs to load too.
So a basic web page with 5 paragraphs of Lorem Ipsum is 2.66 Kb
The jQuery library before you’ve used ANY of it is 241.59 Kb for version 2.1.3.
That’s about 500 paragraphs of Lorem Ipsum before using any of the code!
You can get a squished computer readable only version (minified) which is 82.34 Kb. Yet this is still around 200 paragraphs.
Do you need the kitchen sink?! Could you do what you’re doing in less space.
Developers can forget this idea of optimisation when faced with tight deadlines to get code to work.
Yet optimisation should be a programming stage after implementation to make the most of performance.
The smaller the amount of code, the faster the page loads and the better the experience for the user.
The trade off between speed and visually attractive is an ongoing debate between designers and programmers.
Not the only show in town
jQuery is a handy library for some tasks.
Undeniably it cuts down coding time and hides some cross browser issues.
It is not the only show in town though.
Prototype is a library which also deals with interacting with the DOM and around AJAX.
Sam Stephenson gave us prototype in 2005.
John Resig gave us jQuery in 2006.
Yahoo! in 2006 gave us YUI, the Yahoo! User Interface library. However its last update was 2014.
Mootools (My Object-Oriented Tools) came out in 2007.
There is quite a big comparison available of these libraries available on Wikipedia.
It’s not exhaustive though. Vanilla.js and Scriptaculous for example didn’t make it into the list.
Get building
Knowing what’s in your library though and why it’s there is important.
There is no need to pack the kitchen sink if you don’t need it.
However if smart packing helps to improve your experience, I’m all for adding it.
jQuery does add a lot of functionality to a web page to help programmers do more with less lines of code.
Please note the cross browser compatibility issues don’t disappear. jQuery does lessen some of them.
jQuery has definite uses in defined places. Knowing what to use where is key.
[/read]
