In this article, you’ll discover how a web application architecture diagram looks and how you can design the right architecture for web apps.
Join the DZone community and get the full member experience.
When a user logs on to a desktop/laptop or a mobile, opens a browser, and types the name of a website, the browser displays the required information and the user performs an action on the site. Have you ever wondered how computers retrieve this information and what happens in the background? It’s an underlying web application architecture that makes this process possible. In this article, you’ll discover what a web app architecture is, how a web application architecture diagram looks, and how you can design the right architecture for web apps.
A web app architecture presents a layout with all the software components (such as databases, applications and middleware) and how they interact with each other. It defines how the data is delivered through HTTP and ensures that the client-side server and the backend server can understand. Moreover, it also secures that valid data is present in all user requests. It creates and manages records while providing permission-based access and authentication. Choosing the right design defines your company growth, reliability and interoperability and future IT needs. As such, it is important to understand the components comprising the architecture of web apps.
Typically a web-based application architecture comprises of three core components:
1) Web Browser: The browser or the client-side component or the front-end component is the key component that interacts with the user, receives the input, and manages the presentation logic while controlling user interactions with the application. User inputs are validated as well, if required.
2) Web Server: The web server also known as the backend component or the server-side component handles the business logic and processes the user requests by routing the requests to the right component and managing the entire application operations. It can run and oversee requests from a wide variety of clients.
3) Database Server: The database server provides the required data for the application. It handles data-related tasks. In a multi-tiered architecture, database servers can manage business logic with the help of stored procedures.
In a traditional 2-tier architecture, there are two components namely the client side system or the user interface and a backend system which is usually a database server. Here the business logic is incorporated into the user interface or the database server. The downside of 2-tier architecture is that with an increased number of users, the performance decreases. Moreover, the direct interaction of the database and the user device also raises some security concerns. Railway reservation systems and content management systems are a couple of applications that are usually built using this architecture.
When it comes to 3-tier architecture, there are three layers:
In this model, the intermediate servers receive client requests and process them by coordinating with subordinate servers applying the business logic. The communication between the client and the database is managed by the intermediate application layer thereby enabling clients to access data from different DBMS solutions.
The 3-tier architecture is more secure as the client does not directly access the data. The ability to deploy application servers on multiple machines provides higher scalability, better performance, and better re-use. You can scale it horizontally by scaling each item independently. You can abstract the core business from the database server to efficiently perform load balancing. Data integrity is improved as all data goes through the application server which decides how data should be accessed and by whom. For that reason, a change of management is easy and cost-effective. The client layer can be a thin-client which means hardware costs are reduced. This modular model allows you to modify a single tier without affecting the remaining components.
Building a layered modern web app architecture helps you to identify the role of each component of an application and easily make changes to the corresponding layer without affecting the overall application. It enables you to easily write, debug, manage and re-use code.
The three layers of a web app architecture:
Here is an extra web application architecture diagram of layers for you:
What is a web server? Simply put, a web server runs one or more websites or web apps. The web server uses HyperText Transfer Protocol (HTTP) along with other protocols to listen to user requests via a browser. It processes them by applying business logic and delivering the requested content to the end-user.
A web server can be a hardware device or a software program.
While a static web server delivers the content as it is to the browser, a dynamic web server updates data before delivering it to the browser.
Apache is a popular open-source web server from Apache Software Foundation. It was developed by Robert McCool in C and XML in 1995. Apache is based on a process-driven model wherein every request results in the creation of a new thread. The modular design of Apache allows you to easily scale individual resources. With minimal configuration you can manage even a large traffic. It works on MacOS, Windows, and Linux environments. However, Linux is the most preferred environment for Apache.
While it uses a file-system to process static content, dynamic content is processed within the server. Using .htaccess files, you can perform additional configurations to the server settings. Security is good. It offers support via IRC, Stack Overflow and mailing lists.
NGINX is another popular web server that is usually pronounced as «Engine X.» Developed by Igor Sysoev in 2004, NGINX quickly became popular. It operates on an event-driven model wherein thousands of requests are processed within a single thread, delivering more with minimal resources. It uses PHP to serve static resources and serves static content 2.5 times faster than Apache. Dynamic content is served via external processes. When it comes to interpreting requests, Apache passes the file system location while NGINX passes the URI. This feature extends the NGINX capability as a load balancer, HTTP Cache and a proxy server.
While it supports Unix-based OS, Windows compatibility is limited. You can’t make additional configurations. The smaller codebase offers better security. Dynamic modules are not supported. Along with mailing lists and IRC, Forum is available too.
NGINX has an edge over Apache as it serves as a web server as well as a proxy server. The event-driven approach that processes thousands of requests in a single thread offers greater performance, speed and cost-effectiveness.
The client-side component of a web application architecture enables users to interact with the server and the backend service via a browser. The code resides in the browser, receives requests and presents the user with the required information. This is where UI/UX design, dashboards, notifications, configurational settings, layout and interactive elements come into the picture.
Here are some of the most commonly used front-end technologies:
HTML or Hypertext Markup Language is a popular standard markup language that enables developers to structure web page contents using a series of page elements. Developed by Tim Berners-Lee and released in 1993, HTML quickly evolved and became the standard markup language across the globe.
CSS or Cascading Style Sheets is a popular style sheet language that enables developers to separate website content and layout for sites developed using markup languages. Using CSS, you can define a style for elements and reuse them multiple times. Similarly, you can apply one style across multiple sites. It is simple and easy to learn. You can apply a style for a single element, an entire webpage or the entire website. It is device-friendly too.
Browser compatibility and security are two areas that raise a concern. Similarly, different versions of CSS also create confusion. It is advised for developers to check the compatibility before making any changes to the design.
JavaScript or JS is the most popular client-side programming language which is used by more than 90% of websites in recent times. It was designed by Brendan Eich of Netscape in 1995. JavaScript uses a simple, easy-to-learn syntax. The language is so popular that every browser comes with a JS engine to run JavaScript code on devices. It is easy to insert JS code on any web page which makes it highly interoperable. It allows you to create rich interfaces to deliver a better UI/UX experience. Being on the client-side, JS reduces the server load as well.
However, developers should be careful about the security as the code is executed on the client-side which can be exploited by hackers at times.
React is an open-source JavaScript that gained popularity in recent years. It was developed by Jordan Walke of Facebook in 2013. React benefits include enabling developers to easily create high-quality dynamic web applications with minimal code and effort.
ReactJS is easy to learn and use. There is extensive documentation and plenty of handy tools available for developers. The code is reusable. ReactJS uses a virtual DOM which means concerned elements are updated when a change is made instead of the entire DOM tree being rewritten. It improves efficiency and optimizes memory usage. ReactJS uses a one-way Data flow which means changes made to the “child” elements do not affect the “parent” element. The code is easy to test and SEO-friendly.
On the downside, the ReactJS development environment is highly dynamic which means developers should proactively monitor the changes and quickly adapt new skills to leverage React. Moreover, React technologies are improving rapidly, however, the documentation is unable to catch up with this pace. A critical area of concern is that ReactJS focuses on the UI part and you need to depend on other libraries for client-side functionalities.
Vue.js is an open-source JavaScript framework written by Evan You in 2014. This framework enables developers to easily build UI interfaces for web, desktop and mobile devices. Vue.js comes with handy tools that serve basic programming needs. The tool is lightweight for downloads and installation. It is easy to learn and use. It uses a virtual DOM so that when a user interacts with an element, the browser does not have to render the entire page, only the element. The speed and performance is good. It uses a two-way data binding model allowing you to track data and update related components more efficiently. The components are reusable. It easily integrates with existing apps. The documentation is concise and well-structured. Community support is good.
While the community support is good, Vue.js is largely adapted by Chinese companies such as Alibaba and Xiomi. As such, forums and discussions are often done in Chinese language, creating a language barrier for English speaking people. The tool kit suits basic projects but offers limited support for large scale projects. The flexibility that it offers can pose quality issues on large projects as well. GitLab, Alibaba and Adobe are some of the popular companies that use Vue.js.
Angular is an open-source web app framework developed by Google in 2016. It is a complete rewrite of the Angular.js framework. As of now, it is one of the most popular front-end development frameworks available in the market.
NGModules is the building block of Angular, offering all functionalities for developing applications such as components, modules, templates, directives, service and dependency injections, routing etc. It helps developers quickly build prototypes. It uses plain HTML templates. Testing is quick and easy owing to the dependency injection architecture style.
Angular uses two-way data binding which makes DOM manipulations easy and quick. The CPU-performance enhancing features make it a good choice for large-scale apps. It comes with various plugins, tools out-of-the-box. Coming from the IT giant Google, Angular enjoys a vibrant community support. The popularity and market value imply that you’ll find highly skilled Angular professionals in the market.
However, the hierarchical structure can sometimes make debugging a challenge. Concepts such as Inversion Of Control, Dependency Lookup and Dependency Injection require a steep learning curve. You need JavaScript installed on the machine to run Angular. While Two-way data binding is a great feature, it can result in slow performance on older and legacy devices. Integrating legacy infrastructure with Angular is a concern too.
If you want to pick the best ones out of these front-end development tools, React and Vue.js are highly recommended. React is a lightweight tool that comes with the best developer functions, enabling you to quickly build quality software.
Vue.js is a view-oriented product that is lightweight, easy to use and comes with a powerful set of developer tools. To get started, you just need to simply load the interface and add JavaScript.
The server-side component is the key component of the web application architecture that receives user requests, performs business logic, and delivers the required data to the front-end systems. It contains servers, databases, web services etc.
Here are some of the most commonly used server-side technologies:
Node.js is an open-source cross-platform runtime environment developed by Ryan Dahl. It was built on Google Chrome V8 Engine to run network and server-side applications and was released in 2009. Developers use JavaScript to build node.js applications and run them on node.js runtime using Windows, macOS, and Linux platforms.
Node.js is highly popular as it offers a rich library of JavaScript modules that enable developers to quickly build quality applications. Node.js doesn’t buffer data and executes code super fast. It is event-driven and asynchronous and runs on a single thread while being highly scalable. Node.js best suits apps that are data streaming, data-intensive, I/O bound, and JSON-API based. Paypal, Uber, eBay, and GoDaddy are some of the popular applications that are powered by Node.
