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 awareness of differences and possibilities allows you to solve the business problems for which the applications are used more accurately.
Why a web application isn't a website?
We can answer the above question half-jokingly because there are no websites anymore. Web applications have replaced them. Although not precise, the term remains. The sites using Content Management Systems (CMS) are still called "websites," although, in the strict sense, they're web applications.
Confusion arises from the common features 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, don't 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 consumer problems, and their scope of use is growing.
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) that can be achieved through web applications. They're for business what fuel is for motor vehicles.
Web apps 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? Let's define the term. Simply put, a web application is a type of computer program installed on a web server and accessible through a web browser.
Unlike desktop and mobile applications, web applications don't have to be installed on a computer, mobile phone, or tablet.
They're available in any operating system (e.g., Linux, Windows, macOS), device (even a TV), and browser.
Although usually full access is provided, there are web applications that, for full functionality, require the following:
- 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, facilitating and accelerating its use.
In single-page applications, the presentation layer is generated entirely on the customer's side (the user's web browser). You don't need to refresh or reload the application; the content is downloaded dynamically.
A 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. The computing power of modern devices enables this.
The 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 web 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 back end 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 aren't 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 SEO-friendly can be solved by server-side rendering
- Greater difficulties with adapting the application to WCAG requirements
- Relatively more work is 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 visual appeal, operation speed, and usability are vital.
Single-page web applications 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
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.
Single-page applications include Gmail, Google Maps, Facebook, PayPal, Twitter, and Netflix.
Multi-page application (MPA)
Traditional multi-page applications are used and recommended wherever SPAs aren't suggested.
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 and affect the user experience.
Multi-page applications are characterized by the following:
- 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 mentioned, MPAs are still widely used for business purposes, and all indications are that they will continue to be for a long time. They're 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 doesn't require frequent updates, is static, and doesn't interact with the user much.
In short, they're the most useful for creating static web pages.
Examples of multi-page applications are Amazon and online stores (to a large extent).
Web application components
In the most basic division, created based on the user and owner/sender and recipient criteria, web app components include a front end (client-side) and a back end (server-side) layers.
Regarding technology, the front-end layer is usually created in HTML, CSS, and JavaScript languages, as well as 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 web application architecture can be viewed from the perspective of the layers that can be distinguished in it.
The following web app architecture layers can be 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 performing all business processes for which the application was created (e.g., order processing).
- Data access layer: Responsible primarily for storing user data in a database server.
- Infrastructure layer: All components enabling the application to function (e.g., web servers).
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 controller downloads the data from the data layer) is 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.
Front-end developers create the view (presentation) layer, giving the application a visually attractive, friendly, intuitive, and ergonomic appearance. They also design the user interface components and layout, focusing on the best user experience.
The remaining layers are created by developers specializing in back-end technologies, which aim to provide stable, secure, and effective solutions.
The essence of the layered approach to creating web applications is the autonomation of problems in each layer and the avoidance of introducing dependencies that result in changes in the entire system.
In other words, application creation must aim to build it so that a modification introduced in one layer has no significant influence on the remaining layers.
With such separation, creating, developing, testing, managing, and repairing web applications faster and more easily is possible. 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 is crucial in translating the business process and goals into web application functionalities.
For example, in a booking application, business logic will allow users 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 focused on the following:
- 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 data correctness necessary for proper and efficient web application operation and acceleration of data 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: How to create a professional web application?
The culture of any software creation is no different from personal etiquette. It is also a set of principles and best practices through which you can be better perceived in your environment.
The software environment is composed of users, developers, and customers. It also includes the infrastructure in which your application operates.
The developer etiquette should include the following features and principles:
- Attention to code cleanliness and clarity: Your development style, like good handwriting, should be clear and understandable, not just to you at the moment of code creation but also to any developer with appropriate qualifications.
- Attention to logical structure: Software creation isn't about an infinite number of code lines but about developing a simple, consistent, and logical architecture of the entire system. Remember the SRP (single responsibility principle), encapsulation, and simplified inheritance. With that, your software will be maintenance-friendly, and its development will be secure, enjoyable, and inexpensive.
- Attention to documentation and inventories: Remember that something 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's only necessary to understand one simple public method. Especially in times of serverless and microservices, you should take care of API documentation for your software. Also, remember to create a list of your system components. Even the best encyclopedia without the index or the table of contents is entirely senseless.
- Attention to testing and error monitoring: Nothing is worse than an error a user or customer reports. Good software should be well-monitored, appropriately covered by automatic tests, and have a full range of diagnostic tools. You should know about every failure, error, or anomaly before your users notify you.
These are the most important principles our team follows every day. Also, remember that Robert C. Martin's book "Clean Code" extensively and expertly covers the issue of clean code and the culture of software creation—a must-read for any developer!
Dedicated web applications for business
The business case for web application creation is apparent.
They're less expensive than desktop or mobile applications.
They don't 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 isn't a web application. There are no longer websites; in most cases, you use web applications.
By creating web applications, you can achieve your business goals with smaller budgets than in the case of desktop applications.
It's possible to quickly and effectively adapt the applications to (market or technological) changes and develop them by dividing them into individual layers. 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 their interdependencies.
The attention to the code quality, its testing, and manufacturing under the highest standards allows you to obtain a competitive digital product.
