Users need to interact with software applications, but the underlying data management and processing logic is too complex to expose directly. How do you present a user-friendly interface while keeping the underlying system intact?
Front end is the presentation layer of software that users interact with directly. It handles all user-facing tasks, providing an abstraction over the underlying components. In the client-server model, the front end typically resides on the client side.
- User Interface: Renders information and captures user input through UI elements
- Input Handling: Processes user actions (clicks, gestures, keyboard input)
- Communication: Sends requests to the back end via APIs and displays returned data
- Rendering: Transforms data into visual representations (HTML, CSS, images)
- Validation: Performs client-side validation before sending data to the server
In web development, front end includes HTML, CSS, JavaScript, frameworks (React, Angular, Vue.js), and handles responsive design, cross-browser compatibility, and web performance optimization.
- User-facing and interactive
- Handles presentation and UI logic
- Client-side execution (in browser or device)
- Abstracts underlying complexity from users
- Includes markup (HTML), styling (CSS), and behavior (JavaScript)
- Requires understanding of UI/UX design principles
- Must handle multiple devices and screen sizes
Built from:
- Client — The front end typically runs on the client in client-server model
- Server — Front end typically connects to servers for back end services
- Presentation Layer — Front end implements the presentation layer concept
- User Interface — Front end implements UI components
Builds into:
- Full Stack — Front end combined with back end forms full stack
- API — Front end consumes APIs to communicate with back end
Related:
- Back End — Complements front end as the server-side counterpart
- Single-Page Application — Modern front end architecture pattern
- Front end cannot securely store secrets; sensitive operations must go to back end
- Client-side validation can be bypassed—always validate on back end
- Browser differences require cross-browser testing and workarounds
- Performance optimization critical ( Largest Contentful Paint, Time to Interactive )