What is a Frontend/Backend?
In information technology, the frontend and backend are visually and technically distinct functional layers: The frontend is the user-facing presentation layer and is usually the visible part of an application or software (app, website, shop system). The backend orchestrates the system-facing layer that contains the process logic and is closely linked with the core system and surrounding systems (PIM, DAM, ...). It is not visible to regular software users and makes functional components available to the frontend, for example, by providing services to handle business processes.
What is a Frontend?
The frontend is a user-facing layer that consists of two different workspaces. One is web design, which mainly handles graphics, interaction design (see GUI) and motion design (moving images). The other workspace is frontend development using the core languages (HTML, CSS and JavaScript*) for web interfaces. As a key part of the user experience, the frontend enables access to data and processes (website functionality) in an abstract and visualised form through carefully structured interaction between texts, colour combinations, menu items, tables and individually designed graphics and videos. Data and processes are stored in the backend.
*These days, frontend developers also rely on web application frameworks such as Angular, React (with libraries) and VueJS. These frameworks can easily be integrated with existing projects based on HTML, CSS and JavaScript. The advantage here is that the frameworks are based on libraries that simplify the development of recurring applications. Depending on the use case, frontend developers use existing modules/components and quickly generate frontend applications (forms, PWA capability and web components).
A welcome side effect is that conventional application software (previous client-server applications) and web developments are converging increasingly so many expert applications are available online today.
The frontend is like a theatre stage; the stage design and actors can be seen by the audience. The backstage area is the backend. Here, you’ll find make-up artists, the director, sets for different acts, props and additional actors/actresses as needed.
Source: Rabbit Mobile GmbH
Editorial comment: In frontend design, we distinguish between UX design, which is the rendering of the website, and UX architecture. The latter solves the customer journey problem, determining how the user is guided through the individual pages. The logic of the architecture is rooted both in the frontend and the backend (see ‘Complexity Shifts to the Frontend’).
A Related Term: Graphical User Interface
The graphical user interface, or GUI, is another important term in the context of frontend development. The GUI is a graphical interface, but it only describes part of the frontend. Parts of a website that are only rendered and cannot be used interactively (for instance, the text and images in articles) are not part of the GUI. The different options for interaction with the article, however, are part of the GUI – scroll bars and social media buttons, for example.
The GUI, or interaction design, generally includes icons, buttons, menu items and visual elements of a website, software or app. Users interact with them using a mouse, touchpad, touchscreen or eye and hand tracking in virtual reality applications. One example is the Windows button of the Windows operating system (version 10/11). Click it and a graphical user interface with graphical elements will pop up. Every element opens another application when you click it (Word, Explorer).
What is a Backend?
As we explained above, the backend is the ‘backstage area’ of information technology. It takes care of technical administration, is closely integrated with the information system and can be linked with additional surrounding systems via interfaces. The backend is in charge of the logic and functionalities to ensure seamless usability of the frontend. The backend also includes databases and database applications.
Complexity Shifts to the Frontend
Where once the frontend was free of any logic and function, a certain complexity can now also be found in the presentation layer. This is mostly because parts of the backend logic and functionality are shifting to the frontend. Even performance issues can be solved in the frontend today. One development that contributed to this change is the continuing decomposition of monolithic systems with the close integration of backend and frontend. For quite some time now, business systems have relied on a headless architecture, where the backend and frontend operate independently from each other. The advantage of this setup is that thanks to the systematic separation of both technologies, companies can use application programming interfaces (APIs) to dock different frontends to the same backend. This enables them to operate countless channels simultaneously with different data/information in online retail, such as websites, different apps, social media channels and other sales channels.
Shop Systems and Data Management
Whether multichannel or omnichannel, e-commerce is technology-driven these days. In addition, it comes with a high degree of customer-specific individualisation, which requires a stable backend. That is why providers of shop systems opt for the headless architecture described above. This is also called headless commerce.
The decoupled architecture has found a following in online retail in particular. One of the reasons is that systems with an integrated frontend will run without a hitch as standard, but due to the increasing complexity, it takes a lot of time and money to realise individual customer requirements.
Headless commerce, in contrast, enables companies to dock third-party systems and applications to the frontend or backend via interfaces when needed. The surrounding systems and applications perform complex data processing or data storage. Required data (such as images, videos and product information) can be delivered to the frontend or backend on demand.
Advantages
Large shop systems profit particularly, because with internationalisation, a bit of data quickly turns into a few terabytes – with images, video and audio data being stored in different derivatives (language, quality in megabytes/gigabytes). A conventional monolithic system may quickly reach its limits. With a headless approach, dedicated data systems supply data in channel-specific formats and versions.
Additional features and applications can be implemented quickly and easily.
It is even possible to remove individual solutions from the software as needed. The software core usually remains unaffected by these changes, which facilitates long-term maintenance.
In many cases, companies can avoid a big bang relaunch, which helps mitigate risks.
Contact for your Digital Solution with Unic
Book an appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you.
