data use cases

Web Application Architecture: How the Web Works

  • Engineering
  • Published: 25 Jul, 2019
  • No comments Share

When building a web application, there are three main principles to bear in mind. From a customer’s point of view, the application should be simple, aesthetically pleasing, and address most of their problems. From the business aspect, a web application should stay aligned with its product/market fit . From a software engineer’s perspective, a web application should be scalable, functional, and able to withstand high traffic loads. All these issues are addressed in the web application’s architecture. We’ll cover the basic concepts of any modern web application and explain how the architecture patterns may differ depending on the application you’re building.

What is Web Application Architecture?

So, what is a web application, and how is it different from a website? The basic definition of a web application is a program that runs on a browser. It’s not a website, but the line between the two is fuzzy. To differentiate a web application from a website, remember these three formal characteristics. A web application:

  • addresses a particular problem, even if it’s simply finding some information
  • is as interactive as a desktop application
  • has a Content Management System

A website is traditionally understood to simply be a combination of static pages. But today, most websites consist of both static and dynamic pages, which makes almost all modern websites - you guessed it! - web applications. In this article, we will use the terms interchangeably. Your computer, or smartphone, or any other device you’re browsing with is called a client. The other half of the web equation is called a server because it serves you the data you request. Their communication is called a client-server model, whose main concern is receiving your request and delivering the response back. Web application architecture is a mechanism that determines how application components communicate with each other. Or, in other words, the way the client and the server are connected is established by web application architecture. Web applications of different sizes and complexity levels all follow the same architectural principle, but details may differ. We will further explain how a basic request-response process works and what components comprise the architecture.

How does the web request work?

web request-response cycle

Web request-response cycle

Let’s look at Amazon.com to illustrate our explanation. First, you visit amazon.com . You type in the URL and as you hit Enter, your browser prepares to recognize this URL, because it needs to know the address of the server where the page is located. So it sends your request to the Domain Name Center (DNS), a repository of domain names and their IP addresses. If you've already visited Amazon from the same browser, it will pull the address from the cache. Then, a browser sends the request to the found IP address using the HTTPS protocol. Second, the web server processes the request . The web server where Amazon.com is located catches the request and sends it to the storage area to locate the page and all data that follows with it. But its route is held via Business Logic (also called Domain Logic and Application Logic). BL manages how each piece of data is accessed and determines this workflow specifically for each application . As BL processes the request, it sends it to storage to locate the looked-for data. Third, you receive your data . Your response travels back to you and you see the content of the web page on your display. The graphical interface you see when scrolling Amazon's or any other website is called the front end of an application - it depicts all UX and UI components so that a user can access the information they came looking for.

Web application architecture components and Three-Tier Architecture

web application architecture

Web application architecture following the three-tier pattern

Presentation layer

The presentation layer is accessible to users via a browser and consists of user interface components and UI process components that support interaction with the system. It’s developed using three core technologies: HTML, CSS, and JavaScript. While HTML is the code that determines what your website will contain, CSS controls how it will look. JavaScript and its frameworks make your website interactive - responsive to a user’s actions. Developers use JavaScript frameworks such as Angular and React to make the content on the page dynamic.

Business layer

This layer, also called Business Logic or Domain Logic or Application Layer, accepts user requests from the browser, processes them, and determines the routes through which the data will be accessed. The workflows by which the data and requests travel through the back end are encoded in a business layer. For example, if your application is a hotel booking website, business logic will be responsible for the sequence of events a traveler will go through when booking a room. Although business rules can be a manifestation of the business logic, they are not the same. Sometimes business rules are extracted and managed separately, using a Business Rules Management System, as we discussed in our article on back office systems .

Persistence layer

Also called the storage or data access layer, the persistance layer is a centralized location that receives all data calls and provides access to the persistent storage of an application. The persistence layer is closely connected to the business layer, so the logic knows which database to talk to and the data retrieving process is more optimized. The data storage infrastructure includes a server and a Database Management System , software to communicate with the database itself, applications, and user interfaces to obtain data and parse it. Typically you can store your data either in owned hardware servers or in the cloud - meaning, that you purchase data center management and maintenance services while accessing your storage virtually. Using the services of cloud technology providers such as Amazon, Google, or Microsoft, you can utilize Infrastructure-as-a-Service, Platform-as-a-Service, or serverless approaches to cloud management. There are also components that usually exist in all web applications but are separated from the main layers: Cross-cutting code. This component handles other application concerns such as communications, operational management, and security. It affects all parts of the system but should never mix with them. Third-party integrations . Payment gateways, social logins, GDSs in travel websites are all integrations connected to the application’s back end via pieces of code called APIs. They allow your software to source data from other software and widen your functionality without coding it from scratch. Read how APIs work in our dedicated article. Let’s see how the three-tier architecture is implemented in different types of web applications.

Example #1. Dynamic web pages, SPAs, and MPAs

The application’s front end can serve either static or dynamic content. In most cases, it’s a combination of both. Static Web Pages exist on a server as they are and contain information that doesn’t change. Dynamic Web Pages change information every day or in response to a user’s request - think of any news website or your Twitter feed. The combination of dynamic and static content makes up a web application. The simplest example of a web application with dynamic content is a Single Page Application.

