How Does Client-Side Scripting Improve Web Application Performance?

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+

Client-side scripting, like JavaScript, can be embedded into the page on the client’s browser. This script will allow the client’s browser to alleviate some of the burden on your web server when running a web application. Client-side scripting is source code that is executed on the client’s browser instead of the web-server, and allows for the creation of faster and more responsive web applications.

What is the difference between a web application and a traditional windows application? A great example of a windows application is Microsoft Office, which is installed on a client’s workstation; other than calls to the database server to save and retrieve data, all the source code and assemblies are run locally. In fact, it is a requirement that a windows application be installed on the client’s workstation. Web applications, on the other hand, don’t need to be installed on individual workstations. An internet connection and a browser like Internet Explorer, Firefox or Google Chrome is all you need. However, the majority of the processing will not take place on the client’s browser, but on a web server at some other location.

The Need for Client-Side Scripting

As web applications become more and more powerful and sophisticated, it is expected that they function and act just like a windows application. The basic architecture for a web application is that most of the source code and assemblies reside and are processed on a web server. The sole task of a web server is to accept incoming HTTP requests and to return the requested resource in an HTTP response. There is never a continuous live connection between the client’s browser and the web server. Web pages will always be in the form of HTML.

PostBack is the name given to the process of submitting an ASP.NET page to the server for processing. Every time a PostBack happens, the HTML page is sent to the web server. The server loads the page, processes events and renders the new HTML back to the client. On a PostBack, the entire HTML is refreshed.

For large and complex web-applications that store a large amount of View state, this can be very time consuming for the client. This will become a huge problem for a web server with limited resources like memory and bandwidth.

Web applications will usually embed view state in the HTML page. Quoting Microsoft, “Microsoft® ASP.NET view state, in a nutshell, is the technique used by an ASP.NET Web page to persist changes to the state of a Web Form across postbacks.” View state allows the state of objects to be stored in a hidden field on the page. View state is transported to the client and back to the server, and is not stored on the server or any other external source. View state is used to retain the state of server-side objects between postbacks and will become very large for large applications and pages.

Client-side scripting (embedded scripts) is code that exists inside the client’s HTML page. This code will be processed on the client machine and the HTML page will NOT perform a PostBack to the web-server. Traditionally, client-side scripting is used for page navigation, data validation and formatting. The language used in this scripting is JavaScript. JavaScript is compatible and is able to run on any internet browser.

The two main benefits of client-side scripting are:

  1. The user’s actions will result in an immediate response because they don’t require a trip to the server.
  2. Fewer resources are used and needed on the web-server.

Ajax and jQuery

The two huge advances in client-side scripting are Ajax and jQuery. Ajax is not a tool or a programing language, but a concept. The concept is to call the server directly from the client without doing a PostBack. The main advantage of Ajax is to save and retrieve data from a database, bypassing the web server, which is known as a CallBack. Web Services will be created to do database operations. Your client-side scripts will call these web-services asynchronously.

However, there are disadvantages to client-side scripting. One disadvantage of client-side scripting is that JavaScript is not as easy to write as the traditional server-side languages like C# and VB.Net. Also, languages like C# and VB.Net have access to the .Net Framework. jQuery is a multi-browser JavaScript library designed to simplify client-side scripting and serves as is a wrapper around JavaScript. jQuery is free open source software.

According to their website, jQuery is defined as, “a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.”

As web applications become larger and more complex, combined with the increasing popularity of mobile applications that run on smart phones and other mobile devices, the need for client-side scripting, Ajax and jQuery will continue to grow.