What is a frontend?

The frontend and backend are in­de­pend­ent levels of software that com­ple­ment each other. If you imagine a piece of software like a res­taur­ant, the frontend would include things like the facade, the tables and chairs inside, the menu and the serving staff. The backend, on the other hand, would include the kitchen, the man­age­ment staff and admin work.

What does frontend mean?

A frontend is a graphic user interface where a website or app can be operated by users. Frontends are oriented towards the needs and ex­pect­a­tions of humans. This means that dis­play­ing in­form­a­tion ap­peal­ingly and struc­tur­ing in­ter­ac­tions in a com­pre­hens­ible way are top pri­or­it­ies. Frontend design aims to produce a good user ex­per­i­ence.

The frontend is a software layer that’s executed on the client. It is de­cept­ively simple, as it doesn’t reveal the complex pro­cessing of in­form­a­tion that’s happening in the backend. Behind the scenes, the frontend com­mu­nic­ates with the backend in order to sync data and make changes. Pro­gram­ming in­ter­faces called APIs are usually used for that.

Based on the de­vel­op­ment principle ‘sep­ar­a­tion of concerns’, the frontend and backend are realised as in­de­pend­ent layers. However, both layers are necessary for a fully func­tion­ing piece of software. A frontend without a backend is like a facade with nothing behind it.

Who works on the frontend?

There are two groups who work on the frontend in different ways:

1. Users who work with the frontend
2. Frontend de­velopers who build and maintain frontends

In what follows, we’ll look more closely at these two groups and how they work on the frontend.

How do users work with the frontend?

Website visitors navigate among a site’s subpages using links. They consume content like text and media and interact with buttons and other elements, like HTML forms with drop-down menus and input fields.

The same concept applies to app users, who have access to extensive options for in­ter­act­ing with the app using spe­cial­ised buttons. As with websites, the scope of in­ter­ac­tions is limited to a few clearly defined paths. However, the user may have more options for creating content themself.

How do de­velopers work with the frontend?

Users are very limited in what they can do in a frontend. The case could not be more different for frontend de­velopers, who are the pro­fes­sion­al pro­gram­mers re­spons­ible for creating, main­tain­ing and con­tinu­ing to develop a frontend. They’re often supported by designers, since user friendly web design is a top priority.

So what exactly do frontend de­velopers do? We’ll take a look at an example from the WordPress universe. Frontend de­velopers create the WordPress Widgets and WordPress themes that make WordPress sites so at­tract­ive.

With the help of a WordPress theme created by frontend de­velopers, the different content on in­di­vidu­al pages of a site is embedded in pre­defined struc­tures, which ensures a con­sist­ent design across the website.

Frontend de­velopers build landing pages and use Call-to-Action (CTA) elements to guide users through a site. Re­spons­ive design is of par­tic­u­lar im­port­ance to frontend pro­gram­ming.

What are the most important frontend frame­works?

A frontend is shown to users on their end devices (‘clients’). One important dis­tinc­tion is between web frontends, which are built for display in browsers, and native frontends, which are designed for a specific operating system. Luckily modern methods of cross-platform de­vel­op­ment make it possible to create several frontends based on a common base.

Web frontends include code in the web languages HTML, CSS and JavaS­cript, which cor­res­pond to the three concerns in web pro­gram­ming:

In theory, frontends can be created using nothing more than those three web languages. However, that would involve a lot of un­ne­ces­sary work. Frontend frame­works sig­ni­fic­antly simplify the job.

Different frontend frame­works offer different features and ad­vant­ages for different situ­ations. They expand the range of web languages, simplify con­nectiv­ity with the backend and ensure con­sist­ent func­tion­al­ity across browser versions.

Newer frame­works like React and Vue focus on re­act­iv­ity: Changes in data are im­me­di­ately reflected in the frontend. Also central to these frame­works are com­pon­ents, which are self-contained, reusable UI elements.

