Components of web application

How does a web application work? When we, being on the side of the client, type some input into the URL field on our devices, we expect the browser to provide us with the website we want. Technically speaking – to connect us to the server side. This is what web application is used for – to enable the browser to send requests to the server and receive a necessary response.

So, two key components of web application architecture are client side and server side. Under the client side we also mean front-end development and building UI/UX components which form the UI visual of an application (layouts, dashboards and so on). HTML, CSS and JavaScript are technologies used for building the front-end of the application.

Under the server side we understand structural components, communication and correlations of servers with browsers, databases, microservices, etc. Everything that compiles the backbone of the app is technically implemented by back-end technologies: Ruby, Python, PHP, Node.js, Java programming languages.

Web application architecture defines the logic of how client and server sides will communicate with each other. That’s why architectural patterns on the project must ensure that the system meets all business needs, that it is robust, quick and pertains to other aspects that define its success and quality.  Web application architecture should address important aspects such as:

• Clients point of view – responsiveness, usability, offline work
• Engineers point of view – functionality, speed of development, parallel execution of processes, scalability, performance, testability and opportunities for automated testing
• Business aspect – should cover market needs and be profitable, its functional extensibility, security, support

If to name some of the attributes of well-built web architecture, the most meaningful ones would be:

• How well solution solves business problems
• Whether way of solving a problem is consistent and coherent
• Easiness in making further architectural choices, support, transitions etc.
• Whether solution’s architecture is easily expandable, simple and concise 
• How great its user experience is
• Whether it supports A and B testing 
• Whether it ensures security 
• Its reliability, proneness to crashes and ability to fix automatically
• Appropriate performance and level of scalability 
• Interoperability with 3rd party systems
• Proper error and events logging

What is a web app? There is a little ambiguity in the difference between the terms “web application” and “website”. However, they can be used interchangeably since web applications include static and dynamic pages as well as modern websites.

Layers of web application

The four common layers of web applications are:

• Presentation layer (PL)
• Data service layer (DSL)
• Business logic layer (BLL)
• Data access layer (DAL)

The presentation layer displays the user interface and facilitates user interaction. There would be user interface components that render and format data for users and user process components that orchestrate user interactions. The presentation layer provides necessary data to the client’s side. It receives input data, processes user’s requests, sends them to data services and puts results to the browser.

The data service layer. Its function is to transmit data processed by BLL to the presentation layer. The data service layer ensures the security of information separating business logic from the client side.

The business logic layer ensures proper data exchange and controls application functionality. It’s the layer that defines logic for business operations, business rules and satisfies business needs.

One more layer is the data access layer that allows access to the database system, binary files, XML files, etc. The layer also performs CRUD operations – create, read, update, delete.

Middleware and its function

Web application architecture also establishes the connection of application components with middleware systems. Middleware connects two applications and passes data between them. It is a service that enables several processes to interact that natively would not be able to. An example of middleware can transaction monitor, message queue or distributed cache. Middleware software can provide services like the transformation of messages formats from one app to another, message validation and encryption.

Design patterns

MVC (model-view-controller) is one of the most well-known patterns. This approach aims to split large applications into separate sections, each responsible for modeling, viewing or controlling respectively. The controller handles requests and firstly it asks a model about data based on requests. So, the model handles data logic interacting with a database and responds to a viewer based on what the model returns. Accepts data from the controller the viewer interacts with the user and its function is to decide how to present the information.

Imagine a user sends a server a request to get a list of book authors. The server sends it first to the controller which is responsible for authors. The controller would go to the model asking to return a list of all authors. Viewers would then render the list into HTML so it could be understandable for the end user and used by the browser. If a mistake happens, the Viewer would create a presentation of the error notifying a user about it.

Model View Presenter – the role of the controller goes to the Presenter that receives data from the Model and passes it to the View. Unlike Controllers, the Presenter decides the way data would be displayed by the View. Model is an interface that serves for data managing: cashing data, databases, APIs and etc.

Models of web architecture

Websites have gone through significant transformations: from simple HTML pages to complex applications. Developers started to use different architectural patterns to lay out their projects and make development easy and effective. The more complex features are, the more complex the web app would be. Thus, there are three models of web app architecture:

• One-tier architecture – 1 web server and 1 database.
• Two-tier architecture – 2 web servers and 2 databases.
• Multiple tier architecture with more than 2 web servers and databases.

One-tier architecture puts Client, Server and Database sides in one place, so all three work on the same machine. This type is rare in production.
Two-tier architecture splits the presentation layer, which is a client-side, and a database.
Three-tier architecture consists of three parts: client (presentation layer – PC, smartphone, tablet), server (application layer) and database.

