What is a frontend?

The frontend and backend are in­de­pen­dent levels of software that com­ple­ment each other. If you imagine a piece of software like a restau­rant, 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­pec­ta­tions of humans. This means that dis­play­ing in­for­ma­tion ap­peal­ing­ly and struc­tur­ing in­ter­ac­tions in a com­pre­hen­si­ble way are top pri­or­i­ties. Frontend design aims to produce a good user ex­pe­ri­ence.

The frontend is a software layer that’s executed on the client. It is de­cep­tive­ly simple, as it doesn’t reveal the complex pro­cess­ing of in­for­ma­tion that’s happening in the backend. Behind the scenes, the frontend com­mu­ni­cates 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­a­ra­tion of concerns”, the frontend and backend are realized as in­de­pen­dent 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­vel­op­ers 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­ized 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­vel­op­ers 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­vel­op­ers, who are the pro­fes­sion­al pro­gram­mers re­spon­si­ble for creating, main­tain­ing and con­tin­u­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­vel­op­ers do? We’ll take a look at an example from the WordPress universe. Frontend de­vel­op­ers create the WordPress Widgets and WordPress themes that make WordPress sites so at­trac­tive.

With the help of a WordPress theme created by frontend de­vel­op­ers, the different content on in­di­vid­ual pages of a site is embedded in pre­de­fined struc­tures, which ensures a con­sis­tent design across the website.

Frontend de­vel­op­ers build landing pages and use Call-to-Action (CTA) elements to guide users through a site. Re­spon­sive design is of par­tic­u­lar im­por­tance 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 JavaScript, which cor­re­spond 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­nec­es­sary work. Frontend frame­works sig­nif­i­cant­ly simplify the job.

Different frontend frame­works offer different features and ad­van­tages for different sit­u­a­tions. They expand the range of web languages, simplify con­nec­tiv­i­ty with the backend and ensure con­sis­tent func­tion­al­i­ty across browser versions.

Newer frame­works like React and Vue focus on re­ac­tiv­i­ty: Changes in data are im­me­di­ate­ly reflected in the frontend. Also central to these frame­works are com­po­nents, which are self-contained, reusable UI elements.

Depending on your approach, you’ll find pure CSS or JavaScript 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 JavaScript frontend frame­works are all about tailor-made, reactive com­po­nents. Com­po­nents bring together structure, ap­pear­ance and behavior and au­to­mat­i­cal­ly adapt to changes in un­der­ly­ing data. For example, if you delete a piece of data, the cor­re­spond­ing entry will disappear from a list and a counter will im­me­di­ate­ly 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­pli­ca­tions or more so­phis­ti­cat­ed apps and are quite complex. A modern al­ter­na­tive is the sig­nif­i­cant­ly 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 JavaScript, Svelte uses a compiler. This means that the simple Svelte code written by de­vel­op­ers is turned into more complex JavaScript 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­ter­na­tives provided much-needed stan­dard­iza­tion across different browsers and versions and offered a selection of ready-made com­po­nents such as nav­i­ga­tion menus, ac­cor­dions with foldout fields and animated image sliders.

What all of these frame­works have in common is that they use both JavaScript and CSS code. The compact UI framework ZURB Foun­da­tion focused on adapt­abil­i­ty for pro­fes­sion­al apps. jQuery UI then came with a min­i­mal­ist approach that could be combined with the popular JavaScript framework.

The advantage of these frontend frame­works is that they are in­cred­i­bly easy to use. It’s usually enough to insert a CSS or JavaScript file. However, if you want to make changes or op­ti­miza­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 JavaScript and CSS, single-concern frame­works are limited to one language. Tailwind CSS es­tab­lished a standard for providing frontend com­po­nents 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 behavior and re­ac­tiv­i­ty. Instead of CSS, it uses ready-made JavaScript snippets. The framework describes itself as “jQuery for the modern web”, thus coming full circle with a nod to the classic JavaScript framework.

One decisive advantage of single-concern frontend frame­works is their sim­plic­i­ty. 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­bi­na­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 foun­da­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 foun­da­tion. Unlike Flutter, GTK isn’t based on web tech­nolo­gies. But it does offer a large selection of pro­gram­ming languages for work in the framework.