Single Page Applications

SPA architecture

Single Page Application architecture

When the role of the server is reduced to data services, this is sometimes called thin server architecture. We can’t talk about SPAs without mentioning the more traditional model - Multi-Page Applications.

Multi-Page Applications

multi-page applications

MPA architecture

As opposed to the SPA’s client-side scripting, traditional applications are written using both client- and server-side languages. Server-side scripting means that all operations are performed on the server’s end, so when you request content, it processes the script, retrieves data from the storage and chooses the content to display. Server-scripting languages you should be familiar with include PHP, Java , Python, Ruby, C#, and more.

Example #2. Enterprise applications

enterprise application architecture

Enterprise application architecture

Apart from an extra layer, enterprise applications have access to data sources from other applications in an organization, making it a network of software solutions, connected by APIs. Besides, there are more groups of users who have access to different functional components - they can be business partners, clients, admins, and several groups of staff. Sometimes the presentation tiers are separate for all of them, so you can deploy the application as intranet or extranet.

To conclude

This, hopefully, sheds some light on the backstage of building modern websites. In this article, we dipped our toes into the complicated subject of software engineering. If this wasn’t enough for you, feel free to roam around our blog a bit more and specifically explore the following articles. The Good and the Bad of JavaScript Full Stack Development Technical Documentation in Software Development: Types, Best Practices, and Tools How to Use Open Source Software: Features, Main Software Types, and Selection Advice

What is the Presentation Layer in Programming?

Trevor Page

Get the Best Java Roadmap

Download the roadmap.

The presentation layer is one of the three main layers in object-oriented programming.

The three main layers include:

  • Presentation Layer
  • Business Layer

Now, these three layers are typically related to enterprise web applications. It's a design pattern used to help separate your code out in three distinct areas that (if need be) can easily be switched out with another programming language or technology.

So if you keep all of your presentation layer code in one area of your application, switching presentation layer technologies shouldn't be too difficult.

Same rules apply to the business and data layers. If you separated your code out properly, switching databases shouldn't be too big of an issue.

Having said that, we'll be focusing on the presentation layer.

The four big players (in terms of technology) in the presentation layer are as follows:

Let’s dive into the overviews of each of these big players, shall we?

HTML (HyperText Markup Language) is a technology used to communicate with web browsers. All browsers follow the rules laid out in HTML (currently in its 5th iteration).

HTML defines a bunch of different HTML elements known as tags that are put together to make up the basic layout of a web page. These tags are used to define things like the title of the webpage (which appears in the tab of your browser), the actual text that appears on the page, images, buttons and more.

Thankfully HTML isn’t too tough to learn as it’s more of a game of memorizing the most popular tags and using them to create your simple web pages. HTML is not a programming language, as it doesn’t define variables, data types, control structure or the like. This is also what makes it fairly easy to learn.

We’ll be diving into examples of HTML “code” later, so stay tuned.

CSS (cascading style sheets) is used to add some “pizazz” to your web pages. CSS is used to add a design look and feel to your web pages through the use of its cascading rules. We won’t get into the exact rules that CSS uses to apply its designs just yet, but again, stay tuned for a more in depth explanation.

All you need to know is that CSS is used to make a web page look nice. You can use it to choose which parts of the web page should be which color, how big or small elements should be, what fonts should be used and more.

If you’ve ever landed on a web page that wasn’t able to properly load its CSS, you’d likely think that the website was completely broken. It is often fixed by forcing the page to reload and then the CSS usually gets picked up the second time and everything loads properly and the website goes back to looking great. This situation is quite rare, but I thought I’d mention it because it’s a great example of just how powerful CSS is.

JavaScript is used to make your web pages interactive. It allows you to put some real programming functionality into web pages (as HTML is not a programming language and thus cannot add real programming elements to a page).

Examples of what JavaScript can do is when you’re logging into an application and you forget to provide information in one of the fields. JavaScript can detect that you’ve forgotten to type in your username or password and can provide you with a prompt explaining that you need to fill in your username and password before you can continue.

JavaScript shouldn’t be confused with Java, as they are two different technologies. Java is part of the business layer and has no place in the presentation layer. Java is known as a server side language, as it exists and runs on servers. JavaScript is known as a client side technology, and thus lives where the “clients” are, which is inside the actual web browsers.

A good way to think of the difference between the two languages is that when you land on a web page and it loads in your browser, it will also load any JavaScript code inside the page and you’ll actually be able to access that code and read it. Whereas, you’d never be able to read the Java code, as it’s not loaded in your browser because it’s a server side technology.

That simple distinction between the two languages makes for two very different languages in terms of their use and functionality.

The syntax for JavaScript, however, is fairly similar to Java. This is nice since you’ll be able to look at a piece of JavaScript code and more or less understand what’s going on. So you should be able to pick up the JavaScript language a lot quicker if you already have a good command of the Java language.

JQuery is a technology that’s used in tandem with JavaScript. JQuery makes your life as a web programmer so much easier for one reason, it allows you to write code once and have it work across all the browsers.

In today’s world we have so many browsers that can be downloaded for free and used to peruse the web. This actually makes building websites a bit challenging, as every browser has made up their own minds on how to “render” an HTML web page.

