Front end and back end: Difference between revisions

Revision as of 14:48, 27 March 2024

Latest revision as of 18:36, 23 August 2025

(20 intermediate revisions by 14 users not shown)

Line 1:

{{Short description|Presentation and data access aspecsmanagement in software architecturesystems}}

In [[software engineeringdevelopment]], the terms '''frontend''' and '''backend''' (sometimes written as '''backfront 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'' andend ''backend'' may referrefers to the end-userviews facing viewsend ofusers, and the CMSback andend therefers administrativeto views, respectivelyfacing 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 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-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 ''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 computerintermediate output languagerepresentation. The backendback end usually [[Program optimization|optimizes]] to produce code that runs faster. The frontendfront end/backendback 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-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 implementedact as a thin frontendfront end for underlying [[command-line interface]] (CLI) programs, to save the userusers from learninghaving to learn the specialCLI terminology and memorizing the [[Command (computing)|commands]].

=== 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 frontend vs.of a backend [[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]]

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

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

==== Frontend 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]]

* [[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, 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 image sizes, and handle other processes using tools such as [[Webpack]] and [[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

==== BackendBack 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 and 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|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]], ''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|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 ==

Line 80 ⟶ 87:

== References ==

{{Reflist|30em}}

{{Web interfaces}}

{{DEFAULTSORT:Front And Back Ends}}