How to Design a Web Application - A Guideline on Software Architecture

Have you ever tried to prepare Pizza at home? (yes!!! We're talking about your favorite food...)

What will happen if you don't make good dough for your pizza base? Surely the whole Pizza base will be spoiled, and you can't continue with preparing your favorite dish. 

Whether you're making a pizza or building some software, if you don't get the right base, you'll have to start everything again from scratch. In a web application, the architecture of your app is the base, and it should be chosen carefully to build an application successfully. A good developer chooses the right architecture for the application to avoid any kind of major change in software design or later in the application code. When a developer chooses the right architecture during the initial design phase, the development process becomes easier, and a lot of engineering and financial resources can be also saved. In this article let's discuss this topic in detail and focus on some key aspects to choose the right architecture for a web application. 

Difference Between Software Architecture and Software Design

Both are not the same....yes!!! You heard it right (don't be confused and let' understand how both are different.)

Software Architecture

The high-level components of a system, the relationship between these components, and how they work together is a part of software architecture. It is the skeleton of any application. For example:

• Choosing a serverless architecture that splits the application into two components: BaaS (backend-as-a-service) and FaaS (functions-as-a-service)
• Choosing a microservice architecture where the different features/tasks are split into individual respective modules/codebases.

When you choose an architecture you need to consider some metrics such as dealing with performance, fault tolerance, scalability, and reliability.

Software Design

The code which you write in your application for different modules, classes, functions, and other features is considered as software design. The code level design defines which module is doing what, the scope of the classes, functions and their purpose, etc. To implement and manage this code in a larger team a common language/pattern (software design pattern) is used to conceptualize repeated problems and solutions. A developer can become more efficient in implementing the code if he/she uses these methods or patterns which are already defined by others. Read the article Design Patterns: Understand The Importance With Real-Life Examples for a clear understanding of software design patterns. 

Software Architecture Patterns

1. Client-server

Client-server architecture is a network architecture and it follows the request-response model. Here the client can be any device such as a PC or workstation on which users run applications. These clients send the request to the server for some information. Servers are powerful computers dedicated to managing disk drives (file servers), printers (print servers), or network traffic (network servers). When the server receives the request, it processes that request and sends the response back to the client. Facebook, Twitter, Skype, banking applications, and almost all social media companies follow this architecture. 

This architecture is a network of computers where each computer works as a node and these nodes can communicate with each other without any use of the central server. Each computer in the network will have equal capabilities/responsibilities. The benefit of this architecture is that there is no fear of a single point of failure. If a node goes down, the other node will be available to process the request. P2P is the base of blockchain technology.

 2. Model-View-Controller (MVC)

In software engineering, this pattern is very popular and it has existed for a long time. This architecture can be used in desktop, web, or mobile applications. In MVC we separate the whole application logic into three components. 

• Models (Data and Logic): It represents and maintains the data of the application in the database. How the information is stored and how it can be retrieved. 
• Views (User Interface): It displays the data using the model to the user such as an output or a GUI.
• Controller (Request Handler): It handles the user request and acts as an interface between models and views.

3. Microservices

This architecture divides the tasks/features into separate respective modules/codebases. These modules coordinate with each other to form a whole large service. This architecture provides much more flexibility to the developer because it allows them to choose their programming language for different modules. Microservice based architecture applications are easier to maintain, test, and deploy in comparison to monolithic architecture. 

4. Event-Driven

Modern web applications are popular for using this architecture. It is also known as Non-blocking architecture. It allows the applications to handle numerous concurrent requests with minimum resource consumption. It is the best suitable for applications that need a fully asynchronous model to scale. 

5. Master-Slave Architecture

Earlier in computer science, this architecture was defined in the context of database replication. For example, in a database, we replicate the data/information across three servers. There is a possibility of inconsistency because one of these could be out of sync with others. Master-slave architecture resolves this issue where we treat one replica as master and the rest are identified as a slave. In vertical scaling, we commonly use a replication approach where one stores the master code and the other are the replicas of that.

6. Layered

The whole structure of the program is divided into groups of subtasks or layers, each of which is at a particular level of abstraction. Each of the layers is responsible for providing the services to the next higher layer. These layers are...

• Presentation layer
• Application layer
• Business logic layer
• Data access layer

How Many Tiers Should Your App Have?

1. Single Tier Application

Advantages:

• No network Latency
• Data is easily accessible without any delay.
• Ensure data safety.

Disadvantages:

• Less control over the application. Implementing a new feature or modifying the code is difficult.
• Requires In-depth testing with minimal mistakes.

2. Two-Tier Application

Advantages:

• Less network calls since the code and UI exist in the same machine.
• Both the database server and business logic are physically close so it gives a fast performance.

Disadvantages:

• Most of the application logic is handled by the client so it becomes difficult to reuse the logic and control the software version, also in re-distribution of the newer version.
• Scalability issue. When the number of requests increases application performance degraded.

3. Three-Tier Application

Advantages:

• For database updation, data passed in the middle tier ensures its validity and that eliminates the data corruption through a client application.
• Business logic is placed on a centralized server which ensures data security.
• The application's scalability can be expanded because of the distributed nature of the application servers. It's not required to have a separate connection from each client, few application servers connection is sufficient.

Disadvantages:

• Due to the increase in communication points (client to middle tier to the server, instead of directly from the client to server), it requires more effort to create a three-tier application.  Also, performance expanded by tools like Visual Basic, PowerBuilder, Delphi will be degraded.

4. N-Tier application

Advantages:

• All the pros of a three-tier architecture.
• Offload from the database tier and client tier boost the performance. 

Disadvantages:

• Tiers are divided into components and that's the reason it becomes difficult to implement and maintain the complex structure.

Key Points

• If you don't want any network latency then go with single-tier architecture.
• If your priority is to minimize network latency and you want more control of data within the application then choose a two-tier application. 
• If you want control over data, control over the code/business logic in your application, and your preference is security then choose a three-tier application. 
• If your main concern is scalability then choose N-tier architecture.

Horizontal or Vertical Scaling — Which One is Good for an Application?

• If your app receives a minimal amount of consistent traffic and you know that the traffic load will not increase significantly then it's good to choose the vertical scaling. You can upgrade the server or you can replace the server with more capacity. There is no need to go with a distributed network.
• If your app is similar to any social media apps and day by day traffic is increasing more frequently then chances are, it will spike exponentially shortly. In this case, availability becomes the primary concern for any application. So it's good to choose horizontal scaling. 

Monolithic or Microservice?

When to Use Monolithic Architecture?

• When requirements are fairly simple and the traffic is limited on the app then go for Monolithic architecture (Ex: Tax calculation app). If you don't see the increase in traffic exponentially in the future then it's good to choose this architecture.

When to Use Microservices Architecture?

• It is best for complex use cases. If your apps receive a high amount of traffic and the traffic is expected to be increased exponentially in the future then microservices architecture is good.
• If you are building a social media networking application then for different features such as messaging, real-time chat, live video streaming, image uploads, liking, and sharing implement the components separately. Keep the single responsibility and separation of concerns principles in mind. 

Note: When you start building an application with a single codebase, most of the time it becomes a huge application. This is the reason a lot of developers start with the monolithic architecture but later they scale out the app into a Microservice architecture. So choosing an architecture depends on your use cases and the requirements. 

To know more about Monolothic and Microservice Architecture, refer this article: Monolithic vs Microservice Architecture

NoSQL or SQL?

When to Pick SQL/Relational Databases?

• If you're building a stock trading, banking, or finance based application then choose a relational database.
• Relational databases are best suited for the applications where your applications deal with the transactions or comply with the ACID properties. For these applications, data consistency is extremely important.
• Facebook kinds of social networking apps store data with a lot of relationships, for instance. If the data in your application has a lot of relationships then relational databases are best to choose in such cases. You can take the example of a person who lives in a particular city or someone who visited a specific hotel for vacations. If you're building facebook kinds of social networking apps and you need to store a lot of relationships then go for SQL/Relational databases.

MySQL, Microsoft SQL Server, PostgreSQL, MariaDB all these are examples of popular relational databases. 

When to pick a NoSQL/Non-Relational database?

• Choose Non-Relational databases if your primary concern is the scaling of your application. NoSQL databases are best suitable when there are heavy read/write operations are happening on your website and you need to deal with the huge amount of user's requests. With NoSQL, It's easy to handle concurrent traffic and a large number of requests minimal latency.
• NoSQL databases are also the best choice for data analytics use cases. 

MongoDB, Redis, Cassandra, HBase, these all are the example of popular non-relational databases. 

Which One is The Right Technology For The Application?

1. Real-Time Data Interaction

Choose NodeJS, Tornado (Python's framework), Spring Reactor, Play, and Akka.io (For Java Ecosystem) if you're building an application where you need...

• Real-time communication with the backend server. For example, an audio-video streaming app like Spotify, Netflix, or any kind of messaging application. 
• A persistent connection between the client and server, and a non-blocking technology on the back end.

2. Peer-to-peer Web Application

• For peer-to-peer web apps, for instance, P2P distributed search engine or for P2P Live TV radio service (For example LiveStation by Microsoft) you can choose JavaScript protocols like DAT and IPFS.
• A JavaScript framework freedom.js is suitable for building P2P web apps that work in modern web browsers.

3. CRUD-Based Regular Application

• For simple CRUD based applications use PHP Laravel, Python Django, Spring MVC, Ruby on Rails, and ASP .NET MVC.

4. Small Scale Applications

• If you're building a simple application such as a blog, an online form, a simple app that integrates with social media then use PHP. There are some other options as well such as Spring boot or Ruby on Rails. These technologies take less development or configuration time but the hosting of PHP is much more affordable in comparison to other technologies, also it is best for simple use cases.

5. CPU and Memory-Intensive Applications

• Regular web frameworks or scripting languages are good for building web apps but these languages are not suitable to run CPU-intensive, memory-intensive, or to perform heavy computational tasks on the back end. For all the above tasks and big data processing, parallel processing, or running monitoring and analytics on large amounts of data C++ is the most commonly used language in the tech community. It facilitates low-level memory manipulation and developers can write distributed systems with more control over memory. Most of the cryptocurrencies are written in C++.
• Rust is similar to C++ which provides high performance and safe concurrency. Industries are also using Java, Scala, and Erlang. Java is good for large scale enterprise systems.
• Go programming language is good for multi-core machines and handling a large amount of data.
• Julia is a dynamically programmed language with a high-performance feature. It is suitable for the application of running computations & numerical analytics. 

Must Read

• How Web Works - Web Application Architecture for Beginners
• Top 10 Frameworks for Web Applications
• 30+ Web Development Projects with Source Code

Conclusion

Whatever points we have discussed throughout this article all these are important to remember when you are starting with software architecture. Before you make your hands dirty in the code make sure you choose the right software architecture, the right database, the right technology, and the right scalability option. Keep in mind all the above points and it will help you in the long run.