Application front-end and back-end (part 1)

 _{4 min read}

Application front-end and back-end

The development and popularization of the Internet over the last two decades has completely changed the way we consume content. The once static pages that allowed us to present specific information have been largely replaced by sophisticated applications that allow us to interact with users, dynamically adjust content to their preferences, perform complex tasks such as editing documents or processing photos or videos, and all this often with the use of complex cloud ecosystems and artificial intelligence.

In this article, we'll take a look at what basic elements make up almost every website and discuss how they are responsible for providing the best experience for the end user.

General construction of web applications

Modern web applications are based mainly on the architecture of client-server. A web application is - in its simplest definition - a program that runs on an external web server, while interactions with it are possible using a client application - a web browser or a dedicated program prepared by the application developer. The latter solution is most popular on mobile platforms, such as Android and iOS systems available on smartphones and tablets.

The client application connects to the server using the HTTP protocol (Hypertext Transfer Protocol), which allows data exchange based on the server's generation of answers to be sent by the client application inquiries.

The biggest advantage of web applications is their flexibility - the operation of a web application takes place on a web server, while the client application is only responsible for displaying the results of its work. This makes it possible to use it on almost any device connected to the internet - a movie platform, music player or email client can be successfully run on a computer, smartphone, game console or TV. The performance of the client's device is also of secondary importance - the use of web applications is possible even on office equipment which is several years old, provided that it has an up-to-date browser supporting modern standards.

Their biggest disadvantage is the need for an uninterrupted connection to the Internet, without which the functionality of the application is, in most cases, completely blocked. Proper functioning of a web application also requires additional work on the part of its creator - adapting the application to the myriad of screen sizes and input methods (TV remote control, game controller, touch screen, keyboard and mouse), ensuring adequate server performance for the number of active users, as well as introducing additional security measures to protect the data stored on the server.

The front-end of the application, i.e. the user interface

Front-end in the context of web application operation refers to the technologies that are used by the client application to display the GUI (graphical interface, graphical user interface) applications. The content it contains, the interface elements with which the user can interact, and the styles that determine the appearance of the final page are delivered by the server and interpreted by the user's device.

The front-end of the application consists of 3 main technologies:

• HTML (HyperText Markup Language) – HTML tags are a standard for labeling information contained on a web page, allowing a browser to recognize the type of information and adjust the way it is displayed based on that information. Among the so-called HTML "tags" are markings for headings, paragraphs, hyperlinks, lists, as well as references to specific files, such as video footage or images. It also allows you to assign your own identifiers and markings, further enhancing the ability to distinguish between different page elements.
• CSS (Cascading Style Sheets) – CSS is a standard that allows you to specify rules for how a browser determines how to display the content of a particular HTML element. Early versions of CSS allowed only basic editing of the appearance, such as specifying the size or color of the font, background color or margins. Nowadays it is an extended tool, which can be used to almost freely manage the arrangement and presentation of individual elements of the page, allowing, among others, their animation.
• JavaScript (JS) – A programming language that is also widely used outside the front-end. In the context of web applications, it is most often responsible for user interaction with the website interface, responding to user actions and modifying HTML and CSS content accordingly. While its capabilities are almost limitless, its use in the final web page translates into increased hardware requirements that must be met in order for the application to function properly on the user's device.

The combination of these solutions allows the browser to present the application's interface to the user in a clear and visually appealing way, so it plays a special role - it bridges the gap between the user and the actual application, located on the... - continued in part 2.