Frontend and backend
In software development, frontend refers to the presentation layer that users interact with, while backend involves the data management and processing behind the scenes, and full-stack development refers to mastering both. In the client–server model, the client is usually considered the frontend, handling user-facing tasks, and the server is the backend, managing data and logic. Some presentation tasks may also be performed by the server.
Introduction
In
Examples
E-commerce Website: The frontend is the user interface (e.g., product pages, search bar), while the backend processes payments and updates inventory.
Banking App: The frontend displays account balances, while the backend handles secure transactions and updates records.
Social Media Platform: The frontend shows the news feed, while the backend stores posts and manages notifications.
In
A rule of thumb is that the client-side (or "frontend") is any component manipulated by the user. The server-side (or "backend") code usually resides on the server, often far removed physically from the user.
Software definitions
 | This section is in prose. is available. (September 2020) |
In content management systems, the terms frontend and backend may refer to the end-user facing views of the CMS and the administrative views, respectively.[1][2]
In speech synthesis, the frontend refers to the part of the synthesis system that converts the input text into a symbolic phonetic representation, and the backend converts the symbolic phonetic representation into actual sounds.[3]
In
Some graphical user interface (GUI) applications running in a desktop environment are implemented as a thin frontend for underlying command-line interface (CLI) programs, to save the user from learning the special terminology and memorizing the commands.
Web development as an example
Another way to understand the difference between the two is to understand the knowledge required of a frontend vs. a backend
Both
- Version control tools such as Git, Mercurial, or Subversion
- FTP or rsync
Frontend focused
- Markup and web languages such as Sass or jQuery
- Asynchronous request handling and AJAX
- )
- Web performance (largest contentful paint, time to interactive, 60 FPS animations and interactions, memory usage, etc.)
- Responsive web design
- Cross-browsercompatibility issues and workarounds
- End-to-end testing with a headless browser
- Build automation to transform and bundle JavaScript files, reduce image sizes and other processes using tools such as Webpack and Gulp.js
- Search engine optimization
- Accessibility concerns
- Basic usage of image editing tools such as GIMP or Photoshop
- User interface
Backend focused
- Scripting languages like PHP, Python, Ruby, Perl, Node.js, or Compiled languages like C#, Java or Go
- Data access layer
- Business logic
- Database administration
- Scalability
- High availability
- Security concerns, authentication and authorization
- Software architecture
- Data transformation
- Backup methods and software
Note that both positions, despite possibly working on one product, have a very distinct set of skills.
API
The frontend communicates with backend through an API. In the case of web and mobile frontends, the API is often based on HTTP request/response. The API is sometimes designed using the "Backend for Frontend" (BFF) pattern, that serves responses to ease the processing on frontend side.[5]
Hardware definitions
In network computing, frontend can refer to any hardware that optimizes or protects network traffic.[6] It is called application front-end hardware because it is placed on the network's outward-facing frontend or boundary. Network traffic passes through the front-end hardware before entering the network.
In processor design, frontend design would be the initial description of the behavior of a circuit in a hardware description language such as Verilog, while backend design would be the process of mapping that behavior to physical transistors on a die.[7]
See also
- Server-side
- Front-end web development
- Client–server model
- Out-of-box experience
- Modular programming
- Observer pattern
- Publish–subscribe pattern
- Pull technology
- Push technology
- Remote procedure call
- Application program interface(API)
References
- ^ "Front End vs Back End of Your Website: Everything You Need to Know". DOJO Creative. 7 February 2020. Archived from the original on 1 September 2022. Retrieved 31 August 2022.
- ^ Thapliyal, Vimal. "Difference Between Frontend and Backend MVC – Joomlatuts". joomlatuts.net. Archived from the original on 30 December 2016. Retrieved 30 December 2016.
- ^ Gutierrez--Osuna, Ricardo. "L18: Speech synthesis (backend)" (PDF). tamu.edu. Texas A&M University. Archived from the original (PDF) on 14 February 2019. Retrieved 29 December 2016.
- ^ Bin Muhammad, Rashid. "Operating Systems Notes". www.personal.kent.edu. Kent State University. Archived from the original on 31 August 2018. Retrieved 30 December 2016.
- ^ Wickramarachchi, Viduni (24 February 2021). "The BFF Pattern (Backend for Frontend): An Introduction". Bits and pieces. Archived from the original on 27 March 2024. Retrieved 13 November 2021.
- ^ O'Dell, Mike. "Network Front-End Processors, Yet Again | June 2009 | Communications of the ACM". cacm.acm.org. Archived from the original on 2016-12-30. Retrieved 2016-12-30.
- ^ "Front-End Design | Online Documentation for Altium Products". techdocs.altium.com. Archived from the original on 2016-12-30. Retrieved 2016-12-30.