Analogy Time: Client-Side vs. Server-Side

August 8, 2013 by Christopher Walker

The Injustice

Most technical books do an injustice to beginning developers by not elaborating on certain aspects of making scalable, server-side applications. One of the biggest injustices is the graph of client-side verses server-side processing. While desktop applications may interact with a server somewhere, this is more common when it comes to web applications over HTTP. We’ve all seen a diagram that looks about like the following:

If I received a dollar for every time I have seen one of these diagrams being presented in an article or book about programming, I’d be a rich man. If I received another dollar for every time I ignored it and kept reading, I’d be even richer. While I can’t speak for other developers, when I was beginning to learn the development process, I didn’t understand a whole lot about computers save from basic system administration stuff. Once someone started throwing around diagrams about HTTP requests and responses along with a server, I was completely lost. Perhaps that shows a little bit of my ignorance when I first began, but now I do understand these things. I hope I can impart some knowledge to save some beginners from the pain of understanding these annoying diagrams

Let Me Not Digress

In my mind, I associate understanding a concept with an analogy. It’s very easy to relate technical concepts to real world applications (and I’m not talking about computer applications). If you don’t know what an analogy is, I suggest looking it up (that link leads to an analogy explanation).

Skip to the end

The Boring Part

Before we can continue, I have to go through the boring part of discussing client-side code verses server-side code. I will be using what I am familiar with throughout the rest of this post, JavaScript and PHP. Up until 2009, JavaScript was a primarily client-side programming language. When surfing on the world wide web, there are (basics here) two aspects to getting your web-page to display. On your computer, you have an internet browser.

If you have Microsoft Windows you probably have used Internet Explorer. If you have a Mac, maybe Safari. Or if any major operating system (Windows, Mac, and Linux included), you have probably used Chrome, Opera, or Firefox. This is an internet client. Client-side code runs within these environments. Most major browsers come with JavaScript support natively. They have an “engine” that interprets the JavaScript code that the web developer has added to the page. This client-side code runs directly on your computer. Your CPU (processor, whatever) is executing this code.

Server-side programs do not run on your computer. They run on the web-server that gives you your webpage that has the client-side code that runs on your computer (what?). Let’s take PHP for example; PHP is an installed program on some web-server somewhere. When you access www.example.com/index.php, the PHP code that has been inserted into index.php gets run on the server before it ever even comes to your computer. It’s code snippet time.

Example text in index.php.

When your web-server gets a request for this file (someone navigates to it in their browser), this is what the server initially sees.

    <?php
        $page_title = "Hello, This is a cool page";
    ?>

    <html>
        <head>
            <title><?php echo $page_title; ?></title>
            <script type="text/javascript">
                var theOnlyDiv = document.getElementsByTagName("div")[0];
                theOnlyDiv.innerHTML = "I'm the only DIV element <br />";
                theOnlyDiv.innerHTML += "<strong>It's a sad life</strong>";
            </script>
        </head>
        <body>
            <div>
                I'm a DIV element.
            </div>
        </body>
    </html>           

Notice that the PHP blocks, highlighted, are still intact. When the web-server gets a request for this file type (.php), it is sent through what is called a handler, in this case, the handler will redirect the server-side code to the PHP application installed on that server, process the file and give it back to the web-server to be sent in a response back to the client (your browser). All of this processing goes on on the server!

What your client receives is the processed file. The final web-page, the HTTP response in the form of HTML, would look something like this:

    <html>
        <head>
            <title>Hello, This is a cool page</title>
            <script type="text/javascript">
                var theOnlyDiv = document.getElementsByTagName("div")[0];
                theOnlyDiv.innerHTML = "I'm the only DIV element <br />";
                theOnlyDiv.innerHTML += "<strong>It's a sad life</strong>";
            </script>
        </head>
        <body>
            <div>
                I'm a DIV element.
            </div>
        </body>
    </html>

