Web Development: What Users See vs What’s Really Happening
Tags: webdev, beginners
Published: 2019-05-27 03:20:12

---
title: Web Development: What Users See vs What’s Really Happening
published: true
description: Not everything is what it appears to be
tags: webdev, discuss, beginners, meta
cover_image: https://lennycheng.com/blog/wp-content/uploads/2017/01/web-development-user-see.jpg
series: 2016
---

What we perceive to be happening is often different from what is actually happening. For example, it appears like Joanna is effortlessly acing every interview but actually, behind the scenes, Joanna tireless prepares many hours for every interview. It might seem like Sam is a naturally gifted programmers; behind the curtains, Sam actually reads about programming during his spare time.

Back when I was developing web applications, I noticed that users' perceptions of how a web application worked was often different from how it actually worked. For example:

**What user think is happening**: We click on the close button and the popup is gone.
**What may actually be happening**: An event handler hides the popup element so that it is no longer visible but still exists

**What users think is happening**: As we scroll down the page, images and text fade into existence, appearing to be loaded instantaneously
**What may actually be happening**: As we scroll down the page, the opacity of the images that already been loaded on the page change from 0 to 1

**What users think is happening**: Each tab has different contents and they appear to be loaded when a new tab is pressed
**What may actually be happening**: The contents to the tabs had already been loaded and clicking on a tab displays its associated content and hides the other content

**What users think is happening**: We click on an image and the screen becomes larger
**What may actually be happening**: An HTML element resides underneath the image so that when we click on the image, the underlying element is clicked on, which then causes the screen to become larger (the distinction is that the underlying element is causing the screen to become larger, not the image)
 

**What users think is happening**: We type information from one page that is then displayed on a second page
**What may actually be happening**: The client posts the information to the server, which stores it in a database. The server then returns a new page along with the information the client had posted to a new view.

Knowing the difference between what the users see and what the source code actually does enables a developer to optimize their application. For instance, if we were to programmatically close the window, we can either programmatically hide the window or trigger a close action, which would then hide the window anyways! By knowing how the code works, we can solve a problem directly from A-B instead of A-X-Y-B. Taking the longer route may not affect much the performance of a project but it will increase the amount of time to maintain or scale the project whereas taking the direct approach, A-B, decreases unnecessary code and increases the project’s maintainability. 

What the users see and what the developers see can be different. The former sees the GUI,  the shadow of an elephant; the latter sees the source code, the elephant itself.

*This article was written in 2016 and first appeared at https://lennycheng.com/blog/2016/02/11/web-development-what-users-see-vs-whats-really-happening/*