JavaScript Architecture: jQuery

12.13.2011

jQuery is not an application framework. It is a toolbox–a set of utilities. If it could receive the label of “framework” at all it would be a utility or widget framework–not an application framework.

In my experience and the experiences of others, far too many JavaScript noobs hear all about the powers of jQuery and how it can do this and that and pull rabbits out of a hat. I do not dispute its awesomeness. What follows, though, is that some developers feel it is the answer to all their problems–including architecture. They then start busting out apps only using jQuery with little or no thought given to architecture because, in their mind, they’re already “using a framework” or “using an architecture.” This may work for a brochure website with little interaction or state, but not for large, enterprise apps where greater structure is needed.

We’ll dig deeper into application frameworks, architecture, patterns, and all that juicy stuff later. For now, I just want you to have an understanding of where jQuery fits into the picture lest you stray before we get into the meat.

What does jQuery do?

It abstracts the mess that is the DOM. DOM stands for Document Object Model and consists of elements and element hierarchies that make up a web page. When manipulating elements on a page (form elements, containers, text, etc.), you somehow need to be able to find these elements, size them, position them, style them, animate them, add them, remove them, watch for events from them, and a plethora of other operations. Without jQuery, this is a mess. For one, the DOM and its APIs are quite poor in general. Second, standards love to be ambiguous and browsers love to stray from standards. jQuery abstracts this into simple-to-use APIs so you can be more efficient and waste less time dealing with browser inconsistencies and the dag-nasty that is the DOM.

jQuery also provides a great set of utilities for making ajax requests and dealing with objects, arrays, strings, and more. Many other utilities and widgets are built on top of jQuery including jQuery’s own jQuery UI.

Who uses jQuery?

jQuery is very popular. According to BuiltWith, jQuery is used on over 24 million websites. To avoid copyright infringement I won’t include their chart here, but I advise you to take a look if you’re interested. You’ll see that over half of the top 10,000 sites use jQuery and this number is growing at a very steady pace.

Content Delivery Networks

This popularity not only exemplifies itself with a thriving community but also reaps the benefits of exposure through a content delivery network. A CDN exposes assets at strategic places both geographically and network-topographically on well-tuned servers. This boils down to three points of awesome:

  1. The files will be delivered quickly.
  2. Some browsers limit the number of concurrent connections to a given hostname. A CDN will be a different hostname from that which hosts your main application assets resulting in additional concurrent pipes open for transferring data to your user’s browser.
  3. Browsers cache files based on their URL. If a user goes to Site A that loads its jQuery from CDN X and then navigates to Site B that also loads its jQuery from CDN X, the user’s browser will likely not have to load jQuery a second time since it can be retrieved from its cache.

Google provides the most popular CDN for jQuery. You can see the most popular libraries it hosts as well as the URLs you can use to load them here. Given that many of the web’s largest sites use the Google CDN for jQuery, it’s very likely your users will be able to take advantage of cross-site caching.

Many of the other libraries we will be talking about may not be hosted by Google, but are hosted by cdnjs.

<< JavaScript Architecture: Organization and Quality<< JavaScript Architecture: The BasicsJavaScript Architecture: Underscore.js >>

Tags: , , , , ,


Comments

12.14.2011 / Dustin Woodard said:

Aaron, your awesomeness never ends does it. First of all the way you take a loosy goosy concept such as JavaScript and grab it by the horns of what kind of bull it was ment to be! Love it!

It’s like the red headed step child that no one cared about and just needed some love.

I always look forward to your JavaScript post and have read all 2 of them. ;)

Looking forward to many more.

12.14.2011 / AaronHardy.com ยป JavaScript Architecture: jQuery | Architecture said:

[…] at 10:03 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 […]

12.25.2011 / Aaron Hardy said:

Thanks Doooostin.


Leave a Comment

Your email address is required but will not be published.




Comment