This means that a webpage loaded on Safari might not look the same as if it’s loaded on Internet Explorer, or Firefox, or Chrome.

These inconsistencies drive web programmers crazy, so that’s why jQuery was introduced. It allows you to write your JavaScript in a sort of “browser agnostic” way. You can write it once, and jQuery will execute the code appropriately depending on which browser it’s loaded it. VERY COOL!

The best part of all of these technologies is that they are all free to use.

And thankfully, they are also free to learn via these tutorials!

Do you want to get a job as a full-stack developer?  Consider joining our Online Web Developer Bootcamp.

Free Java Roadmap

Discover exactly what you need to learn and where to start in order to become a professional coder.

Coders Campus

Launch your coding career..

© 2024 • Crafty Codr Inc • Terms • Privacy

151 Lyndhurst Drive, Kitchener, Ontario N2B 1B7 Canada

  • Engineering Mathematics
  • Discrete Mathematics
  • Operating System
  • Computer Networks
  • Digital Logic and Design
  • C Programming
  • Data Structures
  • Theory of Computation
  • Compiler Design
  • Computer Org and Architecture

Presentation Layer in OSI model

Prerequisite : OSI Model

Introduction : Presentation Layer is the 6th layer in the Open System Interconnection (OSI) model. This layer is also known as Translation layer, as this layer serves as a data translator for the network. The data which this layer receives from the Application Layer is extracted and manipulated here as per the required format to transmit over the network. The main responsibility of this layer is to provide or define the data format and encryption. The presentation layer is also called as Syntax layer since it is responsible for maintaining the proper syntax of the data which it either receives or transmits to other layer(s).

Functions of Presentation Layer :

The presentation layer, being the 6th layer in the OSI model, performs several types of functions, which are described below-

  • Presentation layer format and encrypts data to be sent across the network.
  • This layer takes care that the data is sent in such a way that the receiver will understand the information (data) and will be able to use the data efficiently and effectively.
  • This layer manages the abstract data structures and allows high-level data structures (example- banking records), which are to be defined or exchanged.
  • This layer carries out the encryption at the transmitter and decryption at the receiver.
  • This layer carries out data compression to reduce the bandwidth of the data to be transmitted (the primary goal of data compression is to reduce the number of bits which is to be transmitted).
  • This layer is responsible for interoperability (ability of computers to exchange and make use of information) between encoding methods as different computers use different encoding methods.
  • This layer basically deals with the presentation part of the data.
  • Presentation layer, carries out the data compression (number of bits reduction while transmission), which in return improves the data throughput.
  • This layer also deals with the issues of string representation.
  • The presentation layer is also responsible for integrating all the formats into a standardized format for efficient and effective communication.
  • This layer encodes the message from the user-dependent format to the common format and vice-versa for communication between dissimilar systems.
  • This layer deals with the syntax and semantics of the messages.
  • This layer also ensures that the messages which are to be presented to the upper as well as the lower layer should be standardized as well as in an accurate format too.
  • Presentation layer is also responsible for translation, formatting, and delivery of information for processing or display.
  • This layer also performs serialization (process of translating a data structure or an object into a format that can be stored or transmitted easily).

Features of Presentation Layer in the OSI model: Presentation layer, being the 6th layer in the OSI model, plays a vital role while communication is taking place between two devices in a network.

List of features which are provided by the presentation layer are:

  • Presentation layer could apply certain sophisticated compression techniques, so fewer bytes of data are required to represent the information when it is sent over the network.
  • If two or more devices are communicating over an encrypted connection, then this presentation layer is responsible for adding encryption on the sender’s end as well as the decoding the encryption on the receiver’s end so that it can represent the application layer with unencrypted, readable data.
  • This layer formats and encrypts data to be sent over a network, providing freedom from compatibility problems.
  • This presentation layer also negotiates the Transfer Syntax.
  • This presentation layer is also responsible for compressing data it receives from the application layer before delivering it to the session layer (which is the 5th layer in the OSI model) and thus improves the speed as well as the efficiency of communication by minimizing the amount of the data to be transferred.

Working of Presentation Layer in the OSI model : Presentation layer in the OSI model, as a translator, converts the data sent by the application layer of the transmitting node into an acceptable and compatible data format based on the applicable network protocol and architecture.  Upon arrival at the receiving computer, the presentation layer translates data into an acceptable format usable by the application layer. Basically, in other words, this layer takes care of any issues occurring when transmitted data must be viewed in a format different from the original format. Being the functional part of the OSI mode, the presentation layer performs a multitude (large number of) data conversion algorithms and character translation functions. Mainly, this layer is responsible for managing two network characteristics: protocol (set of rules) and architecture.

