JavaScript and jQuery: Web Apps as Highly Interactive as Desktop Apps

JavaScript and jQuery: Web Apps as Highly Interactive as Desktop Apps

odern browsers have greatly improved their performances, development tools, and compatibility. Even though most web sites still adhere to the page paradigm, rendering their content as it would appear in a newspaper or book, browsers can support highly interactive applications that rival traditional desktop apps.

Historically, developers who wanted to support complex or highly visual application interactions had to choose between desktop applications that were local to the user’s PC and ones built on top of browser plugins like Flash. Today, JavaScript has advanced enough to support this class of applications as well. Powerful JavaScript libraries provide abstractions from browser incompatibilities and low-level implementation details. They make designing interfaces that behave in a way familiar to the user (for example, drag-and-drop, selection and repositioning of visual items, panning, zooming, mouse gestures, and so on) simple.

This article demonstrates how to leverage this power using JavaScript and jQuery to deliver a new class of web applications. jQuery is the popular JavaScript library that abstracts away browser incompatibilities and offers a programmer-friendly interface based on CSS selectors and methods chaining. Included with the article are an example that mimics a full-featured desktop application (see this YouTube video) and the full source code.

For an explanation of the benefits of choosing JavaScript as a foundation for your web applications, see my previous DevX article.

jQuery in a Nutshell

To use jQuery in your web applications, you need only include one JavaScript file in your HTML code. You can then manipulate the Document Object Model (DOM), use CSS selectors to identify parts of the page that you want to affect, and apply mutator methods that modify all the matching elements. The following listing is a basic example that changes the background color of the first paragraph of a web page.


The first paragraph.

The second paragraph.

The $() function is a handy shortcut to trigger jQuery-driven manipulations. The above listing uses it twice. First, it’s used to bind an anonymous function to the document.ready() event. This is how the code triggers the execution of jQuery code once the page has finished loading. Then it’s used along with the p:first CSS selector to isolate the first paragraph. The css() mutator method changes its background color.

jQuery offers many more methods to transform the DOM and bind callbacks to all possible browser events. Refer to this introductory article if you want to explore jQuery in greater detail.

jQuery is highly extensible and, for the purposes of this article, the example uses two additions to the bare library: jQuery UI, a set of specialized functions to deal with visual interactions, and the mousewheel plugin, which allows an app to react to scrolling events generated by the mouse wheel.

The Setting

To keep the code simple, you will start from the source code shown in Listing 1. It acts as a mockup for a complete application; it is a simple web page that contains four DIVs, representing the visual items with which the user interacts. Figure 1 shows how it appears.

Click to enlarge

The required code is nothing more than a composition of the snippets you have seen so far. For an extra bit of fun, a Shuffle button randomly rearranges the cards on the dashboard with a smooth animation via the animate() method:

$('#shuffleCards').click(function() {  // reset panning  $('#universe').css('top', 0).                 css('left', 0).                 css('bottom', 0).                 css('right', 0);  var maxWidth = Math.round($('#container').width()*0.3) ;  var maxHeight = Math.round($('#container').height()*0.3);  $('.model').each(function(model) {    var top = Math.round(      $('#container').height() / 3 +      Math.random()*maxHeight*2 - maxHeight);    var left = Math.round(      $('#container').width() / 3 +      Math.random()*maxWidth*2 - maxWidth);    var movement = {'top': top, 'left': left};    $(this).animate(movement, 1000);  });    });

Much More to Explore

You have learned how to transform a static web page into an appealing interactive experience. You leveraged JavaScript and jQuery DOM manipulation functions to mimic complex interactions that are traditionally reserved for heavier client applications. Now these interactions can live in the lightweight environment of a browser window as well.

Many other features are left to explore, such as mouse gestures and keyboard events binding. A natural next step would be to evolve the demo interface into a complete desktop and layout manager backed by a model that supports real-time filtering, layout, data mutations, and interfacing with external data providers. For this purpose, I started an open-source project, Rhizosphere, for creating the ultimate JavaScript interactive experience and innovative data visualizations.

Share the Post:
XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

data dictionary

Tools You Need to Make a Data Dictionary

Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as