Client-Side Scripting and Server-Side Scripting

Introduction

Many websites out there use Server-side programming and Client-side programming for various functionalities. We can take the example of Scaler.com only. The static User Interface (UI) that can be seen by the user is developed using Client-side programming. Refer to the image below.

You can see a form in the above picture, when the user enters the mobile number and clicks on the "Get OTP" button, an OTP is sent on the entered mobile number with the help of Server-side programming. Similarly, after entering all the details when the user clicks on the "Continue booking live class" button, the entered details are transferred to the server for further processing.

As shown in the above example, Server-side programming and Client-side programming, both are used in Web application development. While Client-side programming can be used to make the web pages interactive and fancy, Server-side programming can be used to give well organised and tailor made user experience to the users. Having said this, let us dive deep in the world of Server-side programming and Client-side programming for more information.

What Is Server-side Programming?

The execution of several programs on the back-end or specifically the servers, is said to be Server-side programming or Server-side scripting. Many functionalities are added in the web application for better user experience with the help of the programs that run on the backend. Hence, this is also called Back-end Programming. The main question is why do we need server-side or backend programming? Because when we deal with huge collections of data, we need servers that have databases to store such a huge amount of data. Then server-side programs are used to perform various operations on that data. In simple words, All the backend-code is maintained on the servers.

In the above picture, you can see that the server is sending the response to the request made by the client. By this request and response cycle, client and server communicate with each other.

Server-Side Uses

The use of Server-side programming is very important as it enables us to handover the tailored information to different users(clients).

Like flipkart use server-side programming to deliver the appropriate search results, product suggestions, special offers, etc. to the users based on their previous searches, etc.

So now, As we know what Server-side programming or Server-side scripting is, let's have a look at its uses.

1. Well organized Storage and Information Delivery.

Have you ever wondered how many products are available on amazon? There are literally lakhs of products on amazon and it's practically impossible to create static web pages for each of those products. In the same way, Scaler.com offers various services for different users. So how do these websites manage to cope up with such a huge amount of products or data? There are databases in servers that store this data, then server-side programming is used to push over the required data by dynamically constructing and returning HTML and various kinds of files. It is very important to deliver well organized information to the user as it is one of the most important factors of impressive User Experience. Server-side programming is extensively used in achieving this functionality. You can even go to scaler.com or amazon.com and experience this in real-time.

2. Data Analysation and Decision Making

It is important to know that websites may collect a lot of user data like what users like, dislike, watch, purchase, returns, etc. and while dealing with this data, we need server-side programming for some specific data analysis and decision making purposes. For eg. Users get different product recommendations while searching for products; this is because of data analysis which is done using server-side scripting.

3. Notifying and Communicating with client

Using servers, It is possible to send personalised notifications to users whether they are general in nature or specific notifications through a website or any other message conveying facility like SMS, email, etc.

Hence, Communication is also possible the same way.

4. Application of Session Information

A session is a type of storage which is used to store data on the browser itself. The session is said to be in the active state only when the user is interacting with the browser, which means only for that particular session. The data in the session storage is wiped out as soon as the session terminates or ends. Session storage helps in storing data temporarily for some specific and short interval of time. This data can be used by the servers to give responses accordingly.

For example: A user visits a website to play a game, then stops in between and comes later; at that specific moment, this session data can be used to help him continue the game from the exact point where he left off.

5. Tailored User Experience

For the user convenience, servers can store the data and use it for future references like for eg. A user orders something from the food delivery app and in future gets similar notifications and advertisements. This is called Tailored User Experience.

6. Limited Content Accessibility

While using social media websites like Facebook or twitter, you might have noticed that you can only view the content that you are authorized to view. It means that there is some content that requires authentication and authorization to get visible to the user.

We can take the example of scaler only, when the user signs in using an authorised email address, after the authentication he can view the courses that he has purchased, but any other user without the authorization can not view the same. This increases the user's security to a very large extent. These outstanding facilities of Authentication and Authorization can be achieved using Server-side programming.