Presentation Layer Protocols : Presentation layer being the 6th layer, but the most important layer in the OSI model performs several types of functionalities, which makes sure that data which is being transferred or received should be accurate or clear to all the devices which are there in a closed network. Presentation Layer, for performing translations or other specified functions, needs to use certain protocols which are defined below –

  • Apple Filing Protocol (AFP): Apple Filing Protocol is the proprietary network protocol (communications protocol) that offers services to macOS or the classic macOS. This is basically the network file control protocol specifically designed for Mac-based platforms.
  • Lightweight Presentation Protocol (LPP): Lightweight Presentation Protocol is that protocol which is used to provide ISO presentation services on the top of TCP/IP based protocol stacks.
  • NetWare Core Protocol (NCP): NetWare Core Protocol is the network protocol which is used to access file, print, directory, clock synchronization, messaging, remote command execution and other network service functions.
  • Network Data Representation (NDR): Network Data Representation is basically the implementation of the presentation layer in the OSI model, which provides or defines various primitive data types, constructed data types and also several types of data representations.
  • External Data Representation (XDR): External Data Representation (XDR) is the standard for the description and encoding of data. It is useful for transferring data between computer architectures and has been used to communicate data between very diverse machines. Converting from local representation to XDR is called encoding, whereas converting XDR into local representation is called decoding.
  • Secure Socket Layer (SSL): The Secure Socket Layer protocol provides security to the data that is being transferred between the web browser and the server. SSL encrypts the link between a web server and a browser, which ensures that all data passed between them remains private and free from attacks.

author

Similar Reads

Improve your coding skills with practice.

 alt=

What kind of Experience do you want to share?

Chapter 4. Layered Architecture for Web Applications

Table of Contents

The first question that should be answered: Why the web is suitable for developing applications? It is not a difficult question, of course. In the World Wide Web Consortium (W3C) Architecture of the Web Recommendation paper various examples are given, notably one about a user who wants to see the weather in a place where she wants to travel to. The nature of the Internet - trafficking data over protocols from network to network - is a powerful resource that make communication between different places very fast and easy. This way computer programs can be made to improve the relation between systems and people, and what is seen today is that it happened.

Web applications are distributed applications, and hence are at least two-tiered. They act as a special kind of client-server applications, where a large portion of the functionality is “pushed” back to the server side despite the fact that the Web does not define what is behind the server.

presentation layer web development

The Web relies strongly in the client-server model, and it uses markup languages such as HTML and XML to transfer and represent data. Under it there are many programming and scripting languages that can dynamically process, modify and generate data, or give an user interface. This way, the development of Web applications can be put under the cover of software engineering but need to be extended. Web applications are multidisciplinary (software engineering, database modeling techniques, network computing, and effective interface design). They are built in a continuously changing environment where requirements are unstable and the user community is wider than before. Web applications handle information from various sources (text, graphics, video, audio) dealing with structuring, processing, storing and presenting this information.

The Three Layers Model

The nature of the Web is layered: it has formats over protocols and uses a client-server model. Therefore, it is natural that a layered architecture would be suitable for developing to the Web. We learnt that this model overcame the two layered client-server because of its scalability. Many different approaches to the aim of developing applications with different layers had been used along the years, but a clear pattern seems to appear frequently in various of them: the Three Layers Model (according to Kappel et al. 2006).

presentation layer web development

This model of web application development is very similar to the Service Layer/Domain Model/Data Source Layer set of design patterns from Martin Fowler’s collection, but receiving different names . In fact, the idea ( usually named 3-tier architecture, or expanded into n-tier architecture) is very general and widespread, so in this paper only the most common assumptions and uses are examined. [1]

Its conception is three layers, one over the other, being the application the set of them working together. The most external of them is the View Layer, that is the visible part of the application, the one that interacts with the user. The layer in the middle is the Business Logic Layer, which serves as an intermediate between the View (or presentation) and the innermost layer, that is the Data Layer. This last one is where all the data used by the application is stored.

The benefits of using layered models in software development are in the way that it is easier to know exactly what each part of the application does. It makes easier to construct the application, to debug it, and to maintain and reuse the code. For example, if it is needed to exchange some details in the presentation of the content but the business rules and data models do not change, only one layer is affected. Even for more complicated changes involving all of the application architecture there are benefices, so a plan can be created in the overall but specifying exactly where the changes need to be done.

The View Layer

The outermost layer in this kind of model deals with the presentation of the content and interaction with the user. It can be called view, presentation, UI. In this layer the application shows to the user what is needed to be seen and gives the tools for interaction. The exact kind of interaction depends on the application; one can create a web app that only shows information to the user without any kind of interaction, not even hyperlinks to be clicked, but such a case does not need an advanced architecture. In most cases the user will generate some input, send it for processing and then receive a feedback, that can be the final result or a step for further operations.

Following the example by W3C of the user that wants to see the weather in her trip destination, the presentation is where she sees the actual content. The content display is shown, and the user can interact with the provided controls to, for example, see weather in different periods of time or another places, and see pictures of it.

The technologies usually involved in this layer on the web development context are mainly the markup that is processed by the browser (HTML/ XHTML/ ...), the style of the page (CSS) and client-side scripts (Javascript/ Flash/ ...). All of these tools together can produce a rich environment for user interaction and content display. Of course it can be said that server-side scripts can be used to generate content, but at the final level these scripts produce the HTML that will be shown be the browser, so this role of the development can be subdivided: the content generation is created by the business logic layer (the next topic to be discussed) and then it is passed to the view layer, maintaining the logical division of the application. The browser shows the content initially written or produced by the server-side scripts, and the client-side scripts are able to modify that content. A Javascript code, for example, can be used to validate form data or even to create drag and drop interfaces. It interacts with HTML through a DOM tree, that is a representation of the document in memory. HTML5, the present (2014) trend for web development is praised for its flexibility, specially where it touches the concept of responsiveness, that is the ability to change the content disposition according to the screen size. This matters because, in current days, the availability of a page in different screen sizes and devices is extremely important. Having many possibilities like desktops, tablets, smartphones, wearable devices and even augmented reality or voice user interface, the range of technologies and targets for the view layer is very wide, and it shows both the importance of it to the user and reinforce the need of a logical division of the application for supporting such variety.

