Editing Frontend and backend (section)

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