Front End

The Front End can be considered similar to the surface of the planet, the parts that an astronaut can see and interact with based on the laws of nature. A web application would have a user interact with it and use a number of technologies such as HTML, CSS, and JavaScript to do this.


Illustration of a planet symbolizing an HTML web page: gray, bare, and motionless, lacking CSS for design and JavaScript for movement.

HTML (Hypertext Markup Language) is a foundational aspect of web applications. It is a set of instructions or code that instructs a web browser on what to display and how to display it. It could be compared to simple organisms living on the planet; these organisms have DNA, which is the instructions for how simple organisms are put together.


Illustration of a vibrant planet representing an HTML web page styled with CSS. The planet is colorful and detailed, showcasing its beauty through design elements like textures, patterns, and vivid colors, symbolizing the visual enhancements CSS provides.

CSS (Cascading Style Sheets) in web applications describes a standard appearance, such as certain colours, types of text, and layouts. Continuing the analogy with DNA, these could be compared to the parts of DNA that describe the colour, shape, size, and texture of the simple organism.


Illustration of a planet symbolizing an HTML web page: gray, bare, and motionless, lacking CSS for design and JavaScript for movement.

JS (JavaScript) is part of a web application front end that enables more complex activity in the web browser. Whereas HTML can be considered a simple set of instructions on what to display, JavaScript is a more advanced set of instructions that allows choices and decisions to be made on what to display. In the planet analogy, JavaScript can be considered the brain of an advanced organism, which allows decisions to be made based on what and how something interacts with it.



Back End

The Back End of a web application is things you don’t see within a web browser but are important for the web application to work. On a planet, these are the non-visual things: the structures that keep a building standing, the air, and the gravity that keeps feet on the ground.


Illustration of a planet's ecosystem representing databases. The planet's surface is rich with diverse landscapes, forests, rivers, and resources, symbolizing a vast repository of data. This thriving ecosystem highlights how databases store and provide access to various types of resources essential for the planet’s (website's) functionality.

A Database is where information can be stored, modified, and retrieved. A web application may want to store and retrieve information about a visitor's preferences on what to show or not; this would be stored in a database. A planet may have more advanced inhabitants who store information about locations in maps, write notes in a diary or put books in a library and files in a filing cabinet.


Illustration of a planet’s infrastructure symbolizing web servers, networking, and systems that support the web application, with interconnected networks and servers at its core.

There are many other Infrastructure components underpinning Web Applications, such as web servers, application servers, storage, various networking devices, and other software that support the web application. On a planet, these are the roads that are present, the cars that run on those roads, the fuel that powers the cars.


Illustration of the planet's ozone layer representing a Web Application Firewall (WAF). The protective layer surrounds the planet, symbolizing security measures that shield the web application from external attacks and threats, ensuring its safety and integrity.

WAF (Web Application Firewall) is an optional component for web applications. It helps filter out dangerous requests away from the Web Server and provides an element of protection. This could be considered similar to how a planet's atmosphere can protect inhabitants from harmful UV rays.