This layer communicates with the business logic layer under it, passing the information from the user and controlling it, then giving back any response it produces, not leaving any decisions of the application’s logic to be resolved by the UI. This passing of information is usually done through forms, like a user log-in in a system by giving username and password, but there are other ways. AJAX is an asynchronous way to pass information to the server and get responses. The cited a-synchronicity comes from the fact that in a form the content needs to be passed and then the response will come after a page refresh, but with AJAX the requested information, that is the result of the user’s action will come in the actual page. It saves time and gives to the user the impression that the application is really interacting with him.

The Business Logic Layer

The central layer of the model deals with the logic of the program. It receives data from the upper level and transforms it, using in the inner application logics. It also retrieves data from the deepest data level and uses it to the logics. And, by integrating these two processes, it can do modifications in both levels as well.

The Business Logic Layer contains the determinant part of the application logic. It includes:

performing all required calculations and validations

managing workflow

state management: to keep track of application execution

session management: to distinguish among application instances

user identification

service access: to provide application services in a consistent way

managing all data access for the presentation layer

The Business Logic Layer is generally implemented inside an Application server (like Microsoft Transaction Server, Oracle Application Server, or IBM WebSphere). The Application server generally automates a number of services like transactions, security, persistence, connection pooling, messaging and name services.

Using the same example of the last session, of the user that wants to see the weather in a specific place, when the information is given by the user the application retrieves it and process. For example, the user wants to see the weather forecast for two days. The application receives its request from the UI and the data is sent to the server. A PHP script catches it and then make the calls for the lower level to get the needed data. When a response comes, being it the desired information or a failed request, it is dealt and then prepared to be sent again to the upper level.

The tools used in this level are usually server-side scripts like PHP,ASP.NET, Ruby or CGI. There is even a solution that uses server-side Javascript, called node.js. These technologies, following the information feeding that comes from the upper level, can do any computational pro- cessing that is needed. The CGI (Common Gateway Interface) scripts are an older technology that defines communication way between a server and the content-generated program, in this context called CGI script. One of the most remembered languages when talking about CGI scripts is Perl. The other languages here cited have a similar approach, by running inside a server. PHP is related to Perl, being as well a scripting language and having similar philosophies. It is one of the most popular languages, being the implementation language of important content management systems as Drupal or Wordpress. Ruby have a large popularity too, especially with the framework Ruby on Rails. Applications as Github or Redmine are built using it. There are many others, of course, and different uses of them, one example being C used as CGI or the Java Server Pages (JSP).

The Data Layer

The deepest level in the layered architecture, the data layer deals with data retrieval from its sources. It is an abstraction to get the plain data, that can be in a wide variety of forms. Once again, it plays a huge role on the reusability and exchange of technologies: if one data source is changed to another, but the proper data is still the same, a good layered design can help by providing the same data to the upper level with the same interfaces, changing only its inner logic.

In the example given in this paper of the weather forecast, the requirement by the user for the next days forecast will come to this level as a request for the forecasts that it may have. Then a search will be made in the data using the given parameters, and then the data (or some information about not getting it) will be sent again to the upper level.

The technologies used in this layer are database management systems like MySQL or PostgreSQL for relational databases, NoSQL management systems like MongoDB or Apache Cassandra, or even plain XML files or text files. For the management systems usually an API will be used for making queries and retrieving data, and for the plain text ones a script will do the needed operations. Inside it there can be any level of sophistication desired by the application designer, so there can be integrity checks, stored procedures, and virtually anything needed to maintain the data in the desired state.

Deepest in the Data Layer: NoSQL and NewSQL

Inside the Data Layer, as it was outlined, many different technologies can be used. Most of the web applications currently active use relational databases, but now the market is seeing a change of paradigm in the form of the NoSQL. NoSQL is a general way to identify non-relational databases. Fowler summarises some common characteristics that NoSQL databases share:

Not using the relational model

Running well on clusters

Open-source

Built for the 21st century web estates

The key points NoSQL supporters use to justify the need for it is that relational databases are not the best solution for any kind of problem, being a problem of its own the uses. They say it is heavy, slow, and non-scalable to use the relational databases, so the use of NoSQL can be a good way to solve these kinds of problems. The use of NoSQL nowadays seems related to startups that use innovating new technology and social web services such as Facebook and Amazon, that have a great amount of data [2] to deal with and have the need to find new ways to use it.

In fact, that is this demand of large data processing. Under the label of big data lies the concept of large quantities of data generated in the last few years and from different sources and in a variety of different formats. The processing of this kind of data leads to a wide range of uses, from healthcare to criminalistics inferences. Of course, new challenges arises with this perspective. The drawbacks come from the nature of the data - massive, disperse, heterogeneous. This is why NoSQL can be seen as a solution - it thinks about this kind of problem, trying to solve it.

