Skip to content

Instantly share code, notes, and snippets.

@warpech

warpech/jQuery.md

Last active October 4, 2015 15:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save warpech/9532784 to your computer and use it in GitHub Desktop.
Save warpech/9532784 to your computer and use it in GitHub Desktop.
Download ZIP
Blog Post 3 - jQuery
Raw
jQuery.md

Web Components from the perspective of a jQuery developer

This article is a homage to jQuery - a library that once was a great boost for the productiveness of thousands of web developers around the world. In the upcoming times, the benefit of using it will drop as web developers start to switch to the web standards, including Web Components.

Status quo

As of early 2014, current state of interactive web development heavily relies on established web standards - HTML, CSS and JavaScript, all of which have been subject to consistent iterative improvement during the last few years, with the support of all major web browser vendors.

As a report shows, 57.8% of all websites use JavaScript, of which stunning 93.2% use the jQuery library to enhance the development (source). There is a long tail of other libraries and micro frameworks that are being used instead, or in compliment to jQuery, but none of them has gotten close to the popularity of the jQuery.

jQuery has become the library of choice for the past 7 years by providing 3 major advantages:

  1. Levels the differences between major web browsers - now replaced with consistent JavaScript and CSS implementations
  2. A simple, easy to learn API - now replaced with JavaScript and CSS additions
  3. Extensive plugin ecosystem - facing a chance to be replaced with Web Components

Levels the differences between web browsers

In the times when Internet Explorer 6 ruled 90% of the users' desktops, the web developers were in a desperate need of maintaining code that runs both in Internet Explorer and web standards compliant browsers, such as Mozilla Firefox, Opera and early versions of Google Chrome.

jQuery since day one aimed at providing a consistent API that behaved the same way in all the browsers, handling each browser's quirks internally. This was a huge relief for the developer, who no longer needed to care about implementation details of a particular browser. It lead to a significant reduction of testing and bug fixing.

Since the release of IE10, all the major browsers support the web standards to the extent that lets them pass the Acid1, Acid2, Acid3 compliance tests.

What once was a great a major selling point of jQuery has become no longer significant, hence jQuery 2.0, released April 2013 dropped support for IE6-8 resulting in 15% file size reductiong and addmitedly loosing one if it's original purposes.

A Simple, easy to learn API

jQuery introduced a much simplified syntax over the regular JavaScript. With its short, multifunctional methods and the chainable flow of execution, it was possible to replace dozens of lines of JavaScript with just a single line of jQuery.

jQuery's expressive syntax has given inspiration to many APIs that are currently part of the standard JavaScript and CSS, being now natively implemented in browsers.

Other websites cover this in higher detail, but I will name just a few mostly used jQuery methods that now have a native implementation in browsers:

  • jQuery's $ function that finds elements in DOM using CSS selectors is being replaced with standard querySelector, querySelectorAll
  • jQuery's addClass, removeClass methods is being replaced with standard classList
  • jQuery's, each filter, map methods for array traversing are being replaced with standard forEach filter, map
  • jQuery's animate method mostly used to move the elements on screen is being replaced with more powerful and efficient CSS transitions

Using the native implementation of the above features means better performance and interoperability, so it is recommended over jQuery where possible.

Extensive plugin ecosystem

One can't argue that jQuery provides currently unbeatable collection of plugins that implement behavior and UI elements used in websites and web applications. The official jQuery Plugin Registry holds more than 2000 plugins, which is likely not even 10% of all jQuery plugins circulating around other places on the web.

A jQuery plugin can be inserted to any website given that:

  • the web developer loads the jQuery and the plugin file in the HTML <head>
  • all plugins on a page need to use the same version of jQuery, otherwise it gets very tedious (though not impossible) to integrate them
  • the web developer adds some JavaScript to the page in order to enable the plugin. Usually they also need to add some id or a classnames to the elements where the plugin needs to be executed. If the webpage content is dynamic (something is created on screen after the page is loaded), the web developer needs to make sure that the plugin will also work on the dynamically created elements, which is not always straightforward and requires learning how the plugin works

Web Components share some of the above steps but in a simpler way:

  • the web developer loads the shim library (such as Polymer) and the HTML import in the HTML <head>
  • all Web Components on a page need to use the same version of the shim library. Given that the shim library implements agreed standards, it is more likely that upgrading the library will not break the existing code
  • the web developer adds a Custom Element to the page, most likely without a single line of JavaScript. This is very important for the novice developers. Also, because of being first-class DOM members, Custom Elements may be dynamically added to the website and will work as fine as if they were included during the page load
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment