Web Development: What Users See vs What’s Really Happening

What is happening can be different from what appears to be happening. It appears like Jones is easily acing every interview but behind the scenes, Jones prepares many hours for every interview. It seems like Sam is a naturally gifted conversationalist; behind the curtains, Sam had actually once been afraid to speak with strangers and had learned his way to be a great conversationalist.

As I learned more about developing web applications, I began to notice some differences between what the users see and what the application is actually doing, or what appears to be happening and what is really happening. For example:

What appears to be 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 appears to be 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 appears to be 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 appears to be 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 appears to be 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 does helps a developer to optimize his 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. To learn more about solving problems with various approaches, check out Paul Homer’s blog post “Thinking Problems”.

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.

Sharing is caring!

Leave a Reply

Your email address will not be published.