As of 2014, there are four important categories of NoSQL databases:

key-value stores , that are basically hash tables

column family stores , which aim is to deal with vast collections of data spread amongst many different machines

document databases , versioned documents that are collections of other key-value collections

and graph databases , where the data is presented as a graph, and then it is possible to divide easily into different machines and the queries are more data-specific than the relational ones

A topic that attracts attention when it comes to the issue of scalability and performance of databases is the so-called NewSQL. It is more a way to recognise “ the various emerging database products at this particular point in time”. The authors writing about it use the term as an identification of vendors that provide SQL databases that are high-performance and scalable, in the market that is also aimed by NoSQL providers. The aims of NewSQL are also related to the Big Data paradigm. [3]

[1] Sometimes tier is different from layer. For it, layers mean the logical distinction of the applications integral parts, and tiers mean the physical structures in where the application runs (networks, computers, servers). But in this work the two words are used as synonyms, and with the meaning of layer, not being the objective to discuss physical tiers.

[2] “The increasing amount of data in the web is a problem which has to be considered by successful web pages like the ones of Facebook, Amazon and Google. Besides dealing with tera- and petabytes of data, massive read and write requests have to be responded without any noticeable latency”

HECHT, Robin and JABLONSKI, Stefan. NoSQL Evaluation, A Use Case Oriented Survey.

[3] “The NoSQL projects were developed in response to the failure of existing suppliers to address the performance, scalability and flexibility requirements of large-scale data processing, particularly for Web and cloud computing applications. NewSQL and data-grid products have emerged to meet similar requirements among enterprises, a sector that is now also being targeted by NoSQL vendors.”

ASLETT, Matthew. NoSQL, NewSQL and Beyond: The answer to SPRAINed relational databases.

Layered architecture: What it is and how it can help you create applications?

Facebook Icon

What is web application architecture?

Application architecture is the representation of how different services and systems are joined together. It helps us to understand how applications or services are placed in a layered architecture, who are the different actors at each layer and what is the fundamental role of each layer.

It determines application components and different layers communicate with each other. These architectures are layered having different layers from the design or presentation layer to the data layer. Software architects or Web engineers ensure that all the elements or layers work together correctly.

How does system architecture for web application works?

In web application architecture, there are basically two parts working simultaneously, the client (frontend) and server (backend). The client represents the application UI on the browser from where the web server takes the request to the server, where the server has the code that responds to requests coming from the client. The Server manages the application logic and responds to HTTP requests.

Learn more about our technology stack and software development services here.

Models of web architecture

One-tier architecture.

One-tier architecture involves putting all of the required components for a software application or technology on a single server or platform. This kind of architecture is often contrasted with multi-tiered architecture or the three-tier architecture that's used for some Web applications and other technologies where various presentation, business, and data access layers are housed separately.

Diagram of one-tier architecture

Two-tier architecture

The Two-tier architecture is divided into two parts: Client Application (Client-side) and Database (Server-side) respectively.

Also called a client-server application, the communication in this architecture takes place between the client (browser) and the server. The client system will send the request to the server system which will process it and send back the data to the client side.

Diagram of Two-tier architecture

Multiple-tier architecture

A Multi-tier Architecture is a software architecture in which different software components, arranged in tiers (layers), offer dedicated functionality. The most common example of multi-tier architecture is a three-tier system comprising a data management tier (encompassing one or several database servers), a client tier (interface functionality), and an application tier (business logic).

Diagram of Multiple-tier architecture

Microservices architecture

You might have heard of the word microservices if you’re a tech enthusiast. Microservices are independent services like applications, which exist completely on their own. These come with their logic, state, and deployment and interact with each other via API calls, queues, etc. depending on the requirements. These microservices combine to deliver the complete application solution.

With microservices architectures, applications are easier to scale and faster to develop allowing businesses to accelerate innovation and time-to-market for new features.

Diagram of Microservices Architecture

Layers and Components of Application Architecture

The application architecture is made up of several layers: design layer, frontend layer (HTML and CSS), backend or data layer (database and scripting languages), platform (browser/OS), and business layer. These layers are built on top of each other and depend on each other to create a successful project.

Presentation Layer

This layer represents the design and UI components on the client side. Users interact with this layer to send requests through the application layer to the server. It displays the data flow for the users. The main purpose of this layer is to take data from users and show the response from the server (data layer).

Our UI team can help you create the right experience to help your business attract customers’ attention.

Application Layer

The application layer consists of an API gateway. Front-end developers write code to pass the data from the presentation layer to the business logic layer where it is processed. Data will pass to APIs and get stored in the database, depending on the feature it is utilized in the business layer for application logic and to perform certain actions.

Business Layer

This layer has all implementation of application logic. Data from the application layer gets utilized here for example in a lead generation application a form is submitted in the presentation layer and data travels through APIs and is then used to send out emails or to perform any action on the lead before getting stored in the database.

Data or Backend Layer

All the data gets stored in the database and retrieved from it to use on the front end (client-side). Data travels from the database through APIs, from the application layer in creating modules or components that are converted to UI and the user then interacts with that in the presentation layer.

Conclusion :

