Front end and back end: Difference between revisions

Revision as of 21:38, 25 July 2006

Latest revision as of 18:36, 23 August 2025

(401 intermediate revisions by more than 100 users not shown)

Line 1:

{{Short description|Presentation and data management in software systems}}

{{cleanup-date|July 2006}}

In [[software development]], '''front end''' refers to the [[presentation layer]] that users interact with, while '''back end''' refers to the [[data management]] and processing behind the scenes. "Full stack" refers to both together. In the [[client–server model]], the [[Client (computing)|client]] is usually considered the front end, handling most user-facing tasks, and the [[Server (computing)|server]] is the back end, mainly managing data and logic.

== Introduction ==

In their most general meanings, the terms '''front end''' and '''back end''' refer to the initial and the end stages of a process flow. These terms acquire more special meanings in particular areas. The general idea is that the front-end is responsible for collecting input from the user, which can be in a variety of forms, and processing it in such a way that it conforms to a specification that the back-end can use. The connection of the front-end to the back-end is a kind of [[interface (computer science)|interface]].

In [[software architecture]], there can be many [[Abstraction layer|layers]] between the hardware and [[End-user (computer science)#End user|end user]]. The ''front end'' is an abstraction, simplifying the underlying components by providing a [[user-friendly]] interface, while the ''back end'' handles data storage and [[business logic]].

== Examples ==

*In [[software design]], the front-end is the part of a software system that interacts directly with the user, and the back-end comprises the components that process the output from the front-end. The separation of software systems into "front ends" and "back ends" is a kind of [[abstraction (computer science)|abstraction]] that helps to keep different parts of the system separated.

'''E-commerce Website''': The front end is the user interface (e.g., product pages, search bar), while the back end processes payments and updates inventory.

*Some common methods for interacting with computers can be conceptualized in terms of a "front-end" and "back-end". For example, a graphical [[file manager]], such as [[Windows Explorer]] or the [[Nautilus file manager]], can be thought of as a front-end to the computer's [[file system]]. At the [[operating system|OS]] level, the concept of a [[graphical user interface]] (GUI) can be thought of as a "front end" for the system (for general users), while the [[command line]] or "[[Text User Interface|TUI]]" is sufficiently technical to be considered a "back-end." This often applies to [[software]] packages as well, which may have both graphical interfaces (front) as well as command-line [[Scripting programming language|scripts]] (back).

'''Banking App''': The front end displays account balances, while the back end handles secure transactions and updates records.

*In [[compilers]], the front-end translates the source language into an intermediate representation, and the back-end works with the internal representation to produce code in the output language.

'''Social Media Platform''': The front end shows the news feed, while the back end stores posts and manages notifications.

*In [[speech synthesis]], the front-end refers to the part of the synthesis system that converts the input text into a [[symbolic]] [[phonetics|phonetic]] representation, and the back-end converts the symbolic phonetic representation into actual sounds.

In [[telecommunication]], the front end can be considered a device or service, while the back end is the infrastructure that supports the provision of services.

*Many programs are divided conceptually into front and back ends, but in most cases, the "back-end" is hidden from the user. However, sometimes programs are written which serve simply as a front-end to another, already existing program, such as a graphical user interface (GUI) which is built on top of a [[command-line interface]]. This type of front-end is common in [[Unix]] GUIs, where individual programs are developed on the design [[philosophy]] of many small, well-tested programs, able to run independently or together. See graphical ([[desktop environment]]) and semi-graphical (such as [[Ncurses]]) frontends.

A [[rule of thumb]] is that the front end, or client side, includes any components manipulated by the user. The back end, or server side, usually resides on the [[Server (computing)|server]], often far removed physically from the user.

*In radio telescopes, the 'front end' consists of the package containing the [[feed horn]] and [[wave guide]], as well as the antennas required to detect the radio signal. The 'back end' refers to the amplification and filtering systems that refine and edit the signal before presenting it to the user.

== Software definitions ==

*In [[electronic design automation]], front-end stages of the design cycle are logical and electrical design (e.g., [[schematic capture]], [[logic synthesis]]). Sometimes [[floorplanning]] is also considered front-end. Back-end are [[place and route]], custom layout design and physical verification ([[design rule checking]], [[layout versus schematic]], [[parasitics extraction]]).

{{prose|section|date=September 2020}}

In [[content management system]]s, the front end refers to views facing end users, and the back end refers to views facing administrative users.<ref>{{Cite web|url=https://letsgodojo.com/front-end-vs-back-end/|title=Front End vs Back End of Your Website: Everything You Need to Know|website=DOJO Creative|date=7 February 2020|access-date=31 August 2022|archive-date=1 September 2022|archive-url=https://web.archive.org/web/20220901020406/https://letsgodojo.com/front-end-vs-back-end/|url-status=live}}</ref><ref>{{Cite web|url=http://joomlatuts.net/joomla-2-5/87-how-backend-model-view-controller-mvc-works-in-joomla/98-difference-between-frontend-and-backend-mvc|title=Difference Between Frontend and Backend MVC – Joomlatuts|last=Thapliyal|first=Vimal|website=joomlatuts.net|access-date=30 December 2016|archive-url=https://web.archive.org/web/20161230230237/http://joomlatuts.net/joomla-2-5/87-how-backend-model-view-controller-mvc-works-in-joomla/98-difference-between-frontend-and-backend-mvc|archive-date=30 December 2016|url-status=dead}}</ref>

In [[speech synthesis]], the front end refers to the part of the synthesis system that converts the input text into a [[symbol]]ic [[phonetics|phonetic]] representation, and the back end converts the symbolic phonetic representation into actual sounds.<ref>{{Cite web|url=http://research.cs.tamu.edu/prism/lectures/sp/l18.pdf|title=L18: Speech synthesis (backend)|last=Gutierrez--Osuna|first=Ricardo|website=tamu.edu|publisher=Texas A&M University|access-date=29 December 2016|archive-date=14 February 2019|archive-url=https://web.archive.org/web/20190214183352/http://research.cs.tamu.edu/prism/lectures/sp/l18.pdf|url-status=dead}}</ref>

*In a [[steam locomotive]], the front end is the [[smokebox]] end of the locomotive, at the front end of the boiler, hot gases rush into the smokebox before escaping into the air via a "chimney" or "stack".

In [[compilers]], the front end [[Translator (computing)|translates]] computer [[source code]] into an [[intermediate representation]], and the back end produces executable code from the intermediate representation. The back end usually [[Program optimization|optimizes]] to produce code that runs faster. The front end/back end distinction can also separate a [[Parsing|parser]] that deals with source code from a compiler that [[Code generation (compiler)|generates and optimizes executable code]]. Some designs, such as [[GNU Compiler Collection|GCC]], offer multiple front end options (parsing different source [[Programming language|languages]]) and multiple back end options (generating code for different target [[Central processing unit|processors]]).<ref>{{Cite web|url=http://www.personal.kent.edu/~rmuhamma/Compilers/MyCompiler/phase.htm|title=Operating Systems Notes|last=Bin Muhammad|first=Rashid|website=www.personal.kent.edu|publisher=Kent State University|access-date=30 December 2016|archive-date=31 August 2018|archive-url=https://web.archive.org/web/20180831090618/http://personal.kent.edu/~rmuhamma/Compilers/MyCompiler/phase.htm|url-status=live}}</ref>

*In business, the process of handling stock is often broken down into three stages: in the "front office" orders are taken from the customers, passed on to the "middle office" for actual processing, and finally to the "back office" which handles accounting and billing. This terminology is used in a number of seemingly unrelated industries; in stock trading, for instance, the front office is an order placed by a user or broker in very general terms, the middle office handles the actual trading within those terms, and then they inform the back office of the actual details of the transaction.

Some [[graphical user interface]] (GUI) applications act as a thin front end for underlying [[command-line interface]] (CLI) programs, to save users from having to learn the CLI terminology and [[Command (computing)|commands]].

*In business, a "back-end plan" is a type of [[poison pill]] arrangement. In this plan, current shareholders of the targeted company receive a rights [[dividend]], which allows for exchange of a share of [[stock]] (including voting rights) for senior securities or cash equivalent to the "back-end" price established by the targeted firm. As a result of this strategy, the [[takeover]] bidder is unable to both 1) exercise this right, and 2) easily deter the rise in acquisition price.

=== Web development as an example ===

==See also==

Another way to understand the differences between the front end and back end is to consider the knowledge that each requires of a [[software developer]]. The example lists below focus on [[web development]].

==== Front end ====

* [[Client-server architecture]]

* Markup and web languages such as [[HTML]], [[CSS]], and [[JavaScript]], as well as ancillary libraries commonly used in those languages, such as [[Sass (stylesheet language)|Sass]] or [[jQuery]]

* [[Three-tier (computing)|Three-tier system]]

* [[Asynchronous I/O|Asynchronous]] request handling and [[Ajax (programming)|AJAX]]

* [[Single-page application]]s with frameworks like [[React (JavaScript library)|React]], [[Angular (web framework)|Angular]] or [[Vue.js]]

* [[Web performance]] (optimization of things like largest contentful paint, time to interactive, animation [[Frame rate|FPS]], and memory usage)

* [[Responsive web design]]

* [[Cross-browser]] compatibility issues and workarounds

* [[Software testing|End-to-end testing]] with a [[headless browser]]

* [[Build automation]] to transform and bundle JavaScript files, reduce image sizes, and handle other processes using tools such as [[Webpack]] and [[Gulp.js]]

* [[Search engine optimization]]

* [[Web accessibility|Accessibility]] concerns

* Image editing tools such as [[GIMP]] or [[Adobe Photoshop|Photoshop]]

* [[User interface]] design and creation

==== Back end ====

[[Category:Software engineering]]

* [[Scripting language]]s like [[PHP]], [[Python (programming language)|Python]], [[Ruby (programming language)|Ruby]], [[Perl]], and [[Node.js]]

* [[Compiled language]]s like [[C Sharp (programming language)|C#]], [[Java (programming language)|Java]], and [[Go (programming language)|Go]]

* [[Data access layer]]

* [[Business logic]]

* [[Database administrator|Database administration]]

* [[Scalability]]

* [[High availability]]

* Security concerns, such as [[authentication]] and [[authorization]]

* [[Software architecture]]

* [[Data transformation]]

* [[Backup]] methods and software

==== Front end and back end ====

[[de:Frontend]]

* [[Version control]] tools such as [[Git]], [[Mercurial]], and [[Apache Subversion|Subversion]]

[[es:Front-end y back-end]]

* [[File transfer]] tools and protocols such as [[FTP]] and [[rsync]]

[[it:Front-end e back-end]]

[[nl:Frontend]]

=== API ===

[[ja:フロントエンド]]

[[pl:Front-end]]

The front end communicates with the back end through an [[API]]. In the case of [[Web API|web]] and mobile front ends, the API is often based on [[HTTP]] requests/responses. An API can also reduce the front-end processing load by using different back-end services for different front-end interfaces, such as in the "Back end For Front end" (BFF) pattern.<ref>{{cite web | last=Wickramarachchi | first=Viduni | title=The BFF Pattern (Backend for Frontend): An Introduction | website=Bits and pieces | date=24 February 2021 | url=https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf | access-date=13 November 2021 | archive-date=27 March 2024 | archive-url=https://web.archive.org/web/20240327144654/https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf?gi=f6e22c3d720c | url-status=live }}</ref>

[[pt:Frontend]]

== Hardware definitions ==

In [[computer network|computer networking]], ''front end'' can refer to [[Networking hardware|hardware]] that connects devices to the network, provides security such as a [[DMZ (computing)|DMZ]], or converts data into a [[Network Packet|transportable format]]. ''Back end'' refers to hardware that handles and transports data within the network.

In [[processor design]], ''front-end design'' can refer to the initial description of a circuit's behavior in a [[hardware description language]] such as [[Verilog]], while ''back-end design'' can refer to the process of mapping that behavior to physical transistors on a [[Die (integrated circuit)|die.]]<

== See also ==

{{Columns-list|colwidth=30em|

* [[Client-side]], [[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 ==

{{Reflist|30em}}

{{Web interfaces}}

{{DEFAULTSORT:Front And Back Ends}}

[[Category:Software architecture]]

[[Category:Software engineering terminology]]