Programming Languages for Server-side Programming

Now we will have a look at the languages that offer Server-side programming. Actually there are so many languages that we can use for server-side programming but some popular ones are -

1. PHP
2. Node.js
3. C# (read as 'C sharp')
4. Ruby
5. Python

Examples of Server-side Programming

A user requests for some specific data by using his browser(client), the servers do some processing and only send that data to the user which was requested. This is done using different programs that run over the server. Hence this is said to be Server-side programming. Actually this was just one example of many such tasks that get performed over the Server side.

Here we can also have the example of google, like as we search for something on google, we are just requesting for some specific data, now google performs some programming on the server-side and gives back the related found results. Simple as that.

What is Client-side Programming?

The execution of several programs on the front-end or specifically the Client, is said to be Client-side programming. Many functionalities are added in the web application for better user experience with the help of the programs that runs on the front-end. Hence, this is also called Front-end Programming. But What is the motive of Client-side programming? The main motive of client-side programming is to create interactive and appealing web pages, utilizing the power of temporary storages such as local storage and session storage and reducing the server load as well by executing some scripts on the client-side only. The client side is also used to send requests to the server for various functions like data retrieval and sending.

Client-Side Uses

So now, As we know what Client-side programming or Client-side scripting is, let's have a look at various uses of Client-side programming.

1. Creating Static and Dynamic Web Pages

Client-side programming is extensively used to develop web pages that can be static as well as dynamic. The web pages in which the page content is delivered the same way as it is stored are called Static Web Pages and the web pages in which the page content is modified dynamically according to the user requirements are called Dynamic Web Pages.

2. Client-side Validation

One of the best uses of Client-side programming is validation. Various validations can be done on the Client side. For example: Validation of the form that the user fills before submitting it. Instead of validating user input data on the servers, it can be validated on the client side. Like we can verify whether the email is correctly formatted or not, phone number input is filled with numbers only and not with characters or symbols.

3. Immediate Responses

With the help of Client side programming, we can give immediate response to the users. For example: If a user is trying to access a particular web page on the website that he is not permitted to, then we can send him immediate responses with the help of inbuilt javascript functions like alert() and prompt(). The confirm() function can be used to re-confirm the input given by the user. This can also be used for quick authentications.

4. Utilizing Temporary Storages.

Temporary storages are those storage that can be used for temporary purposes or for very short duration. We have two temporary storage that can be utilized efficiently using Client-side Programming. These temporary storages are -

• Local Storage : It is used to locally store the data in the form of key-value pairs. This data does not expire until you delete it.
• Session Storage : It is also used to store data in the form of key-value pairs, but this data is deleted as soon as the session ends or terminates.

5. Server load Reduction

The Client(browser) acts as an interface between the server and user. An HTTP request is sent to the server from the client to which server responds as per the requirement. For example: when the user clicks on a button that fetches some data from the server, a request is sent from the client to the server and a response(here the requested data) is sent from the server to the client. More requests, more the load on the server. Therefore, to reduce the server load, the programs for which the servers are not required, such as displaying the drop-down menu,visuals on key press, timed events, etc. are executed on the client side only.

Programming Languages for Client-side Programming

Now we will have a look at the languages that offer Client-side programming. Actually there are so many languages that we can use for client-side programming but some popular ones are -

• HTML
• CSS
• JavaScript

Examples of Client-side Programming

Form validation is one of the best examples of client-side programming. The data input by the user is verified before it is sent to the server. Once the data is validated on the client side, it is sent to the server for further process. Let's take the example of user sign in, when the user enters the email address, it is first checked on the client-side itself if it is having a proper structure like "@" symbol, "." extension like .com, .org, etc. Once it is verified, then it is passed on to the server to check if the entered email actually exists or not. This helps in reducing the load on servers.

Client-side Scripting Vs Server-side Scripting.

Here we will have a look at the key differences between Client-side Scripting and Server-side Scripting.