Editing Frontend and backend

{{Short description|Presentation and data management in software systems}}
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 (computing)|client]] is usually considered the frontend, handling user-facing tasks, and the [[Server (computing)|server]] is the backend, managing data and logic. Some presentation tasks may also be performed by the server.

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

== 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 [[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 "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.

== Software definitions ==
{{prose|section|date=September 2020}}
In [[content management system]]s, the terms ''frontend'' and ''backend'' 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 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=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'' [[Translator (computing)|translates]] 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 frontend/backend 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=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 frontend 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 frontend vs. a backend [[software developer]]. The list below focuses on [[web development]] as an example.

==== Both ====
* [[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]] (largest contentful paint, time to interactive, 60 [[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 other processes using tools such as [[Webpack]] and [[Gulp.js]]  
* [[Search engine optimization]]
* [[Web accessibility|Accessibility]] concerns
* Basic usage of image editing tools such as [[GIMP]] or [[Adobe Photoshop|Photoshop]]
* [[User interface]]

==== Backend 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]]
* [[Business logic]]
* [[Database administrator|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 API|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.<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]], ''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]], ''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 (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 ==
{{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]]