To conclude, there are different ways to set up the architecture for applications software. Microservices architecture is the most popular choice of mid-sized and large companies like Amazon and Google. However, in order to find out more about which architecture to go with for building your project we recommend you reach out to any professional web development team that can guide you according to your needs and goals.

Want us to help you build your next big product? Contact us .

Something here

Author Image

Fahad Ahmed

LinkedIn icon

Need a solution or consultation?

Latest Posts

Feature image of blog post article

Bridging the Expertise Gap: Staff Augmentation's Key Role in Digital Transformation

staff augmentation

Feature image of blog post article

Shopify Plus: Is it Worth the Investment for Large-scale E-commerce?

software development

Feature image of blog post article

Pakistan among the top countries in South Asia for Software Outsourcing

Feature image of blog post article

From Yawn to Yay: Tips for Making B2B Content Marketing More Engaging

Digital Marketing

Feature image of blog post article

Email Marketing Templates: The Secret Weapon Your Retail Brand Needs 

Feature image of blog post article

Nokia's Bold Move: Discover the Benefits of Rebranding Your Business

Feature image of blog post article

Boost Your Bottom Line: How Ecommerce Rewards Programs Can Drive Customer Retention

Feature image of blog post article

Unlocking the Power of Authentic User-Generated Content in 2023

Feature image of blog post article

Integriti Group Inc. receives 2023 best of staffing talent award for service excellence

News and Updates

Slider Left Arrow

Have An IDEA WE CAN HELP.

Start your project.

White Arrow

Minneapolis

7760 France Ave South Suite 1100 Bloomington, MN 55435

2 Robert Speck Parkway Suite 750 Mississauga, Ontario L4Z 1H8, Canada

Avenida Patriotismo 229 Mexico City, Ciudad de Mexico, 03800

logo

Exploring the 3 layers of software interactions (APIs)

apply

Application Programming Interfaces, commonly known as APIs, are a set of protocols, routines, and tools that enable software applications to interact with each other. They allow different software applications to exchange information seamlessly and efficiently.

APIs have become increasingly important in today's digital world, as they enable developers to build powerful applications that can connect with other services and platforms. APIs can be broken down into three different layers, each of which serves a different purpose.

In this blog post, we will explore the three layers of APIs and what they do.

1. Presentation Layer

The presentation layer, also known as the "API endpoint," is the layer that developers interact with most frequently. This layer provides a user-friendly interface for developers to access the functionality and data of the underlying service. It is responsible for processing incoming requests and returning responses in a format that developers can easily understand.

The presentation layer can take many different forms, depending on the requirements of the API. It could be a REST API that uses HTTP requests to exchange data or a SOAP API that uses XML messages to communicate. Regardless of the specific implementation, the presentation layer is the public-facing aspect of the API and is the first point of contact for developers.

2. Business Logic Layer

The business logic layer, also known as the "API middleware," is the layer that contains the core logic of the API. It is responsible for processing the requests received from the presentation layer and generating responses based on the requested actions.

The business logic layer is where the API's core functionality resides. It may perform data validation, authentication and authorization, database queries, or other complex operations. This layer is typically developed by the service provider and is not exposed directly to developers.

3. Data Storage Layer

The data storage layer, also known as the "API database," is the layer where all of the data used by the API is stored. This layer is responsible for managing data storage, retrieval, and modification. It may use a variety of database technologies such as SQL, NoSQL, or object-oriented databases.

The data storage layer is the most critical component of the API since it holds the data that the API relies on. If the data storage layer fails, the entire API may fail. Therefore, it is crucial to ensure that the data storage layer is designed and implemented correctly.

In conclusion, APIs consist of three layers: presentation layer, business logic layer, and data storage layer. Each layer plays a crucial role in the API's functionality and performance. Understanding the three layers of an API is essential for developers looking to build robust, reliable, and scalable APIs.

Related articles

article

What is Application Programming Interface (API)?

An API is a set of rules and practices that allow two applications to communicate. This means that one can use one application to retrieve data from another application or send data to another application.

Web Analytics

Web Development Layers | IGCSE Information and Communication Technology Preparation - Year 11 PDF Download

Content Layer

  • The content layer forms the structure of a web page.
  • This is where you enter the text, images, and other content that make up the body of the web page.
  • It's typically constructed using HTML (HyperText Markup Language).

Presentation Layer

  • The presentation layer is used to display and format elements within a web page.
  • It controls how the content looks, including layout, colors, fonts, and more.
  • This layer is mainly handled by CSS (Cascading Style Sheets).

Behavior Layer

  • The behavior layer uses scripting languages to control elements within a web page.
  • It enables interactive elements and complex functionality, such as form validation, image sliders, and dynamic content updates.
  • JavaScript is the primary language used for the behavior layer.

Top Courses for Year 11

Faqs on web development layers - igcse information and communication technology preparation - year 11, study material, practice quizzes, web development layers | igcse information and communication technology preparation - year 11, sample paper, objective type questions, important questions, extra questions, viva questions, video lectures, mock tests for examination, shortcuts and tricks, previous year questions with solutions, past year papers, semester notes.

presentation layer web development

Web Development Layers Free PDF Download

Importance of web development layers, web development layers notes, web development layers year 11 questions, study web development layers on the app, welcome back, create your account for free.

