Front end and back end: Difference between revisions

Revision as of 18:09, 15 November 2021

Latest revision as of 18:36, 23 August 2025

(48 intermediate revisions by 33 users not shown)

Line 1:

{{shortShort description|Presentation layerand ofdata piecemanagement ofin software systems}}

In [[software engineeringdevelopment]], the terms '''frontend''' and '''backend''' (or sometimes referred to as '''front end''' or '''back-end''') referrefers to the [[separationpresentation of concernslayer]] betweenthat theusers [[presentationinteract layer]]with, while (''frontend'back end'''), andrefers to the [[data access layermanagement]] (''backend'')and ofprocessing abehind piecethe ofscenes. [[software]],"Full orstack" therefers physicalto infrastructureboth or [[Hardware (computer)|hardware]]together. In the [[client–server model]], the [[Client (computing)|client]] is usually considered the frontendfront end, handling most user-facing tasks, and the [[Server (computing)|server]] is usuallythe consideredback the backendend, evenmainly whenmanaging somedata presentation work is actually done on the serverand itselflogic.

== Introduction ==

In [[software architecture]], there maycan 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 componentcomponents by providing a [[user-friendly]] interface, while the ''back end'' usually handles data storage and [[business logic]].

== Examples ==

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

'''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.

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 (computing)|server]], often far removed physically from the user.

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

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

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

A [[rule of thumb]] is that the client-sidefront end, (or "frontend")client isside, includes any componentcomponents manipulated by the user. The server-sideback end, (or "backend")server codeside, 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 termsfront ''frontend''end refers to views facing end users, and ''backend''the mayback referend refers to theviews facing administrative users.<ref>{{Cite web|url=https://letsgodojo.com/front-end-uservs-back-end/|title=Front facingEnd viewsvs Back End of theYour CMSWebsite: andEverything theYou administrativeNeed views,to respectively.<refKnow|website=DOJO nameCreative|date="7 February 2020|access-date=31 August 2022|archive-date=1 September 2022|archive-url=https:0"//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=2016-12-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=2016-12-30 December 2016|url-status=dead}}</ref>

* In [[speech synthesis]], the frontend refers to the part of the synthesis system that converts the input text into a [[symbol]]ic [[phonetics|phonetic]] representation, and the backend 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=2016-12-29}}</ref>

* For major computer subsystems, a graphical [[file manager]] is a frontend to the computer's [[file system]], and a [[Shell (computing)|shell]] interfaces with the [[operating system]]. The frontend faces the user, and the backend launches the programs of the operating system in response. {{Citation needed|date=December 2016}}

* In [[compilers]], the [[Compilers#Frontend|frontend]] [[Translator (computing)|translates]] a computer programming [[source code]] into an [[intermediate representation]], and the backend works with the intermediate representation to produce code in a computer output language. The backend usually [[Program optimization|optimizes]] to produce code that runs faster. The front-end/back-end distinction can separate the [[Parsing|parser]] section that deals with source code and the backend that [[Code generation (compiler)|generates code and optimizes]]. Some designs, such as [[GNU Compiler Collection|GCC]], offer choices between multiple frontends (parsing different source [[Programming language|languages]]) or backends (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=2016-12-30}}</ref>

* Using the [[command-line interface]] (CLI) requires the acquisition of special terminology and memorization of [[Command (computing)|commands]], so a [[graphical user interface]] (GUI) acts as a frontend [[desktop environment]] instead.

* In [[speech synthesis]], the frontendfront end refers to the part of the synthesis system that converts the input text into a [[symbol]]ic [[phonetics|phonetic]] representation, and the backendback 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-12date=14 February 2019|archive-29url=https://web.archive.org/web/20190214183352/http://research.cs.tamu.edu/prism/lectures/sp/l18.pdf|url-status=dead}}</ref>

=== Web development as an example ===

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

* In [[compilers]], the [[Compilers#Frontend|frontend]]front end [[Translator (computing)|translates]] a computer programming [[source code]] into an [[intermediate representation]], and the backendback worksend withproduces the intermediate representation to produceexecutable code infrom athe computer outputintermediate languagerepresentation. The backendback end usually [[Program optimization|optimizes]] to produce code that runs faster. The front- end/back- end distinction can also separate thea [[Parsing|parser]] section that deals with source code andfrom thea backendcompiler that [[Code generation (compiler)|generates code and optimizes executable code]]. Some designs, such as [[GNU Compiler Collection|GCC]], offer choicesmultiple betweenfront multipleend frontendsoptions (parsing different source [[Programming language|languages]]) orand multiple back end backendsoptions (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-12date=31 August 2018|archive-30url=https://web.archive.org/web/20180831090618/http://personal.kent.edu/~rmuhamma/Compilers/MyCompiler/phase.htm|url-status=live}}</ref>

==== Both ====

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

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

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]].

==== Front-end 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]]

=== Web development as an example ===

Another way to understand the differencedifferences between the twofront end and back end is to understandconsider the knowledge requiredthat ofeach arequires front-end vs.of a back-end [[software developer]]. The listexample lists below focusesfocus on [[web development]] as an example.

==== BothFront end ====

* Markup and web languages such as [[HTML]], [[CSS]], and [[JavaScript]], andas well as 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]]

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

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

* [[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 imagesimage size...sizes, withand handle other processes using tools likesuch as [[Webpack]] orand [[Gulp.js]]

* [[Search engine optimization]]

* [[Web accessibility|Accessibility]] concerns

* Basic usage of imageImage editing tools such as [[GIMP]] or [[Adobe Photoshop|Photoshop]]

* [[User Interfaceinterface]] design and creation

==== Back-end focusedend ====

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

* [[Data access layer]]

* [[Automated Testing Framework|Automated testing frameworks]] for the language being used

* [[ApplicationBusiness Data Accesslogic]]

* [[Application Business Logic]]

* [[Database administrator|Database administration]]

* [[Scalability]]

* [[High availability]]

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

* [[Software Architecturearchitecture]]

* [[Data transformation]]

* [[Backup]] methods and software

Note that both positions, despite possibly working on one product, have a very distinct set of skills.

==== Front- end focusedand back end ====

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

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

=== API ===

The frontendfront end communicates with backendthe back end through an [[API]]. In the case of [[Web API|web]] and mobile frontendsfront ends, the API is often based on [[HTTP]] requestrequests/responseresponses. TheAn API iscan sometimesalso designedreduce the front-end processing load by using thedifferent "Backendback-end services for Frontend"different (BFF)front-end patterninterfaces, thatsuch servesas responsesin tothe ease"Back theend processingFor onFront frontendend" side(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>

== 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 [[computer network|network computing]], ''frontend'' 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}}</ref> It is called [[Denial of service#Application frontend hardware|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]], ''frontendfront-end design'' wouldcan berefer to the initial description of the behavior of a circuit's behavior in a [[hardware description language]] such as [[Verilog]], while ''backendback-end design'' wouldcan berefer to 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}}</ref>

== See also ==

{{Columns-list|colwidth=30em|

* [[Client-side]], [[Server-side]]

* [[Front-end web development]]

* [[Client–server model]]

Line 77 ⟶ 87:

== References ==

{{Reflist|30em}}

{{Web interfaces}}

{{DEFAULTSORT:Front And Back Ends}}