You may be surfing Internet every day, but,have you ever wondered how your favorite websites work? When you click on something, do you know what happens behind the scenes? If you know little bit about technology, you may know that your request goes to a web server. Web server does all the work and sends results back to your web browser. This is how you see the website on your screen.
Well, that’s exactly true but if you go on deeper level. Your favorite websites have many different parts that work together. When you click on something, your request goes through all these different parts. Then you get a response. It is long process. Before discussing the main topic, let’s understand a few basics related to this.
When building a web application, you should remember these points:
- From a customer’s viewpoint – It should be easy, pleasing, and address their problems.
- From a business viewpoint – It should be aligned with its product/market fit.
- From a developer’s viewpoint – It should be scalable, functional, and capable of bearing high traffic loads.
What is Web Application Architecture?
There is difference between a website and web application. If you do not know that web application is a program that runs on a browser and it mainly has three formal features. These are:
- It solves some problems.
- It is interactive.
- It works with Content Management System
Generally, website is a combination of static pages. But a website becomes a web application when it contains both static and dynamic pages. All modern websites are examples of web applications.
There are components of the application such as user interface, middleware system, database, server and browser. When you click on a website to request something, these components interact with each other. Web Application Architecture helps them to interact with each other.
When you give some input to website. You get response back from the server. The code received may not contain instructions telling the browser how to respond to different types of user input. This is reason that Web Application Architecture includes all sub-components and external application interchanges for complete software application. It also has various properties like reliability, scalability, security and robustness.
How Does The Web Request Work?
Let’s take an example that you want to visit makeuseof.com.
- You enter makeuseof.com in your browser:
You enter Makeuseof.com in your browser and press Enter. Now your web browser needs the IP address of this URL. So, it sends requests to DNS. (The Domain Name Server (DNS) stores the IP address of a web URL). Browser then sends the request to that IP address using HTTP protocol. (If you’ve already visited Makeuseof.com from the same browser, it pulls the address from the cache.) - The web server processes the request:
In this step, Web Server sends the request to Storage Area to locate and look for data. It finds webpage to see and all the information that goes with it. This is when something called Business Logic gets involved. Business Logic (also known as Domain Logic or Application Logic) is like a map that shows how to find each piece of information. BL has responsibility of routing. Routing means how each piece of data is accessed. BL regulates workflows. - You get the response back:
In this step, you receive response from the web server. It displays on the screen. This web page (a graphical interface) is known as the front end of application. Here, you have UI and UX components for accessing information.
How Does Web Application Architecture Work?
Web applications run on both client side and server side. These are known as front-end and backend respectively. These are run when a user makes a request on a web browser, these are:
- Code runs in the browser and executes as per user input.
- Code runs on the server and responds to the HTTP requests.
These are differences between them:
| Aspect | Server-side Code | Client-side Code |
|---|---|---|
| Location | Runs on server | Runs in user’s web browser |
| Execution | Responds to HTTP requests | Executes as per user input |
| Responsibility | Creates the requested page and stores data | Defines the user interface and enhances user experience |
| Visibility | Not visible to end-users | Visible and editable by end-users |
| Language | Python, JavaScript, C#, PHP, Ruby on Rails, etc. | HTML, CSS, and JavaScript |
| Communication with Server | Can communicate directly with the server | Can only communicate with the server through HTTP requests |
| Access to Server Files | Can access server files directly | Cannot access server files directly |
Web Application Architecture Components:
Web Application Architecture has two types of components: User Interface App Components and Structural Components.
- User Interface App Components are responsible for displaying information for examples: logs, notifications, and configuration settings. These components don’t affect how the web application works or its functionality.
- While, Structural Components are responsible for the functionality and structural part of the web application that users interact with. These components include the control and storage of data in the database.
Web Application Three Tier Architecture Layers:
Web application architecture mainly consists of many levels (or layers). These layers can be edited and upgraded independently.
- Presentation Layer:
It is a client accessible layer via browser. It includes UI and interface components. - Business Layer:
Business layer is also known as application layer or business logic or domain logic. This layer accepts user requests from the browser, processes it and controls the routes through which data will be accessed. The entire workflow is encoded in this layer. - Persistence Layer:
It is also known as the storage or data access layer. It collects call data and provides access to the application’s permanent storage. This layer is closely related to the business layer.
Note that cross-cutting code and third-party integration are part of a web application but separate from the core layers. Cross-cutting code handles communications, operational management, and security. We can integrate payment gateways, social logins, GDS etc into travel websites using third-party APIs.
Types of Web Application Architecture:
These are some of them.
- Single Page Applications:
These are designed as single-page web applications. It contains elements and information to generate smooth and interactive user experience. - Microservices:
These are lightweight services that execute specific, single functionality. These have independent components. So the developer can choose types of programming languages for each component. - Serverless Architectures:
In this approach, developers do not need to worry about managing the servers as they outsource the servers from third parties. So the developers focus on building main features and functions.
Conclusion:
Web Application Architecture is a framework that has various components to interact with each other. It defines workflows of web applications. A web application has different layers such as presentation layer, business layer, and persistence layer, that can be edited and upgraded independently.