The application layer’s function is to control communication between user and database. It takes requests from a client-side, sends it to the databases and when it gets the necessary response returns it back to the presentation layer. A typical web application is a three-layered architecture consisting of presentation, business and data access layers.

Three-tier architecture includes:

• Browser (client side)
• Presentation layer (server side)
• Business/application layer (server side)
• Persistent storage layer – data sources, 3rd party integrations, services (server side

Types of web application architecture

SPA – Single Page Applications

The blending of API with JavaScript, CSS and HTML led developers to AJAX known as Asynchronous JavaScript and XML. What is it for? AJAX data requests together with JavaScript enable DOM (Document Object Model) to update dynamically. While CSS power was to update style on the go, AJAX helped invent single-page apps.

In SPA dynamically loaded content is updated on the current page instead of loading new pages from the server. As you click on what you need, your browser renders this information while notice that other parts remain untouched. These are usually headers, footers, navigation bars and etc. The server does not re-render the page every time you click on the field or choose an item.

Single page web apps win with great UI, performance, and short wait time. SPA are much faster and feel like native applications. In SPA presentation layer is on the client side. Views are created and managed by MV in the browser. Communication with the server side would happen via JSON transactions that as a text format used in AJAX does not require refresh. Finally, on the server side the controller takes responsibility for sending JSON files. Examples of single-page applications can be Gmail, Google Maps. The SPA single page web application architecture diagram with three layers:

• JSON – JavaScript Object Notation represents data in text format based on JavaScript Object syntax. 
• XML – eXtensible Markup Language is used to store and share data across the Internet.

Microservices v.s Monolithic architecture

Microservices are independent parts of the application that communicate with each other via APIs. An application programming interface (API) serves for a web app to communicate with other applications. API return data in JSON or XML format.  Microservices make applications scalable and faster to develop. So, Software application with microservices architecture consists of independent blocks that are responsible for each process of the system. They work as a service for running these processes and can be easily updated and deployed. In a monolithic architecture, all processes are tightened and run as one service. The interdependence of processes is risky as one mistake at one level can block another process, or when one process gets complex, the whole architecture has to be improved and scaled.

• API is an access point which governs extracting data from the databases in response to client requests.

Serverless. Cloud computing architecture.

Serverless architecture reduces infrastructure overhead, offers flexibility and scalability as developers should not worry about backend servers. A popular serverless computing platform is AWS Lambda which allows users to create and run serverless functions. Server management is done by AWS and you pay only for resources consumed by the application. It allows writing code in the form of functions that then run them in the cloud.

Application logic is segregated into small functions or microservices and uploaded to the cloud provider. Functions are stateless and can respond to different events – file uploads, API calls, updates. The message queue is asynchronous communication between services used in serverless and microservices architectures. Each message waits in a queue to be processed. They significantly improve performance eliminating overloaded processing and spiky workloads. As a rule, messages are requests, error notifications, replies. These are usually small and can be processed only once at a time.

Server-side HTML web apps

In traditional HTML based web apps server updates a full page and returns HTML views to a browser on the client side. The presentation layer together with data access and services, business logic and service implementation are all placed on the server-side. Besides new data generation, the design also has to be updated. You can choose any back-end language to develop such an app basing your decision on business needs and functional requirements. Consult experts which language to choose based on your project’s specifics.

Progressive web apps

PWA combines features of both native and web apps. The user can access PWA via the browser and add the icon to the home screen. Such apps offer a great UI experience and can work offline thanks to cached data loaded previously by a user. PWA is built using app shells and dynamically rendered content. The app shell is HTML, CSS and JavaScript resources that compile the structure of the app. Dynamic content exists outside of the app shell and the apps must fetch data every time the user demands it. Web app manifest files enable adding the app to the home screen. While service workers in PWA will be responsible for offline mode and caching. Building PWA, engineers can choose between two architectural styles to decide how the pages will be loaded:

• Server-side rendering. SSR renders the content on a web server. The server would be contacted to ask what to display. SSR makes pages load faster.
• Client-side rendering. JavaScript in the browser produces HTML which allows updating the screen as soon as the user clicks on it.

JS generation widget architecture

This approach evolved from server-side application development. It allows less data transferring and faster responses as each widget is responsible for a certain part of the web app. The pages would consist of JavaScript widgets that work independently. Data would be rendered to the widgets via the AJAX query.

Where to get expertise in web application architecture?

Hope, the article acquainted you with basics of web architecture components, models and types. In web development, three-tier architecture is the most common one and is well-developed to offer as many possibilities for the product as you want. If you are interested in how to choose the type of web app architecture based on the value your product should bring to the end-users, its visual side, performance and so on – you can write us and consult with our digital experts. As soon as you present your requirements and vision over the future app, our team will analyze and explain further steps to help you confidently start the project.