Making Abstract Concrete — Front end vs. back end

Project 2 for MDES/MPS Communication Design Studio, Fall 2016 (Instructor: Stacie Rohrbach)

This world contains so many abstract concepts that human being has been making. There is a saying, “There’s more to it than meets the eye”. It includes concepts(thoughts), process,

What Front-end means (Brief Research)

Front-end development is where the interactions between users and web page occur. So, front-end developers engage in process of designing the way how each webpage displays itself to users including its structure and hierarchy so users can generate narratives with these set of webpages, that is, website. It means that several professions can involve in this process of front-end — content strategist, web/UX designer, information architecture, user researcher etc. could be part of professions above.

In the past, web development consisted of people who worked with Photoshop and those who could code HTML and CSS. Now, developers need a handle of programs like Photoshop and be able to code not only in HTML and CSS, but also JavaScript or jQuery, which is a compiled library of JavaScript.

Most of everything you see on any website is a mixture of HTML, CSS, and JavaScript, which are all controlled by the browser. For example, if you’re using Google Chrome or Firefox, the browser is what translates all of the code in a manner for you to see and with which to interact, such as fonts, colors, drop-down menus, sliders, forms, etc. In order for all of this to work, though, there has to be something to support the front-end; this is where the backend comes into play.


The back-end has three parts to it: server, application, and database.

I came to find an example that is really helpful to concretize the concept of front-end and back-end. Let’s pretend there is a customer who is about to buy a plane ticket through a website. The website would require user to enter all of his or her information, including name, billing address, destination and so on. Then the web application stores the information in a database as well as the entire contents of a website. The database, is generated formerly on the server in which the website is calling for information.

The web application creates, deletes, changes, renames, etc items in the database. For example, when a customer purchases a ticket, that creates an item in the database, but when they have a change in their order or they wish to cancel, the item in the database is changed.

A server, in the simplest form, is a computer accessed remotely that runs software to fulfill requests from clients. In our example, the server the customer’s browser is communicating with is where the database is stored and modified.

In short, when a customer wants to buy a ticket, the backend operation is the web application communicating with the server to make a change in a database stored on said server. Technologies like PHP, Ruby, Python, and others are the ones backend programmers use to make this communication work smoothly, allowing the customer to purchase his or her ticket with ease.

Illustration made by kostantinfo

09/29, Exploring concepts

Monique and I shared our topics and gave thoughts to each other. We all agreed that since ‘Front-End & Back-End’ topic partially deals with invisible concepts and processes, illustrating examples would be beneficial to make it clearly understandable. While gathering information on this concept, I could find a number of illustrations that visualize the concept: most people, in an attempt to explain the concept intuitively, illustrated front-end as simply visible part, and back-end as invisible part of tangible materials that we are familiar with. Monique gave me feedback on an example that I used in this post, the flight ticket, that explaining invisible process with familiar everyday object could allow people grasp the process easily. Then we briefly discussed on other interesting objects or systems that involves both on direct interaction with people and on management process that general people can’t see thus don’t understand. There could be system of credit card, mailing system, market system, and etc.

10/6, Brainstorming

Before thinking about actors and relationships, I made key differences of both clear in various perspectives. When in user’s perspective, the main difference is whether one can see it or not. To developers who deal with building structure of both, front-end developers often concern about usability, while the opposite concern about security and contents management. The front-end system itself directly communicates with users, while back-end system communicates with the server and database. Front-end is about displaying the data in a well-defined and well-curated way, but back-end stores and manages it. Front-end is like appearance of creature, back-end is brain, where all the invisible memory process is happening.

Then I thought about actors and relationships. Definitely I feel like the most important actor of this concept is a ‘user’.

10/11, Class check in

  • What is it?
  • How Does it work?
  • Why is it important?

10/12, Topic Statement(Revised)

What is front-end and back-end? And what is the difference between them?

Every web page you’ve been visited and interacted is all about front-end. Let’s take a look at it. When you explore web pages, there a lot of interactions between you and the webpage occur. You click it, type in it, scroll down and up, and zoom in and out, according to your various purposes. You often require sense of interactivity of the webpage, and that’s what the front-end developers concern about. To make you interact with webpage properly.

Okay, it’s time to wear another lens to take a look at the hidden side that enables all the interactions between you and the webpages, which is back-end. Here, a lot of invisible information processes are happening behind your screen while you’re interacting with a webpage. A number of data is continuously transformed and transferred throughout this hidden scene between front-end and back-end via internet. You can see server here, which manages and controls all the data resources in database, including yours. It’s like a digital library.

Let’s pretend that you are posting your blog. At first, you might want to type your thoughts, attach pictures, then click the button to upload your post. In this process, the server transfers your post and stores it into a drawer that matches your information, which is in the database.

You also might want to re-edit your post if you wish to revise the writing or attach additional pictures. When you change it and re-upload it, the server promptly accesses to your data in data base, changes the contents, then transfer this change to front-end in order to enable people to interact with your changed post.

When you click delete button, the server, again, access to it, eliminates it, and notifies you the fact that it’s deleted.

This is how you can keep interacting with webpages.

10/13, Work Session

In terms of graphical style, I’m thinking about using overlapping layers in order to compare visible process of front-end and invisible process of back-end.

10/17, Visual references

The concept of front-end and back-end

In terms of visual references, especially when I explain the difference between front-end & back-end and show that these two are invisibly interconnected and happening at the same even though they are separately exist, I assume that visualizing the transition between them really matters.

I found out this visual structure of a mobile game called ‘monument valley’ is interesting. The flipping back and forth movement of structure could reveal the relationship of front-end and back-end without excluding user who interacts with them.

references from Pinterest by searching “x-ray”

I considered using overlapping

10/18, Topic Statement(Revised) + Work Session

After got feedback from Stacie, I’m trying to make more engaging and strong script before digging too deeply into visual things.

Things that I should include are,

  • greater details of roles of front-end and back-end (I’ve been tried to make abstract concept very simplified one, however, I realized somehow it is too simplified, maybe I should include more details to deliver concrete concept)
  • greater depth of description for the activities being performed. So what really happens on both side?
  • more compelling introduction and conclusion. This is where I got stuck. How could I introduce the concept with compelling storytelling?

Also, I’m trying to extract overarching keywords of the concept that I could start from for my revised script.

So, Wikipedia refers the front-end as a “presentation layer — which is the interface between the user” and the back-end as a “data access layer”.

It also says,

The front is an abstraction, simplifying the underlying component by providing a user-friendly interface.
….The front end faces the user, and the back end launches the programs of the operating system in response.
….the end-user facing views of the CMS(Content Management System) and the administrative views.
….the front end translates a computer programming source code into an intermediate representation, and the back end works with the intermediate representation to produce code in a computer output language. The back end usually optimizes to produce code that runs faster. The front-end/back-end distinction can separate the parser section that deals with source code and the back end that generates code and optimizes.

After having a short discussion on my concept and script with Stacie, I came back to topic statement process before starting visualizing.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.