What is a frontend?
IONOS editorial team7 mins
The frontend and backend are independent levels of software that complement each other. If you imagine a piece of software like a restaurant, 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 management staff and admin work.
A frontend is the graphic user interface of a website or app. It’s where information is presented and where users interact with the app.
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 expectations of humans. This means that displaying information appealingly and structuring interactions in a comprehensible way are top priorities. Frontend design aims to produce a good user experience.
The frontend is a software layer that’s executed on the client. It is deceptively simple, as it doesn’t reveal the complex processing of information that’s happening in the backend. Behind the scenes, the frontend communicates with the backend in order to sync data and make changes. Programming interfaces called APIs are usually used for that.
Based on the development principle “separation of concerns”, the frontend and backend are realized as independent layers. However, both layers are necessary for a fully functioning 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:
- Users who work with the frontend
- Frontend developers 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 interacting with the app using specialized buttons. As with websites, the scope of interactions is limited to a few clearly defined paths. However, the user may have more options for creating content themself.
How do developers 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 developers, who are the professional programmers responsible for creating, maintaining and continuing to develop a frontend. They’re often supported by designers, since user friendly web design is a top priority.
So what exactly do frontend developers do? We’ll take a look at an example from the WordPress universe. Frontend developers create the WordPress Widgets and WordPress themes that make WordPress sites so attractive.
With Managed WordPress Hosting from IONOS, you have the ideal basis for your WordPress website - professionally managed and always up to date.
With the help of a WordPress theme created by frontend developers, the different content on individual pages of a site is embedded in predefined structures, which ensures a consistent design across the website.
Frontend developers build landing pages and use Call-to-Action (CTA) elements to guide users through a site. Responsive design is of particular importance to frontend programming.
What are the most important frontend frameworks?
A frontend is shown to users on their end devices (“clients”). One important distinction 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 development 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 correspond to the three concerns in web programming:
| Concern | Language |
|---|---|
| Structure | HTML |
| Presentation | CSS |
| Behavior | JavaScript |
In theory, frontends can be created using nothing more than those three web languages. However, that would involve a lot of unnecessary work. Frontend frameworks significantly simplify the job.
Different frontend frameworks offer different features and advantages for different situations. They expand the range of web languages, simplify connectivity with the backend and ensure consistent functionality across browser versions.
Newer frameworks like React and Vue focus on reactivity: Changes in data are immediately reflected in the frontend. Also central to these frameworks are components, which are self-contained, reusable UI elements.
Depending on your approach, you’ll find pure CSS or JavaScript frontend frameworks. There’s also a distinction made between web and cross-platform frontend frameworks.
Component-based developing with reactive frontend frameworks
These JavaScript frontend frameworks are all about tailor-made, reactive components. Components bring together structure, appearance and behavior and automatically adapt to changes in underlying data. For example, if you delete a piece of data, the corresponding entry will disappear from a list and a counter will immediately show the accurate value.
The top dogs in reactive frontend frameworks are Angular and React. Both frameworks can be used to create single page applications or more sophisticated apps and are quite complex. A modern alternative is the significantly leaner framework Vue.
The Svelte framework is an interesting new development that **takes a different approach than React and its peers. Rather than inventing new structures within JavaScript, Svelte uses a compiler. This means that the simple Svelte code written by developers is turned into more complex JavaScript code by the compiler.
Most reactive frontend frameworks simplify work with global data. This is made possible by a “state store” which is used for encapsulating state data.
Frontend code may be generated using a separate build process with a task runner like Gulp or Grunt.
Mixed concern frontend frameworks: The old guard
These older frontend frameworks were very popular before the advent of reactive frameworks. Bootstrap and Bootstrap alternatives provided much-needed standardization across different browsers and versions and offered a selection of ready-made components such as navigation menus, accordions with foldout fields and animated image sliders.
What all of these frameworks have in common is that they use both JavaScript and CSS code. The compact UI framework ZURB Foundation focused on adaptability for professional apps. jQuery UI then came with a minimalist approach that could be combined with the popular JavaScript framework.
The advantage of these frontend frameworks is that they are incredibly easy to use. It’s usually enough to insert a CSS or JavaScript file. However, if you want to make changes or optimizations, the picture quickly gets more complex. Combining different parts of these frameworks has also proved difficult.
Single-concern frontend frameworks: The lean specialists
Unlike mixed-concern frontend frameworks that combine JavaScript and CSS, single-concern frameworks are limited to one language. Tailwind CSS established a standard for providing frontend components with CSS rules. In Tailwind, pre-defined classes are embedded into an HTML structure, rather than the user writing CSS code themselves.
The frontend framework Alpine JS, on the other hand, is the go-to tool for behavior and reactivity. 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.
Learn the basics of selectors, syntax and more with our jQuery tutorial.
One decisive advantage of single-concern frontend frameworks is their simplicity. It’s usually possible to limit the amount code to what’s actually needed, though this may require a separate build process. Furthermore, parts of these different frameworks can be combined with each other. A popular combination is Tailwind CSS + Alpine JS.
Cross-platform frameworks: Creating several frontends at once
All of the frameworks discussed above are oriented towards web browsers. There are also cross-platform frontend frameworks 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 programming language Dart. A user interface built in Flutter can serve as a foundation 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 foundation. Unlike Flutter, GTK isn’t based on web technologies. But it does offer a large selection of programming languages for work in the framework.
