by Rich Hein

6 Things You Need to Know About jQuery

Jun 19, 20128 mins
Consumer ElectronicsInternetJava

Bringing together HTML5 and CSS, the jQuery JavaScript library greatly eases the pains of Web application development. Learn how using jQuery can improve load time, SEO and multimedia on your website. And did we mention it's free?

The uber-popular JavaScript library known as jQuery makes everything from eye-catching menus to advanced effects much simpler than ever before. It’s being used by some of the biggest and smallest names on the Web alike—Google, Dell, Netflix and NBC, to name a few, use jQuery to create some pretty amazing content. Why, you may ask? Well, it’s free, it’s open source and it lets developers do more in less time. Those seem like some pretty compelling reasons. But wait. There’s more.

Based on the manipulation of the HTML Document Object Model (DOM) and designed to simplify the client-side scripting of HTML, jQuery incorporates parts of HTML and CSS. Thousands of companies are on the jQuery bandwagon—and your company should be, too.

Let’s look at why jQuery is making such an impact on the enterprise level.

1. jQuery Promotes Simplicity.

Developers find jQuery intuitive and easy to learn—this library is built on shorter, simpler code, after all. With simple syntax and open coding standards, developers can shorten the time it takes to deploy an application or site.

In addition, developers don’t have to be experts in programming or Web design to create great styles for your site. Any developer who has spent hours coding and testing CSS files will surely appreciate the simple implementation that jQuery brings to the table. There’s also a set of robust jQuery UI components that developers can plug into their websites.

2. jQuery Elements Display Even When JavaScript is Disabled.

If Adobe Flash isn’t installed on any given browser, certain parts of the page may render incorrectly, if they render at all. This is not only unpleasant for the user; it forces developers to spend extra time “coding” for the browsers that lack the Flash plug-in, which adds to development time.

Analysis: Adobe Flash vs. HTML5

Not so with jQuery. Manipulating the HTML DOM has become the most widely accepted practice of manipulating a Web page so content will be rendered even if JavaScript is disabled in the browser. Since the HTML DOM is always present, there’s no more worrying about browser settings either.

Furthermore, developing using jQuery can reduce instances of HelpDesk tickets. Your helpdesk will appreciate that your developers are coding proactively to avoid dreaded “browser crashes.”

3. jQuery Easily Integrates With the Visual Studio IDE.

NuGet is a Visual Studio extension that makes it easy to add, remove and update libraries and tools in Visual Studio projects that use the .NET Framework. NuGet has been around for years, and it’s a trusted source for developers to exchange and develop packages for Microsoft Visual Studio.

Visual Studio 2010 supports the integration of the jQuery library via the “Manage NuGet Packages” dialog box. This activates the Intellisense feature of Visual Studio, which gives the developer immediate access to jQuery methods and syntax without having to leave code view to do research. There isn’t a better tool to work in a Microsoft-based .NET environment.

In general, most .NET developers use Visual Studio and are familiar with NuGet. This is part of the reason why jQuery’s popularity continues to grow with .NET developers. With the addition of the jQuery mobile theme for Windows, you now have all the development benefits of the jQuery library available for the Windows Phone platform.

Microsoft is showing that it’s serious about HTML5, which includes a lot of jQuery elements, by promoting the use of jQuery libraries that the HTML5 crowd has adopted. Microsoft is encouraging the use of jQuery—not only in mobile development but also in new Metro-style UI apps.

4. jQuery Makes Animated Applications Just Like Flash.

Flash developers are not cheap. Developing in Flash requires a huge learning curve; for the average developer, it can take years of practice to be able to create the movie-like creations that made Flash famous. On the other hand, jQuery is free and requires only the knowledge of JavaScript and HTML.

Let’s say you can afford your software and your Flash developer. He or she still has to code for browsers and platforms that don’t support Flash and for audiences that will not be able to view your Flash content. This is one of the biggest drawbacks of building a Flash-only website—and one of the biggest advantages of building in HTML 5.

Meanwhile, jQuery uses a combination of CSS, HTML, JavaScript and Ajax. These are all markup-based technologies that are meant to work well together. This means you can apply an optimization strategy to your site without having to make special adjustments for technologies such as Flash. Bottom line: you can achieve great-looking effects that will keep your audience engaged.

For interesting examples of the kind of animation that can be achieved using HTML5 and jQuery, check out the feature HTML5 Websites: 10 Flash Killing Examples.

5. jQuery Pages Load Faster.

Google and other search engines using page load time as one of the many factors affecting SEO. (More on that later.) For this, and many other, reasons, every developer should strive to make code as light and concise as possible.

The best way to do this is to reduce the size of your code. If your site is coded with an HTML and CSS base, you can easily make uniform adjustments to your code that will reduce the size. Like CSS, jQuery files are generally stored separately from the Web page itself. This lets developers make modifications across the entire site through one central repository instead of search through folder structures. This is a core benefit of CSS coding—and it is a proven success.

In addition, jQuery gives you the option of loading Div tags only when you need them. If you are taking measures to improve the speed of your website, then you may consider loading only the necessary Div tags needed for your page load event. This way, you can display only what a user needs to see right away and have the rest of your division elements load as they are needed.

6. jQuery Can Be SEO Friendly.

You may have the most appealing site, but is it worth it if you sacrifice style for SEO? The way you code your site greatly affects the way it can be found in Google, Bing and other search engines.

As noted, jQuery can be optimized for search engines, and there are a lot of plug-ins available to aid developers in this task. Embedding your jQuery elements using unordered lists is an SEO friendly practice that works well.

For example— Render your jQuery output here

The unordered list is a classic HTML tag that has been around for years—search engines will pick up or recognize tags much faster than a custom element or tag—and will still be utilized in HTML5.

Another SEO advantage of the HTML5-jQuery combo that’s worth mentioning is that animations can be loaded with keywords that can be read by search engines.

Why You Need jQuery

Let’s recap some of the advantages to using jQuery in your next Web development project.

  • The price is right. The jQuery library is free.
  • It’s light. Since jQuery pushes content to the client, it therefore reduces the wait time for server response. Plus, it’s smaller than Flash, so it results in smoother playbacks and less errors.
  • It works anywhere. HTML5 is cross-browser compatible—it will work on any browser, mobile phone or tablet, and even on Apple devices.
  • There’s a low learning curve. Since it’s based on plain old JavaScript, developers can learn jQuery fast.
  • Finally, jQuery is SEO friendly and CSS3 compliant.

Slideshow: Beyond jQuery: 17 JavaScript Tools for the HTML5 Generation

In the future, your company will have to deliver content to a variety of different platforms, including desktops, tablets and smartphones, not to mention the advent of smart TVs and other connected devices. The 1-2 punch of HTML5 and jQuery is one of the best solutions for this type of development.

Since jQuery is a major component of HTML5, it is worth the time, money and effort for your developers to learn jQuery now. This library can deliver stunning effects with little coding—and, with more and more HTML5 integration, it will be a huge part of the future of Web development. If your goal is to build a site or Web app that is engaging and interactive, then jQuery is a necessary tool for your toolbox.

Richard Hein is a writer, editor and web developer with more than 15 years in the Web development field. You can connect with him via LinkedIn or email. Follow everything from on Twitter @CIOonline, on Facebook, and on Google +.