presentation layer web development

Forgot Password

Change country.

Web Development Layers

Introduction to web development layers.

  • Web Development Layers refers to the different levels at which website creation takes place
  • There are primarily three layers - Structure layer, Presentation layer, and Behaviour layer
  • Different coding languages are used in each layer

Structure Layer

  • The structure layer, also known as the Content Layer , is where the foundation of the website is built
  • HTML (Hyper Text Markup Language) is used to create the basic structure of web pages in this layer
  • Web developers use HTML tags to store headers, footers, content, and links on the page
  • HTML is also used to embed images, video, audio, and other media content
  • This layer primarily focusses on the structure of information, regardless of its presentation or behaviour

Presentation Layer

  • The presentation layer controls the visual layout and appearance of the website
  • Cascading Style Sheets (CSS) is the language used primarily in this layer
  • CSS is used to design the layout, colors, fonts, and other visual elements of the web page
  • CSS can be used to provide multiple styles to different devices or screen sizes (responsive design)
  • While HTML focusses on the structure, CSS allows designers to control how that structure looks

Behaviour Layer

  • The behaviour layer is where the interactive facets of a website are programmed
  • JavaScript is the main language used in the behaviour layer
  • JavaScript allows for web page elements to be manipulated in response to user actions
  • Examples of JavaScript functionality include form validation, interactive maps, and dynamic content updates
  • This layer enables users to interact with the website, improving user experience

How the Layers Interact

  • All three layers are interconnected and work together to create a fully functional website
  • The structure layer gives the website its basic structure, the presentation layer determines how the website looks, and the behaviour layer provides the interactivity
  • Each layer has a specific role, but they cooperate and influence each other
  • Working separately on each layer promotes efficiency and modularity in the web development process

To remember - For a website to function effectively, all three layers must be properly incorporated and balanced.

IMAGES

  1. A Guide to the Presentation Layer

    presentation layer web development

  2. Multi Layered Architecture Of Web Application

    presentation layer web development

  3. The 1 Best Web Development

    presentation layer web development

  4. Web Development Life Cycle: 7 Steps To Build Web App in 2023

    presentation layer web development

  5. Web Application Architecture: Everything You Need to Know About

    presentation layer web development

  6. Architecture of the personalized presentation layer of a web-based

    presentation layer web development

VIDEO

  1. #25 Presentation Layer

  2. OSI Model part 2

  3. Presentation layer

  4. 🎨 What is the Presentation Layer?

  5. Presentation 4 Physical layer P1

  6. OSI Model

COMMENTS

  1. Web Application Architecture: How the Web Works

    Web application architecture following the three-tier pattern. Presentation layer. The presentation layer is accessible to users via a browser and consists of user interface components and UI process components that support interaction with the system. It's developed using three core technologies: HTML, CSS, and JavaScript.

  2. What is the Presentation Layer in Programming?

    The presentation layer is one of the three main layers in object-oriented programming. The three main layers include: Presentation Layer. Business Layer. Data Layer. Now, these three layers are typically related to enterprise web applications. It's a design pattern used to help separate your code out in three distinct areas that (if need be ...

  3. Presentation Layer in OSI model

    Prerequisite : OSI Model Introduction : Presentation Layer is the 6th layer in the Open System Interconnection (OSI) model. This layer is also known as Translation layer, as this layer serves as a data translator for the network. The data which this layer receives from the Application Layer is extracted and manipulated here as per the required format to transmit over the network.

  4. Chapter 4. Layered Architecture for Web Applications

    This way, the development of Web applications can be put under the cover of software engineering but need to be extended. Web applications are multidisciplinary (software engineering, database modeling techniques, network computing, and effective interface design). ... (or presentation) and the innermost layer, that is the Data Layer. ...

  5. Difference between frontend, backend, and middleware in web development

    Generally speaking, people refer to an application's presentation layer as its front end, its persistence layer (database, usually) as the back end, and anything between as middle tier.This set of ideas is often referred to as 3-tier architecture. They let you separate your application into more easily comprehensible (and testable!) chunks; you can also reuse lower-tier code more easily in ...

  6. What is Layered Architecture and The Application Layers?

    Presentation Layer. This layer represents the design and UI components on the client side. Users interact with this layer to send requests through the application layer to the server. It displays the data flow for the users. The main purpose of this layer is to take data from users and show the response from the server (data layer).

  7. Understanding the Three Layers of APIs: Presentation ...

    2. Business Logic Layer. The business logic layer, also known as the "API middleware," is the layer that contains the core logic of the API. It is responsible for processing the requests received from the presentation layer and generating responses based on the requested actions. The business logic layer is where the API's core functionality ...

  8. Web Development Layers

    The three layers of web development are presentation layer, business logic layer, and data access layer. 2. What is the main purpose of the presentation layer in web development? Ans. The presentation layer is responsible for the user interface and how the web application looks and interacts with users. 3. What role does the business logic ...

  9. Web Development Layers

    The structure layer gives the website its basic structure, the presentation layer determines how the website looks, and the behaviour layer provides the interactivity. Each layer has a specific role, but they cooperate and influence each other. Working separately on each layer promotes efficiency and modularity in the web development process.