Notice that the PHP block is now missing and that in the title element, the PHP echo statement has been replaced with the value of that PHP variable we gave to be echoed. This happens because of all the things we just discussed.

  1. The browser navigates to index.php
  2. The server receives the request and sends it to the web-server, recognizing the HTTP header (a header is a fancy way of a computer telling another computer what type of information it’s sending i.e. when you’re parents say they are sending you a birthday card, the header would be “card”.)
  3. The web-server sees the file type as .php and sends it to the handler
  4. The handler processes the file and gives it back to the web-server.
  5. The web-server sends it back to the client in an HTTP response, with an appropriate header (“I’m a web page!”)

Now we come to the part of the client-side code; the embedded JavaScript:

    var theOnlyDiv = document.getElementsByTagName("div")[0];
    theOnlyDiv.innerHTML = "I'm the only DIV element <br />";
    theOnlyDiv.innerHTML += "<strong>It's a sad life</strong>";

That block of code is executed on the client. Your computer runs this code. Your browser interprets this. (I don’t know how else to explain this).

Once this JavaScript executes, this is what you end up with:

    <html>
        <head>
            <title>Hello, This is a cool page</title>
            <script type="text/javascript">
                var theOnlyDiv = document.getElementsByTagName("div")[0];
                theOnlyDiv.innerHTML = "I'm the only DIV element <br />";
                theOnlyDiv.innerHTML += "<strong>It's a sad life</strong>";
            </script>
        </head>
        <body>
            <div>
                I'm the only DIV element <br />
                <strong>It's a sad life</strong>
            </div>
        </body>
    </html>

The script block stays and is not removed from the DOM.

An appropriate analogy

The Restaurant

A restaurant is a great example of client verses server. Let’s change some terminology for this example. A client is actually a customer, the food consumer. For this example, when I say customer, this relates to a computer client (your browser). When I say waiter, I mean the server.

When a customer sits down at a restaurant, this is similar to a request. The customer is requesting service from a waiter. A waiter, in response, comes to the customer and takes initial drink and appetizer orders. The customer chooses and tells the waiter, who then takes the order (request) back to the kitchen to be handled appropriately. While the cooks are putting together the appetizer, the waiter would be preparing the drinks. The waiter then returns what the customer ordered, a response to the customer. The customer would then order their main course (another request). The same thing would occur as with the drinks and appetizers. After the customer has eaten their food, they would request the check. The waiter would process (handle) their request and return a bill in response. The customer would then request that the money or card be picked up for the payment to be processed. In response, the waiter would return a receipt.

This is a great example of the client/server relationship. Let’s look at one request from the restaurant example above and turn it into a relation to how web pages work.

Restaurant WWW
  1. The customer sits down, requesting a waiter
  2. The waiter responds by coming to the customer and asking for their drink and appetizer orders
  3. The customer gives the order to the waiter
  4. The waiter takes the order back to the kitchen to process it
  5. Drinks and an appetizer are returned to the customer
  1. A client requests a web-page from a web-server
  2. The server responds with a page (with CSS for styles, HTML for markup, and JavaScript for interaction), the page may have a form (like a request for an order)
  3. The client fills out the form and sends the data back to the server
  4. The server processes the form, giving it to the appropriate handlers
  5. The server returns a response for the client (i.e. the form was processed successfully.)

TL;DR

A client is like a customer at a restaurant. They fill out forms (browse the menu and make an order), which are probably validated through JavaScript first (and better be revalidated on the server). All the fancy fade-in, fade-out, animation, color-changing code is performed via JavaScript, on the client (like all the decorations and ambience of a restaurant). The waiter then takes that customer’s order and sends it to the kitchen for processing. The customer doesn’t go back and prepare his own food. This is handled by the restaurant staff (the server), and then given back to the waiter (the web-server) who returns the food order to the customer (a response). The processing of the order is like server-side code being processed.

The gist of this whole post is that client-side code and server-side code are two completely separate things which are confused far too often. Client-side code is executed on the user’s (your) machine, while server-side code is done on the server (not your machine), and never the twain shall meet

Privacy Policy

© 2017 | Powered by Hugo and lots of motivation.