Introduction

Introduction to jQuery and Design Patterns.

jQuery is a powerful library that lets you write less and do more.  It's source code reveals numerous Modern and Classic Design Patterns and Idioms.



Overview


jQuery is by far the most popular JavaScript library in use today; 60% of the 10,000 most visited websites use it. The total number of deployments worldwide is around 20 million websites.

jQuery is cross-browser (supporting all popular browsers) and is designed to simplify navigation of the HTML document, select DOM elements, and make changes to the web page. On their website the authors state: "jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development". This describes it well.

It has been referred to as a write less, do more library which is absolutely correct. For web app developers the pre-jQuery days were considerably harder. Just to be able to select and manipulate elements on a page required a lot of messy code, especially in scenarios where multiple browsers and browser versions needed to be supported.

The jQuery selector syntax is based on CSS selectors which makes it succinct and highly effective. It takes very little code to select a complex set of page elements. Most web developers are familiar with CSS so that made the transition to jQuery relatively easy and painless.

The jQuery library is unique in that it focuses almost entirely on HTML manipulation. Other popular libraries are usually broader in scope, such as providing MV frameworks, data binding, HTML templating, and/or utility type functionalities. Many client side web projects use jQuery in combination with one other significant library, such as Backbone, Ember, or ExtJs. This is also true for modern HTML5/CSS3 projects (by the way: jQuery is fully CSS3 compliant).

Another advantage of using jQuery is that there is very strong community support. The library is maintained by an active group of JavaScript developers.

In this section we cover jQuery design patterns. We will dig into jQuery's source code and explore the patterns that have been used to build the library. There are many. You can learn from these and use the exact same patterns in your own projects whether you use jQuery or not. The best way to become an expert developer is to read and learn from code written by other expert developers.

Obviously, the developers of jQuery did not set out to cram as many patterns and best practices into their code as possible, but it is remarkable how many have been applied while building this powerful library. A real testament of what can be accomplished with patterns.

To get started we suggest you download the jQuery source code. It comes as a single JavaScript file with roughly 10,000 lines of code (including comments). Although jQuery is distributed as a single file, this is not how it is maintained. In github.com, the repository for jQuery, you'll find that the code base is partitioned in about 25 separate JavaScript files organized by functionality. This makes sense or else development and maintenance would be a nightmare.

Once downloaded, open the jQuery source file in your favorite editor. You will quickly recognize several commonly used JavaScript patterns. Scrolling down the file you may discover a few more. In the next several pages we will locate, identify, and discuss these patterns and best practice techniques. Again, learning from the masters is the best way to becoming an expert JavaScript developer yourself.



Module