Front end and back end: Difference between revisions

Revision as of 20:57, 30 March 2025

Revision as of 02:06, 1 April 2025

Line 1:

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

In [[software development]], '''front endfrontend''' refers to the [[presentation layer]] that users interact with, while '''back endbackend''' involves the [[data management]] and processing behind the scenes, and full-stack development refers to mastering both. In the [[client–server model]], the [[Client (computing)|client]] is usually considered the front endfrontend, handling user-facing tasks, and the [[Server (computing)|server]] is the back endbackend, managing data and logic. Some presentation tasks may also be performed by the server.

== Introduction ==

Line 7:

== Examples ==

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

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

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

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

A [[rule of thumb]] is that the client-side (or "front endfrontend") is any component manipulated by the user. The server-side (or "back endbackend") code usually resides on the [[Server (computing)|server]], often far removed physically from the user.

== Software definitions ==

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

In [[content management system]]s, the terms ''front endfrontend'' and ''back endbackend'' may refer to the end-user facing views of the CMS and the administrative views, respectively.<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 endfrontend refers to the part of the synthesis system that converts the input text into a [[symbol]]ic [[phonetics|phonetic]] representation, and the back endbackend 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 (back endbackend)|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 [[compilers]], the ''front endfrontend'' [[Translator (computing)|translates]] computer programming [[source code]] into an [[intermediate representation]], and the back endbackend works with the intermediate representation to produce code in a computer output language. The back endbackend usually [[Program optimization|optimizes]] to produce code that runs faster. The front endfrontend/back endbackend distinction can separate the [[Parsing|parser]] section that deals with source code and the back endbackend that [[Code generation (compiler)|generates code and optimizes]]. Some designs, such as [[GNU Compiler Collection|GCC]], offer choices between multiple front endsfrontends (parsing different source [[Programming language|languages]]) or back endsbackends (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>

Some [[graphical user interface]] (GUI) applications running in a [[desktop environment]] are implemented as a thin front endfrontend for underlying [[command-line interface]] (CLI) programs, to save the user from learning the special terminology and memorizing the [[Command (computing)|commands]].

=== Web development as an example ===

Another way to understand the difference between the two is to understand the knowledge required of a front endfrontend vs. a back endbackend [[software developer]]. The list below focuses on [[web development]] as an example.

==== Both ====

Line 34:

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

==== Front endFrontend focused ====

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

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

Line 48:

* [[User interface]]

==== Back endBackend focused ====

* [[Scripting language]]s like [[PHP]], [[Python (programming language)|Python]], [[Ruby (programming language)|Ruby]], [[Perl]], [[Node.js]], or [[Compiled language]]s like [[C Sharp (programming language)|C#]], [[Java (programming language)|Java]] or [[Go (programming language)|Go]]

* [[Data access layer]]

Line 63:

=== API ===

The front endfrontend communicates with back endbackend through an [[API]]. In the case of [[Web API|web]] and mobile front endsfrontends, the API is often based on [[HTTP]] request/response. The API is sometimes designed using the "Back endBackend for Front endFrontend" (BFF) pattern, that serves responses to ease the processing on front endfrontend side.<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>

== Hardware definitions ==

In [[computer network|network computing]], ''front endfrontend'' can refer to any [[Networking hardware|hardware]] that optimizes or protects [[network traffic]].<ref>{{Cite web|url=http://cacm.acm.org/magazines/2009/6/28494-network-front-end-processors-yet-again/fulltext|title=Network Front-End Processors, Yet Again {{!}} June 2009 {{!}} Communications of the ACM|last=O'Dell|first=Mike|website=cacm.acm.org|access-date=2016-12-30|archive-date=2016-12-30|archive-url=https://web.archive.org/web/20161230162057/http://cacm.acm.org/magazines/2009/6/28494-network-front-end-processors-yet-again/fulltext|url-status=live}}</ref> It is called '''application front-end hardware''' because it is placed on the network's [[DMZ (computing)|outward-facing frontend or boundary]]. Network traffic passes through the front-end hardware before entering the network.

In [[processor design]], ''front endfrontend design'' would be the initial description of the behavior of a circuit in a [[hardware description language]] such as [[Verilog]], while ''back endbackend design'' would be the process of mapping that behavior to physical transistors on a [[Die (integrated circuit)|die.]]<ref>{{Cite web|url=http://techdocs.altium.com/display/ADOH/Front-End+Design|title=Front-End Design {{!}} Online Documentation for Altium Products|website=techdocs.altium.com|access-date=2016-12-30|archive-date=2016-12-30|archive-url=https://web.archive.org/web/20161230160759/http://techdocs.altium.com/display/ADOH/Front-End+Design|url-status=live}}</ref>

== See also ==