Have you ever wondered what the components of web applications are? Or what are the roles of their individual components and layers? Or what are the technologies most commonly used for creating web applications? What are the most popular types of web applications?
You need to know the answer to these questions. They are crucial from the business perspective because the awareness of differences and possibilities allows you to solve more accurately the business problems for which the applications are used.
Why is a web application not a website?
You can answer the above question half-jokingly: because there are no websites anymore. They have been replaced by web applications. Although not precise, the term remains. The sites using Content Management Systems (CMS) are still called ‘websites,’ although, in the strict sense, they are web applications.
Confusion arises from the common feature of websites and web applications. Similarly to the websites of the past, some of the latter perform information functions only. They offer one-way messages, reduced to information.
Some web applications, like all websites, do not allow users to interact with them. You can read, watch or listen to something but nothing more.
Modern web applications are based on extensive interactions, multiple functionalities and broadly understood usability.
We develop applications based on AWS services and AWS components.
Functions of web applications
Web applications make our lives easier and solve our consumer problems. And the scope of their use is getting bigger and bigger.
They help us to:
- Order (e.g., food)
- Purchase (e.g., tickets, books, flowers)
- Book (e.g., airline tickets, hotel rooms, beauty salon visits, or visits to the doctor's office)
- Plan the performance of specific services (e.g., cleaning)
- Learn (e.g., languages, new programs)
- Find the interested parties (e.g., through advertisements)
- Exchange (e.g., currencies, opinions)
- Invest (e.g., in a stock exchange)
- Participate (e.g., in competitions and lotteries)
- Play games (e.g., individually or as a team)
- Establish relationships (e.g., emotional, business).
The above list is far from complete. Over time it will be even longer. What immediately draws attention is the number of verbs that describe activities (and imply their results) possible to achieve through web applications. They are for business what fuel is for motor vehicles.
They are tools used for:
- Selling (e.g., online stores)
- Image building
- Education
- Establishing business relationships
- Enabling the digitalization of business needs.
Web applications are built based on a dozen or so languages, technologies, and solutions. The technology stack used for web application building includes Python, Django, PHP, React, Node.js, and many more.
Web application: definition
What is a web application? For the record, let's define the term. Simply put, a web application is a type of computer program installed on a web server and available through a web browser.
Unlike desktop and mobile applications, web applications do not have to be installed on a computer, mobile phone, or tablet.
They are available in any operating system (e.g., Linux, Windows, macOS), on any device (even a TV), and in any browser.
Although usually full access is provided, there are web applications that for full functionality require:
- Authentication (login and password)
- Purchasing temporary access (paywall).
There are several types of web applications and their division criteria. From a purely business perspective, not all of them are relevant. Hence, this article will deal with the most popular and most commonly used for business purposes.
Single-Page Application (SPA)
As the name suggests, the interaction between the user and the application takes place on a single page. The entire content (information and functionalities) is located in a single space, which definitely facilitates and accelerates its use.
In Single-Page Applications, the presentation layer is generated entirely on the customer's side (user's web browser). You don't need to refresh or reload the application. The content is downloaded dynamically.
Web Application downloads, replaces, and displays only the data resulting from the user activities (data authentication and synchronization).
Single-Page Applications owe their speed to executing the interface control logic not on a server but in a browser. It is mainly enabled by the computing power of modern devices.
Application uploads and downloads only the necessary data to the server via API. Due to asynchronous communication (sending multiple queries simultaneously in the background), such applications are high-speed and highly interactive. Single-Page Applications are also characterized by lower resource consumption.
Advantages of Single-Page Web Applications
SPAs owe their popularity to many advantages and a few downsides.
The major advantages include the following:
- No need to use plugins (e.g., Flash)
- Application code (HTML, CSS, JavaScript) is usually downloaded once only, and larger application parts are downloaded in the background, which significantly relieves the infrastructure serving static files
- More effective scalability
- Less load on the application server (some operations are performed on the customer's side and not on the server)
- Independence of the back end (front-end application communicates with the backend via API)
- Fast and smooth interactions between the user and the application
- Loading speed
- Fast and responsive interface
- Very good first impression
- More efficient caching.
Disadvantages of Single-Page Web Applications
Although impressive, Single-Page Applications also have their drawbacks. These are not really inconvenient, but you must be aware of them. The major disadvantages include the following:
- The large size of output files
- SEO-Unfriendly – the issue of SPAs being moderately friendly can be solved by Server Side Rendering
- Greater difficulties with adapting the application to WCAG requirements
- Relatively more work needed for the application creation/development
- Need for additional protection
- Higher consumption of computing power by the user's devices
- Greater difficulties with adapting the application to older browsers and non-standard devices.
Recommended uses of Single-Page Web Applications
From a business perspective, SPAs are recommended for businesses where the visual appeal, operation speed, and usability are of vital importance.
They are most often used in industries where the following take priority:
- View and interactions in real-time (e.g., maps)
- Complex interfaces with multiple interactions (e.g., social media)
- View updates in real-time (e.g., data visualization)
- Convenient editing of selected data (e.g., CRM)
- Better aesthetic experience and greater interactivity.
When not to use Single-Page Applications
Definitely avoid using applications of this type when:
- The presented content is static and rarely updated (HTML)
- You want to reach the users using older browser versions and hardware with lower technical specifications
- You must provide a solution particularly adapted to the disabled user's needs (WCAG)
- You're building an SEO-friendly website.
Examples of Single-Page Applications: Gmail, Google Maps, Facebook, PayPal, Twitter, and Netflix.
Multi-Page Application (MPA)
You could say that traditional Multi-Page Applications are used, or in fact, recommended wherever SPAs are not recommended.
MPA is a traditional (older) type of web application. Multi-Page Applications are characterized by reloading the entire page each time the user interacts with them, which can slow their operation down and affect the User Experience.
Multi-Page Applications are characterized by:
- Page rendering (HTML code generating) on the server side
- Being SEO-Friendly
- Higher level of data security and integrity
- The relative ease of creation, especially using such frameworks as Django
Disadvantages of Multi-Page Applications
Although still very popular, MPAs have disadvantages affecting their business usability and efficiency.
The major disadvantages include the following:
- During page reloading, the same data are downloaded again, which results in excessive server load
- Navigation in MPA is slower than in SPA
- The front-end and back-end layers are usually more linked together than in SPA.
Recommended uses of Multi-Page Applications
As already mentioned, MPAs are still widely used for business purposes, and all indications are that they will continue to be for a long time. They are particularly recommended to the companies that:
- have an extensive product or service offer (e.g., online stores)
- share large amounts of educational or informational content
In particular, if the presented content does not require frequent updates, is static, and does not interact with the user much.
Examples of Multi-Page Applications: Amazon and online stores to a large extent.
What are the components of a web application?
In the most basic division, created based on the user and owner/sender and recipient criteria, a web application consists of a Front end (Client-Side) and a Back end (Server-Side).
In terms of technology, the Front-end layer is usually created in the HTML, CSS, and JavaScript languages and the Next.js, React/Redux, Vue, and Angular frameworks. The Back-end layer is generally created using languages (e.g., PHP, Python, Java) and frameworks (e.g., Django, Symfony, Node.js).
The structure or architecture of a web application can be viewed from the perspective of the layers that can be distinguished in it.
In the most classic division, the following layers are distinguished:
- Presentation layer: its main component is GUI (Graphical User Interface), enabling the users to interact with the web application
- Business logic layer: an intermediary between the Presentation and Data layers, responsible for the performance of all business processes for which the application was created (e.g., order processing)
- Data layer: responsible primarily for user data storing
- Infrastructure layer: all components enabling the application functioning.
Design patterns: Model View Controller
Model View Controller is a pattern in which each of the layers mentioned above serves a separate function, operates based on its own logic, and supports a separate set of functionalities.
In this model, a Web Application consists of the following:
- View: the data presentation logic layer (the data are downloaded by the Controller from the Data layer) responsible for the web application look
- Data Model: the layer constituting the representation of the problem, the description of the relationships between data, consistency rules, and data integrity
- Controller: the intermediary logic layer between the View layer and the Data Model layer, responsible for how the application operates, the interactions between models, and data transfer to the presentation (View) layer.
The View (Presentation) layer is created by front-end developers who give the application a visually attractive, friendly, intuitive, and ergonomic appearance. They design the interface and layout focused on the best User Experience.
The remaining layers are created by developers specializing in back-end technologies aimed at providing stable, secure, and effective solutions.
The essence of the layered approach to creating web applications is the autonomation of problems in each of the layers and avoiding the introduction of dependencies that result in changes in the entire system.
In other words, application creation must be aimed at building it so that a modification introduced in one layer has no significant influence on the remaining layers.
With such separation, it is possible to create, develop, test, manage and repair web applications faster and more easily. It also enables you to define roles, dependencies, responsibilities, methods of communication, and accesses within the entire system and, therefore, the relationships between entire layers and between the components of individual layers.
Currently, other variants of this model can be found, such as MVP (Model-View-Presenter) and MVVM (Model-View-ViewModel).
Business Logic Layer
From the business owner’s perspective, the Business Logic layer plays a key role as it translates the business process and goals into web application functionalities.
For example, in the case of a booking application, the Business Logic will be the possibility to browse available offers, make a selection and ultimately book a particular facility for a specific period.
The Business Logic layer of a web application is primarily aimed at:
- Implementation of Business Rules, i.e., translating them into the code language (e.g., specific instructions and calculations)
- Data validation and buffering, i.e., checking their correctness necessary for correct and efficient web application operation, and acceleration of their handling
- Workflow management
- Status management
- Access management
- Enabling user identification.
In other words, a correctly specified Business Logic is responsible for the performance, effectiveness, and friendliness with which the web application enables you to achieve your business goals and deliver value to the users.
Culture of application creation, or how to create a professional web application
The culture of any software creation is no different from personal etiquette. It also is a set of principles and best practices through which we are better perceived in our environment.
For software, our environment is composed of the users, developers, and customers on the one hand. On the other hand, the software environment also includes the infrastructure in which our application operates.
The developer etiquette should include the following features and principles:
- Attention to code cleanliness and clarity: Our development style, like good handwriting, should be clear and understandable. Not just to us at the moment of the code creation but also to any developer with appropriate qualifications.
- Attention to logical structure: Software creation is not about an infinite number of code lines but a development of a simple, consistent, and logical architecture of the entire system. Always keep in mind the SRP (Single Responsibility Principle), encapsulation, and simplified inheritance. With that, our software will be maintenance-friendly, and its development will be secure, enjoyable, and inexpensive.
- Attention to documentation and inventories: Remember that something that seems obvious to you may not necessarily be evident to an outsider. A good code documents itself but let's respect other people's time and not force them to read the entire code when, e.g., it is only necessary to understand one simple public method. Especially in times of Serverless and Microservices, we should take care of API documentation of our software. Also, remember to create a list of your system components. Even the best encyclopedia without the index or the table of contents is completely senseless.
- Attention to testing and error monitoring: Nothing is worse than an error reported by a user or customer. Good software should be well-monitored, appropriately covered by automatic tests, and have a full range of diagnostic tools. We should know about every failure, error, or anomaly before our users notify us about them.
These are the most important principles our team follows every day. Also, remember that the issue of clean code and the culture of software creation have been extensively and expertly covered in Robert C. Martin's book Clean Code, a must-read for any developer!
Dedicated web applications for business
The business case for web application creation is fairly obvious.
They are less expensive than desktop or mobile applications.
They do not need to be adapted to the requirements of different operating systems (they operate in a web browser environment).
Web application distribution is much easier than applications installed on the user's devices.
Web applications are suitable for virtually any business area, and modern technologies enable you to create high-performance, user-friendly, and relatively inexpensive solutions regardless of the scale and complexity of a problem.
Summary
Keep in mind that a website is not a web application. Practically, there are no websites anymore. In most cases, we use web applications.
By creating web applications, we can achieve our business goals with smaller budgets than in the case of desktop applications.
By dividing them into individual layers, it is possible to quickly and effectively adapt the applications to (market or technological) changes and develop them. These are the main but not only advantages of web applications.
The selection of the most appropriate technology stack depends on the complexity of individual web application layers and the complexity of their interdependencies.
The attention to the code quality, its testing, and manufacturing under the highest standards allows you to obtain a competitive digital product.
