The frontend and the backend represent two levels within software, both independent and complementary. Let's compare software to a restaurant: the frontend corresponds to the exterior facade, the menu and the staff in the room. On the other hand, still in this comparison, the backend includes the kitchen and all the management work, particularly linked to the staff and the production and administration processes.
The frontend corresponds to thegraphical user interface of a website or application ; it is therefore necessarily turned towards the outside. The frontend allows you to present information and create interaction with users.
What is a frontend?
The frontend corresponds to a graphical user interface. It allows you to use a website or application. The frontend is mainly focused on user needs and expectations. It helps you ensure that information is presented in an attractive manner and that the structuring of interactions is clearly understandable. The goal of frontend design is to ensure a good user experience (UX).
The frontend actually corresponds to a software layer that runs on the client. The frontend, however, hides a certain complexity, because in reality, the processing of information is carried out by the backend. In the shadows, the frontend is therefore in communication with the backend, so as to compare their data, then to reflect the changes thus identified. To do this, programming interfaces called APIs are generally used.
In accordance with the principle Separation of concerns (literally “Separation of Concerns”), the frontend and the backend are made as independent levels. For software to be fully functional, it must always consist of these two levels. A frontend without a backend is like a simple theater set.
Who works on the frontend?
Generally speaking, two very different groups of users use the frontend:
- THE users who work with the frontend;
- frontend developerswhose job is to create and manage frontend interfaces.
Discover with us the similarities and differences between these two groups when working with the frontend.
On a website, visitors use links to navigate from one page to another. In doing so, they consume content (whether text or media) and interact with it using buttons or other dynamic elements. These interactions are notably based on HTML forms which are undoubtedly familiar to you, with their selection menus, their input fields and their buttons.
Conceptually, this process also concerns users logged into an application. In these situations, the latter take advantage of much richer possibilities for interaction in the frontend, thanks to specialized buttons. Here too, however, the scope of interactions is limited to a certain number of clearly defined routes. Several possibilities can nevertheless be exploited to create content.
Users quickly find themselves limited in their interactions with the frontend, which is not the case for “frontend” developers. These programming professionals support creation, maintenance and development of the frontend Designers often help them with this task. At the end of the day, it’s the usability of web design that prevails.
What exactly is frontend development? Discover with us an example from the WordPress ecosystem. Frontend developers create WordPress widgets and WordPress themes to give a WordPress site an attractive appearance.
With WordPress hosting offered by IONOS, professionals will support you in creating and maintaining your WordPress website.
Using a **WordPress theme created by frontend developers, the different contents of all pages and contributions are integrated into well-defined structures. This ensures consistency in the presentation of all content across the entire site.
Frontend developers create landing pages and use call-to-action (or CTA) elements to help visitors find their way around the sites. The emphasis is therefore particularly placed on “Responsive Design”.
What are the main frameworks for the frontend?
The frontend is made available to users on their terminals (or “clients”). In principle, there is a difference between the web frontendfor display in the browser, and the native frontend, specific to an operating system. Modern methods, focused on cross-platform development, make it possible to create several frontends from the same base.
Web frontends involve code, written in the web languages HTML, CSS, and JavaScript. These languages make it possible to respond to the three Main Concerns Related to Web Programming :
| Concern | Language |
|---|---|
| Structure | HTML |
| Presentation | CSS |
| Behavior | JavaScript |
In principle, it is possible to directly create frontends based on these three web languages. However, it would not be wise to adopt such an approach as it would require a lot of unnecessary effort. In this regard, frontend frameworks make the work considerably easier.
Depending on their area of application, these frontend frameworks can have different functions. They expand the scope of web languages, make it easier to link with the backend and ensuring consistency of functions between different browser versions. Some frameworks also allow you to improve performance using specific techniques.
The most recent frameworks, notably React and Vue, rely more and more on reactivity; Thus, changes to data appear immediately on the frontend. These frameworks also emphasize components as a central concept. They take the form of encapsulated and reusable units, composed of reactive and constituent elements of the user interface.
Depending on the approach you want to use, you can opt for a CSS or JavaScript frontend framework. There is also a difference between web frontend or cross-platform frameworks.
Reactive frameworks: developing component-based frontends
With JavaScript frontend frameworks the emphasis is on responsive, custom-designed components. These combine concerns about structure, presentation, and behavior, and automatically adapt if the underlying data changes. For example, if you delete a data set, the corresponding entry disappears from the list view. If applicable, a counter can immediately return the new value.
For several years now, Angular and React have been true champions in the field of reactive frontend frameworks. Both allow you to create single page applications, but also larger applications, considered to be rather complex. The Vue frontend framework is much lighter, and represents a modern alternative solution.
Newly developed, the Svelte framework is also very interesting. Indeed, Svelte follows a completely different path from the approach taken by React and other frameworks. Svelte does not invent new structures within JavaScript, but rather acts as a compiler. Svelte therefore allows you to write simple code, which is then converted by the compiler to form more complex JavaScript code.
The majority of reactive frontend frameworks also make it easier to work with global data. To do this, a “State Store” allowingencapsulate state data is then used.
To generate frontend code, it is optionally possible to use a separate build process with a task runner such as Gulp or Grunt.
Multi-concern frontend frameworks: the old generation
These older frontend frameworks were extremely popular before reactive frameworks came along. Bootstrap or its counterparts offered an extremely sought-after function at the time, namely standardization to overcome differences between browsers, as well as a selection of already pre-designed components. These included hierarchical navigation menus, accordion blocks with drop-down menus, and animated image carousels.
These frameworks share one thing in common: they include both JavaScript code and CSS code. The compact ZURB Foundation UI framework was more focused on adaptability for business applications. jQuery UI placed more emphasis on a minimalist approach in combination with the popular JavaScript framework.
All these frontend frameworks have the advantage of being very easy to use. Most of the time, it is enough to integrate a CSS and/or JavaScript file. However, as soon as you want to adapt and optimize your work, the situation can very quickly become complex. Experience has also shown that combining different parts of these frameworks can also prove rather problematic.
Single-concern frontend frameworks: the simplification specialists
Unlike multi-concern frontend frameworks that combine JavaScript and CSS, Single-concern frontend frameworks only emphasize one language. Tailwind CSS has almost established a standard for providing frontend components with CSS rules. You don't have to write the CSS code yourself: predefined classes are integrated directly into the HTML structure.
The Alpine JS frontend framework is to behavior and responsiveness what Tailwind is to presentation. Instead of CSS, it uses pre-designed JavaScript snippets. The Alpine JS framework is compared to the jQuery solution, which earns it a place in the virtuous circle of classic JavaScript frameworks.
Check out our jQuery tutorial to learn the basics of selectors, syntax, and more.
Single-concern frontend frameworks have one big advantage: their simplicity. They generally ensure that you do not use more code than necessary. To do this, you may need to use a separate creation process. Furthermore, certain parts of these frameworks can be combined. Tailwind CSS and Alpine JS form a particularly popular combination.
Create several frontends from the same base using cross-platform frameworks
The aforementioned frontend frameworks are all focused on displaying in a web browser, but there are also cross-platform frontend frameworks that generate code for native applications. Native applications are not attached to a browser; they run directly on an operating system, for example Windows, macOS, Android or iOS.
Flutter is a popular cross-platform frontend framework built on Dart, Google's proprietary programming language. A user interface created with Flutter serves as a common base from which you can design multiple native and web frontends.
The GTK frontend framework is purely native and offers a similar approach. It is possible to create frontends for Linux, Windows, and macOS from a common basis. Unlike Flutter, GTK is not based on web technologies. On the other hand, it is possible to work with GTK from a large number of programming languages, using connections.
