General comparison and hints - jellyfish-tom/TIL GitHub Wiki

[SOURCES]

Types of web app architecture

There are several time-tested approaches to building modern web app architecture. We will name 7 widely-used types that you can come across when analyzing such apps as Gmail, Uber, Netflix, or Slack. To make it easier, we’ll split these types depending on the part of a web application structure: server-side or client-side.

Server-side approach

Microservices

Microservices is one of the most popular widely-applicable approaches to building highly-scalable web architecture. It is based on the principles of decentralization and modularity. Simply put, the system is broken down into a range of microservices. Each microservice is built around a single business function and deployed independently. It may be created with a custom set of technologies and usually has its own data flow and database.

This approach is known for its high reliability, huge scalability potential, and incredible tech and business agility. This explains its popularity for building large and distributed web applications and the general trend for migrating to microservices. At the same time, the development, testing, and support of a microservices-based web app infrastructure can be more complex compared to working with traditional web architecture based on a monolithic approach.

If you are eager to learn more about microservices, grab a link to our recent blog post where we talk about the numerous advantages of microservices architecture for business in detail.

Monolith

This is the simplest and the most straightforward approach to building a web app architecture. A monolithic web application is built as a single unit that runs all or most of the functions.

Monoliths can have one or more databases, can be hosted on in-house servers or in the cloud, and can be integrated with third-party services and platforms. However, the most important characteristic of a monolith is its undivided nature.

Monolith is often faster to design, develop, test and deploy, which makes it a viable and cost-effective solution for MVPs and small projects that need to be rolled out on a tight deadline. At the same time, monolithic applications are harder to scale and modernize because it would require making changes that affect the entire system. It can also complicate tracing errors and troubleshooting.

Serverless

Don’t let the name mislead you – serverless doesn’t mean that there are no servers. What it means is that your application is deployed and runs on outside servers owned and maintained by cloud service providers.

Modern cloud platforms among which are AWS, Google Cloud, and MS Azure have an entire arsenal of cloud storage tools and services for building, managing, and supporting cloud web application architecture of any complexity and volume. You can delegate as much responsibility as you need and benefit from a pay-as-you-use model to control the cost of cloud services.

Serverless architecture is a great option for companies that either don’t have the in-house expertise to support their web app infrastructure or seek to decrease the cost of support by leveraging flexible pricing offered by cloud service providers.

Client-side approach

This approach shows how different web application architectures are implemented on the client side.

Single-page applications

A single-page application or SPA does exactly what the name suggests – provides a user with only one web page that changes dynamically when a user clicks on something or interacts with a page in any other way. Instead of reloading the entire page every time a user sends a request, SPA updates only the relevant component/section of the page. This makes a single-page web app fast, lightweight, and instantly responsive.

This approach works great for apps focused on providing one service (e.g. Google Maps) or continuously updating content (a social media app).

Multi-page applications

This traditional design approach is tailored for applications with multiple workflows and functions. Essentially, a multi-page app (MPA) is implemented as a number of dynamic web pages each performing a distinctive function and reloading when a user sends a new request. Think of an eCommerce web application that has separate pages for different services (shopping, loyalty program management, account, blog, etc.).

MPA can do for you what SPA can’t – develop diverse workflows with rich content and features without overwhelming the UX.

Progressive web applications (PWA)

PWAs have been gaining increasing interest in the last few years, mainly for the two core benefits of this approach – offline mode and improved user experience. Progressive web apps merge the idea of a web app that runs in a browser with a native application installed on the device (think of such features as notifications, data synch, offline mode). To make this happen, PWAs leverage a service worker that sits in browsers, processes user requests, pulls data from server/cache, and enables offline access when it’s needed/possible.

The business value of installable PWAs has already been proven by many companies reporting increased in-app time, improved mobile user experience, and conversion boost.

Micro frontend

You can compare the micro-frontend approach to microservices. Only this time, the client-side of the web application structure is being split into separate independent modules. These modules can be developed and deployed using different technologies according to their functions and connection to the server.

The undeniable benefit of this approach is flexibility and scalability. You can develop, deploy and scale every micro frontend independently. You can split your development teams to work in parallel thus increasing speed and focus on specific business functions. Paired with microservices, the micro frontend makes a good solution for large enterprise-level web applications. It allows combining myriad services and functions in one app that evolve independently.

Now that we went through the main types of web app architecture, let’s wrap it up with a few recognized practices and recommendations that will help you choose the type that better resonates with your own needs.

Web application architecture best practices

There are a few web application architecture best practices and principles that will help you understand which approach will work best for your project.

Clarity.

No matter how complex the structure of your web app is, it should be understandable and simple to navigate. Code should be clean and reusable.

Scalability.

Web app as a whole and each part of a web application architecture should be able to scale according to given requirements and foreseeable business needs.

Security and reliability.

Modern web architecture should be built with reliability and security requirements in mind. When designing a web app, it is vital to secure the architecture with security standards and techniques that enable resilience, data protection, reliability and consistent performance of the application.

Error traceability and effective fixing.

Your tech team should be able to easily detect, trace and fix errors without causing major failures or performance slowdown in the entire application.

Automation.

Where possible, application testing, deployment, maintenance and support should be automated to enhance productivity, reduce mistakes and optimize costs.

5 tips to choose the right architecture for your web app

Consider scalability and business agility

If you have high scalability requirements and plan to experiment and work on your application in a very agile way, consider microservices architecture and serverless approaches for your application. Serverless enables seamless growth based on various cloud services and can be largely taken care of by your service provider. At the same time, microservices provide maximum flexibility when you have to deal with changing requirements, diverse technologies and integrations. High scalability and agility make these strategies very popular for building the architecture of modern web applications.

Assess your resources and timeline

Limited budget, scarce development resources, and lack of expertise in-house along with tight deadlines will affect your choice of architecture. If you deal with any of these limitations, consider the easiest and most cost-effective solution for your architecture. Monolith is fast to design, develop, test, and deploy and usually (but not always) is a good fit for small projects and MVPs. However, keep in mind that monolithic applications can be harder to scale and modernize in the long term.

Evaluate cloud service options

Serverless is a great approach for large-scale, data-intensive applications with high scalability requirements. And it is also a great fit for companies that want to rid themselves of troubles connected to sustaining, scaling and supporting large infrastructure and servers in-house. Cloud providers offer all the services you need including DevOps and support for managing cloud-based web applications.

Consider user experience requirements

If UX is your competitive advantage, consider architecture and business logic distribution that will support fast and interactive user experiences. This is one of the reasons why SPAs and PWAs approaches are getting more popular enabling better responsivity and speed across various devices.

Add offline capabilities

If your web app needs to provide a consistent uninterrupted experience despite going offline, consider the benefits of progressive web apps. PWAs combine the advantages of web and native apps, allowing offline access and improved user experiences. This is a popular choice for companies in eCommerce, travel, media, and on-demand services that target mobile audiences.

As you can see, to select the right architecture for your web application, you should consider not only your tech requirements but also align with your business goals, available resources, scalability needs, and user experience needs.