Difference Between Client-Side and Server-side Programming

What is the difference between client-side and server-side programming?

Your code is split into two entirely separate parts, the server side and the client side.

                    |
---------->
HTTP request
|
+--------------+ | +--------------+
| | | | |
| browser | | | web server |
| (JavaScript) | | | (PHP etc.) |
| | | | |
+--------------+ | +--------------+
|
client side | server side
|
<----------
HTML, CSS, JavaScript
|

The two sides communicate via HTTP requests and responses. PHP is executed on the server and outputs some HTML and maybe JavaScript code which is sent as response to the client where the HTML is interpreted and the JavaScript is executed. Once PHP has finished outputting the response, the script ends and nothing will happen on the server until a new HTTP request comes in.

The example code executes like this:

<script type="text/javascript">
var foo = 'bar';
<?php
file_put_contents('foo.txt', ' + foo + ');
?>

var baz = <?php echo 42; ?>;
alert(baz);
</script>

Step 1, PHP executes all code between <?php ?> tags. The result is this:

<script type="text/javascript">
var foo = 'bar';

var baz = 42;
alert(baz);
</script>

The file_put_contents call did not result in anything, it just wrote " + foo + " into a file. The <?php echo 42; ?> call resulted in the output "42", which is now in the spot where that code used to be.

This resulting HTML/JavaScript code is now sent to the client, where it gets evaluated. The alert call works, while the foo variable is not used anywhere.

All PHP code is executed on the server before the client even starts executing any of the JavaScript. There's no PHP code left in the response that JavaScript could interact with.

To call some PHP code, the client will have to send a new HTTP request to the server. This can happen using one of three possible methods:

  1. A link, which causes the browser to load a new page.
  2. A form submission, which submits data to the server and loads a new page.
  3. An AJAX request, which is a Javascript technique to make a regular HTTP request to the server (like 1. and 2. will), but without leaving the current page.

Here's a question outlining these method in greater detail

You can also use JavaScript to make the browser open a new page using window.location or submit a form, emulating possibilities 1. and 2.

Server side programming vs Client side programming

There are several typical software architectures:

  • Non-networked application (does not communicate, client-only)
  • Server-client application (has typically one or more central servers, and multiple clients that contact the server(s))
  • Peer-to-peer application (only has clients that communicate with each other).

Here, client is typically the part of the application that is executing on the user's computer, which the user is interacting with. Server is defined as the part of the application that user is not interacting directly, and is not on his computer but somewhere else. This separation can be for any of a number of reasons: data size, data security, data availability, or simply coordination.

For example, when you go to Google on your web browser, the web browser is a client. Google is the server. Your computer does not know where everything on the Web is; but Google has a pretty good idea.

For another example, if you play MMORPGs like World of Warcraft, your game is the client, and Blizzard's computers are the server; you tell the server what you are doing, and the server tells you the results, just like a pen-and-paper gamemaster. Without the server, you couldn't know what everyone else is doing.

Or, if you want to consult the atomic clock at the U.S. Naval Observatory, again, you are the client, the clock is the server; you contact it because, obviously, you don't know the correct time, and it does.

Now, for example, you might say that server might not be needed in some cases. For example, in the MMORPG case, couldn't the players contact each other directly? The first problem is discoverability: how would they find each other on the Internet? There has to be some central location to tell everyone everyone else's address. But if that is all the server did, you would have to contact all of the online players (and there are a lot of them) to ask them where they are, and if they are on the same map ask them the same question very very often; your internet connection would not be able to do it. There is also security to consider: a server makes sure (or should make sure) that you are not teleporting around on the map by changing the game's code and telling other player bogus values. For example, if client was responsible for remembering how much gold a player has, it would be trivial to become very rich very quickly: just lie about it to others.

Client side vs server side basics

Client side programming includes any coding or computation or effects or annimation or any sort of interaction your website performs with the user via browser. But server side programming is that which performs all the task in the server only. So the user is unaware of that.

For example, PHP is used for server side programming. You design a website with HTML and use JavaScript in it to take some input from user and modify it in anyway. To be more specific, if you created a blog website and you want to specify that the user can post a max of 5000 characters. Then you do some client side programming with JavaScript to count the number of characters and any filtering or anything. But then you need to send those posts to the server. The server then performs some server side task, may be with PHP, to sanitize the input for SQL Injection and saves it into a database.

User will only know what happened in the browser but not what happened in the server. Those are background tasks.

Difference between Client-Side JavaScript, Server-side JavaScript and CoreJavaScript

Without knowing the book, I can't tell you what is the meaning of CoreJavaScript, but in what concerns to the first two the difference is:

Client side javascript as the name says, is javascript code, running on the client side, a typical scenario of this is, when you access a website, and you run javascript code. The code being executed is being executed on the clients machine. This is why it's called client side javascript.

About the second, server side javascript, is javascript code running over a server local resources, it's just like C# or Java, but the syntax is based on JavaScript, a good example of this is Node.JS, with Node.JS you write javascript to program on the server side, and that code can be seen as normal C#, C, or any other server side language code.

With server-side code, you can still send javascript to the client-side, but there is a great diference between both, because the client side code is restricted to the clients machine resources, in terms of computing power and permissions. For example client-side javascript can't access the clients hard disk, while with server side you can access your server hard disk without any problem.

UPDATE

I've read a bit of the book, and Core JavaScript is about the JavaScript language per se (JavaScript Reference), i.e, the syntax, the statements, the function definitions, it's the basics of the language in general.

Imagine you are reading about C# or Java, before writing about Sockets Programming, WebServices, etc, the book is giving the reader an insight of the language first, in terms of it's capabilities, ways to create functions, arrays, and so forth.

When to use client-side or server-side?

There is no recipe for deciding that. A few notes:

  • security and validation should always be present at the server side (sometimes duplicated in the client).
  • the client-side should contain only UI-logic. No business logic.
  • logically, everything that accesses a database should be on the server.

Of course, if your application is a RIA (rich internet app), then you can have logic on the client. So it all depends.



Related Topics



Leave a reply



Submit