What Is a Web Application?
A web application combines a user interface with application logic to provide some useful function through a web browser. The user interacts with the application, the application processes the input, and a result is produced.
A web application may process information on a remote server, inside the browser, or use both approaches. The choice depends on what the application needs to do and where the processing makes the most sense.
Most web applications involve some combination of the following:
- User interface — the buttons, forms, controls, and other parts of the application that people interact with.
- Application logic — the rules and operations that determine what the application does.
- Data processing — the work performed on information supplied by the user or the application.
- Storage — databases, files, browser storage, or other ways of keeping information.
- Web technologies — HTML, CSS, JavaScript, HTTP, APIs, and other technologies used to deliver the application.
Web Applications and Traditional Websites
A traditional website is mainly concerned with presenting information. A web application adds interaction and functionality on top of that. Instead of simply reading a page, the visitor can enter information, upload a file, change something, submit a form, or perform a particular task.
The distinction is not always clear-cut. Many websites contain both informational pages and interactive applications, so a single site can behave like a website in one area and an application in another.
Examples of web applications include:
- Online calculators
- Email applications
- Content management systems
- Project management software
- Online editors
- Image processing applications
- Video processing applications
- Audio processing applications
- PDF processing applications
- File conversion tools
Web Application Architecture
As web applications grow, keeping everything in one place quickly becomes difficult. Developers therefore use different architectural patterns to separate responsibilities and make an application easier to understand and maintain.
Several architectural patterns have been used to address these problems.
Model-View-Controller
Model-View-Controller (MVC) divides an application into three main responsibilities. The model deals with data and domain logic, the view deals with presentation, and the controller coordinates requests and application behavior.
Separating these responsibilities can make a larger application easier to work on, since changes to one part do not necessarily require changes to everything else.
Learn more about Model-View-Controller.
Front Controller
The Front Controller pattern uses a central entry point for handling requests. Instead of having every part of an application deal with requests independently, a common entry point can take care of things such as routing, authentication, and other application-wide tasks before passing the request on.
This approach can be useful when an application has many different pages or actions that need to follow the same general request-handling process.
Learn more about Front Controller.
Page Controller
A Page Controller gives a particular page or type of request its own controller. The controller is responsible for handling the request and deciding what should happen next.
It is a relatively straightforward approach and can work well when different pages have clearly different responsibilities.
Learn more about Page Controller.
Template View
A Template View uses a template to define how information should be presented. The application supplies the data, while the template takes care of the resulting presentation.
Keeping presentation separate from application logic can make templates easier to maintain and makes it possible to change the appearance of an application without rewriting the underlying application code.
Learn more about Template View.
Domain Model
The Domain Model pattern represents the important concepts of an application and the rules associated with them. Instead of putting business rules throughout controllers and other parts of the application, the domain model provides a place where those rules can be organized.
This can be especially useful in applications with more complicated business logic.
Learn more about Domain Model.
Other Web Application Patterns
MVC is only one way of organizing a web application. Different applications have different requirements, and developers have used a range of patterns to deal with presentation, application logic, requests, and other concerns.
The documentation on this site also covers several other patterns related to web application development.
PHP and the Evolution of Web Applications
PHP played a major role in the growth of server-side web applications. As applications became larger, developers needed better ways to organize templates, application logic, reusable components, requests, and data.
Frameworks and application toolkits emerged to address some of these problems.
The Web Application Component Toolkit, or WACT, was one project from this period. Its documentation explored application architecture, components, templates, design patterns, validation, error handling, and other aspects of building structured PHP applications.
The existing WACT documentation on this site provides examples of these ideas in practice.
From Server-Side Applications to Browser-Based Applications
Web applications have not stayed the same. Earlier applications often relied heavily on a server to perform their work. A browser would send a request, the server would process it, and the resulting page or data would be sent back.
Browsers can now do considerably more. JavaScript, browser APIs, Web Workers, Canvas, and WebAssembly allow applications to perform many operations directly on the user's device.
This has opened the door to a new generation of web application - browser-based applications: software that can do useful work inside the browser itself, without sending the user's data to a server.
Client-Side and Server-Side Processing
Modern web applications can process information on the user's device, on a remote server, or use both. There is no single approach that works for every application.
Client-Side Processing
With client-side processing, the browser performs the operation locally. For example, an image application can read a selected image, resize it, and create a new file without first sending the original image to a server.
This approach can provide benefits such as:
- Reduced data transfer
- Local processing
- Greater privacy for files that do not need to leave the device
Server-Side Processing
With server-side processing, the user's data is sent to a remote server where the actual operation takes place. The server then returns the result to the browser.
This approach is useful when an operation requires software, memory, storage, or processing power that is better suited to a server.
Web Applications for Digital File Processing
File processing is one area where modern web applications have become particularly useful. A browser can be used as the interface for applications that compress, resize, convert, optimize, or otherwise work with digital files.
Common types of files include:
- Images
- Videos
- Audio files
- PDF documents
The operation itself depends on the type of file. An image might be resized or compressed, a video might be converted or have its audio extracted, and a PDF might be compressed or combined with another document.
Learn more about online file processing.
Image Processing
Image applications can perform many common tasks, including compression, resizing, format conversion, and optimization. These operations are useful when preparing images for websites, applications, storage, sharing, or other purposes.
Video Processing
Video processing is more demanding than many common image operations because video files can contain a large amount of data. Web applications can nevertheless provide tools for tasks such as compression, conversion, transcoding, and extracting audio from video.
Audio Processing
Browser-based applications can also work with digital audio. Depending on the application, users may be able to convert audio between formats, reduce file size, reverse audio, or perform other processing tasks.
PDF Processing
PDF applications can handle operations such as compression, merging, splitting, conversion, and other document-processing tasks. Some of these operations can be performed directly in the browser, while others may rely on server-side processing.
Online Tools as Modern Web Applications
An online tool is essentially a web application built around a particular task. Instead of providing a large collection of unrelated features, it usually focuses on doing one thing well.
An image compressor, for example, is a small application built around image compression. A video converter does something similar for video files, while an audio converter or PDF compressor focuses on a different type of content.
This makes online tools a practical example of what modern web applications can do. A user opens a browser, provides the required input, the application performs the operation, and the result is made available to the user.
Explore online tools.
The Evolution of Web Applications
Web applications have come a long way from the server-rendered pages that were common in the early days of the web. PHP and other server-side technologies made it possible to build increasingly useful applications, while frameworks and design patterns helped developers keep larger projects organized.
Modern browsers have added another side to that story. They can now execute complex application logic, work with local files, use hardware and browser APIs, and run compiled code through technologies such as WebAssembly.
The result is a web that can do much more than display documents. A browser can now be the environment for applications that edit, transform, compress, convert, and process many different kinds of digital content.
The underlying idea has not really changed: a web application provides useful functionality through the web. What has changed is how much that application can do.