Depending on your approach, you’ll find pure CSS or JavaS­cript frontend frame­works. There’s also a dis­tinc­tion made between web and cross-platform frontend frame­works.

Component-based de­vel­op­ing with reactive frontend frame­works

These JavaS­cript frontend frame­works are all about tailor-made, reactive com­pon­ents. Com­pon­ents bring together structure, ap­pear­ance and behaviour and auto­mat­ic­ally adapt to changes in un­der­ly­ing data. For example, if you delete a piece of data, the cor­res­pond­ing entry will disappear from a list and a counter will im­me­di­ately show the accurate value.

The top dogs in reactive frontend frame­works are Angular and React. Both frame­works can be used to create single page ap­plic­a­tions or more soph­ist­ic­ated apps and are quite complex. A modern al­tern­at­ive is the sig­ni­fic­antly leaner framework Vue.

The Svelte framework is an in­ter­est­ing new de­vel­op­ment that **takes a different approach than React and its peers. Rather than inventing new struc­tures within JavaS­cript, Svelte uses a compiler. This means that the simple Svelte code written by de­velopers is turned into more complex JavaS­cript code by the compiler.

Most reactive frontend frame­works simplify work with global data. This is made possible by a ‘state store’ which is used for en­cap­su­lat­ing state data.

Frontend code may be generated using a separate build process with a task runner like Gulp or Grunt.

Mixed concern frontend frame­works: The old guard

These older frontend frame­works were very popular before the advent of reactive frame­works. Bootstrap and Bootstrap al­tern­at­ives provided much-needed stand­ard­isa­tion across different browsers and versions and offered a selection of ready-made com­pon­ents such as nav­ig­a­tion menus, ac­cor­di­ons with foldout fields and animated image sliders.

What all of these frame­works have in common is that they use both JavaS­cript and CSS code. The compact UI framework ZURB Found­a­tion focused on ad­apt­ab­il­ity for pro­fes­sion­al apps. jQuery UI then came with a min­im­al­ist approach that could be combined with the popular JavaS­cript framework.

The advantage of these frontend frame­works is that they are in­cred­ibly easy to use. It’s usually enough to insert a CSS or JavaS­cript file. However, if you want to make changes or op­tim­isa­tions, the picture quickly gets more complex. Combining different parts of these frame­works has also proved difficult.

Single-concern frontend frame­works: The lean spe­cial­ists

Unlike mixed-concern frontend frame­works that combine JavaS­cript and CSS, single-concern frame­works are limited to one language. Tailwind CSS es­tab­lished a standard for providing frontend com­pon­ents with CSS rules. In Tailwind, pre-defined classes are embedded into an HTML structure, rather than the user writing CSS code them­selves.

The frontend framework Alpine JS, on the other hand, is the go-to tool for behaviour and re­act­iv­ity. Instead of CSS, it uses ready-made JavaS­cript snippets. The framework describes itself as ‘jQuery for the modern web’, thus coming full circle with a nod to the classic JavaS­cript framework.

One decisive advantage of single-concern frontend frame­works is their sim­pli­city. It’s usually possible to limit the amount code to what’s actually needed, though this may require a separate build process. Fur­ther­more, parts of these different frame­works can be combined with each other. A popular com­bin­a­tion is Tailwind CSS + Alpine JS.

Cross-platform frame­works: Creating several frontends at once

All of the frame­works discussed above are oriented towards web browsers. There are also cross-platform frontend frame­works that create code for native apps. Native apps don’t need a browser and instead run directly on an operating systems like Windows, macOS, Android or iOS.

One popular cross-platform frontend framework is Flutter, which is based on Google’s pro­gram­ming language Dart. A user interface built in Flutter can serve as a found­a­tion for creating several native and web frontends.

The native frontend framework GTK takes a similar approach. In GTK, you can create frontends for Linux, Windows and macOS using the same found­a­tion. Unlike Flutter, GTK isn’t based on web tech­no­lo­gies. But it does offer a large selection of pro­gram­ming languages for work in the framework.