Frontend

The frontend of a software program or website is everything with which the user interacts. From a user standpoint, the frontend is synonymous with the user interface. From a developer standpoint, it is the interface design and the programming that makes the interface function. Conversely, the backend includes functions and data processing that takes place behind the scenes.

One of the primary goals of frontend development is to create a smooth or "frictionless" user experience. In other words, the front end of an application or website should be intuitive and easy to use. While this sounds like a simple goal, it can be surprisingly complex since not all users or devices are the same. For example, an app developed for a mobile device requires a significantly different frontend than a desktop application. Websites must work well on multiple devices and screen sizes, which is why modern web development typically involves responsive design.

Examples of frontend elements include:

  1. application or page layout
  2. graphics
  3. audio and video elements
  4. text content
  5. user interface elements (buttons, links, toolbars, navigation bars, etc.)
  6. input areas (dialog boxes), form fields, text areas, etc.)
  7. user flow (how one interface leads to the next)
  8. user preferences, themes, and customizations

User input is received through the frontend and processed in the backend of a program or website. Backend code reads and writes data and sends output to the user via the frontend. Since the backend and frontend of an app or website work together, software jobs often require both frontend and backend development. Developing for both ends is called full-stack development.

NOTE: Frontend may also be written "front end" (as a noun) or "front-end" (as an adjective). For simplicity, the closed compound word "frontend" has become an acceptable term for both.

Updated April 18, 2020 by Per C.

quizTest Your Knowledge

A digital drawing comprised of paths is what type of graphic?

A
Lossy
0%
B
RGB
0%
C
Bitmap
0%
D
Vector
0%
Correct! Incorrect!     View the Vector definition.
More Quizzes →

The Tech Terms Computer Dictionary

The definition of Frontend on this page is an original definition written by the TechTerms.com team. If you would like to reference this page or cite this definition, please use the green citation links above.

The goal of TechTerms.com is to explain computer terminology in a way that is easy to understand. We strive for simplicity and accuracy with every definition we publish. If you have feedback about this definition or would like to suggest a new technical term, please contact us.

Sign up for the free TechTerms Newsletter

How often would you like to receive an email?

You can unsubscribe or change your frequency setting at any time using the links available in each email.

Questions? Please contact us.