What is a Web Application and what is a website?
Have you ever wondered what web applications are? Or what role do its individual elements and layers play? Or, in what technologies are web applications most often created? What types of web applications are the most popular?
Here are the questions worth knowing the answers to. From a business point of view, they are of key importance, because awareness of differences and possibilities allows for more precise solutions to business problems for which they are used.
- Why is a Web Application, not a website?
- Features of web applications
- Web application – definition
- Single Page Application (SPA)
- Multi-Page Application (MPA)
- What does the Web Application consist of?
- How to create a professional Web Application?
- Dedicated Web Applications for Business
- Conclusion
Why is a Web Application, not a website?
The above question can be answered half jokingly and half seriously. Because websites simply don’t exist anymore. They were replaced by web applications. Although imprecise, the name remained. Websites using CMS systems (Content Management Systems) such as WordPress are still called websites, although, in the strict sense, they are web applications.
The misunderstanding comes from a common feature that websites and web applications share. Some of the latter, just like websites in the past, have only informational functions. They offer a one-sided message, reduced to information.
Some web applications, like all websites, do not allow their users to interact. You can read, see, or hear something on them, but we can’t do anything else.
Modern web applications are based on extensive interactions, multiple functionalities and broadly understood usability.
Features of web applications
For those who do not believe in their effectiveness, probably yes.
Web applications make our lives easier and solve our consumers’ problems. And the scope of their use is becoming more and more wide.
They help us:
- order (e.g. food)
- buy (e.g. books, flowers)
- book (e.g. airline tickets, book hotel rooms, book appointments)
- plan the performance of specific services (e.g. gardening services)
- learn (e.g. languages, courses)
- find people willing (e.g. advertisements)
- exchange (e.g. currencies)
- invest (e.g. on the stock exchange)
- participate (e.g. in competitions, meetings)
- play (e.g. individually and in teams)
- establish relationships (e.g. social, business)
The above list is far from complete and will grow even more over time. What immediately draws attention is the number of verbs that define activities (and, implicitly, their effects) that can be achieved using Web Applications. Web applications for business today are what make fuel for motor vehicles.
They are a tool:
- sales (e.g. online stores)
- image/awareness
- educational
- allowing you to establish business relationships
- enabling the digitisation of business needs
Web applications are built on the basis of several languages, technologies and solutions. The technology used to build web applications includes PHP, React, Node.js, Python, Django, and many, many others.
Web application – definition
What is a web application? For the sake of order, let’s give a definition. Simply put, a web application is a type of computer software that is installed on a web server and accessed 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 on every operating system (e.g. Windows, MacOS, Linux), on every device (including TVs) and in every browser.
Most often, access to them is full, although there are also Web Applications whose full functionality requires:
- authentication (providing login and password)
- paid temporary access (paywall)
There are several types and division criteria for Web Applications. Not all of them are important from a purely business point of view, so in this article, I will only talk about the most popular ones. Most often used for business purposes.
Single Page Application (SPA)
As their name suggests, the interaction between the user and the application takes place within one page. All content (information, functionalities) is located in one space, which makes it much easier and faster to use.
In Single Page Applications, the presentation layer is completely generated on the client side (user’s web browser). There is no need to refresh or reload the application – the content is downloaded dynamically.
The application (Web Application) downloads, replaces and displays only the data that is the result of the user’s actions (authentication and data synchronisation).
Single Page Applications owe their speed to executing the interface control logic not on the server, but in the browser. It is possible mainly thanks to the computing power of modern devices.
The application sends and downloads only the necessary data to the server using the API. Thanks to asynchronicity (sending many queries simultaneously in the background), such applications are very fast and highly interactive. Single Page Applications are also characterised by lower server resource consumption.
Examples of Single Page Applications: Facebook, Twitter, Netflix, Google Apps (Gmail, Maps) PayPal.
Advantages of Single-Page Applications
The popularity of SPAs is due to their numerous benefits and minor disadvantages.
Their most important advantages include:
- the application code (HTML, CSS, JavaScript) is usually downloaded only once and larger parts of the application are downloaded in the background, which significantly reduces the load on the infrastructure serving static files
- lower load on the application server (some operations are performed on the client side, not on the server)
- independence from the backend (frontend application communicating with the backend via API)
- speed and smoothness of interaction between the user and the application
- more effective scalability
- loading speed
- fast and responsive user interface
- very good ‘First impression’
- more efficient caching
Disadvantages of Single-Page Applications
SPAs, although very effective, also have their drawbacks. Although they are not very bothersome, you should be aware of their existence.
The most important ones include:
- large size of result files
- not SEO friendly – the problem of moderate friendliness of SPA applications can be solved using Server Side Rendering
- greater difficulties in adapting the application to WCAG requirements (Web Content Accessibility Guidelines – W3C)
- the relatively greater amount of work needed to create/develop the application
- require additional security
- higher consumption of computing power of the user’s device
- greater difficulties in adapting the application to older browsers and non-standard devices
Recommended Uses of Single-Page Applications
From a business point of view, SPA applications are recommended for activities where interaction, visual attractiveness, speed of operation and usability are extremely important.
They are most often used in industries where the priority is:
- providing real-time view and interaction (e.g. maps)
- having complex interfaces with a large number of interactions (e.g. social media)
- ensuring views are updated in real-time (e.g. data visualisation)
- ensuring convenient editing of only selected data (e.g. CRM)
- providing better aesthetic experiences and greater interactivity
When not to use Single Page Applications
You should definitely avoid using this type of application when the content presented:
- are only static, rarely updated (HTML)
- we want to reach users who use older versions of browsers and equipment with worse technical parameters
- we must provide solutions especially tailored to the needs of disabled users (WCAG)
- we build an SEO-friendly Web Application
Multi-Page Application (MPA)
In fact, it can be said that traditional Multi-Page Applications are used, or rather recommended, wherever the use of SPA applications is discouraged.
MPA is a traditional (older) type of Web Application. Multi-page applications tend to reload the entire page every time a user interacts with them, which can slow down their speed and impact the User Experience.
Multi-Page Applications feature:
- page rendering (HTML code generation) takes place on the server side
- search engine friendliness (SEO Friendly)
- higher level of security and data integrity
- relative ease of creation, especially using frameworks such as Django
Examples of Multi-Page Applications: Amazon and almost all online stores.
Disadvantages of Multi-Page Applications
MPA applications, although still very popular, have drawbacks that affect their usefulness and business effectiveness.
Here are the most important ones:
- when the page is reloaded, the same data is downloaded again, which results in excessive load on the server
- MPA navigation is slower than SPA
- The layers – frontend and backend – are usually more interconnected than is the case with SPAs
Recommended Uses of Multi-Page Applications
As I have already mentioned, MPA applications are still very eagerly used for business purposes and everything indicates that they will be there for a long time. In particular, they are recommended to companies:
- with an extensive product or service offer (e.g. online stores)
- providing large amounts of educational and informational content
In particular, if the presented content does not require frequent updating, it is static and does not have much interaction with the user.
What does the Web Application consist of?
In the most basic division, created according to the criteria of user and owner, sender and recipient, the Web Application consists of Frontend (Client-Side) and Backend (Server-Side) parts.
In the technological sense, the Front-end layer is most often created in HTML, CSS and JavaScript and the Next.js, React/Redux, Vue and Angular frameworks. The Back-end layer is most often created using languages (e.g. PHP, Python, Java) and frameworks (e.g. Django, Symfony, Node.js).
The structure and architecture of a web application can also be looked at from the perspective of the layers that can be distinguished in it.
The most classic division is that of a layer:
- Presentation – its main element is the GUI (Graphical User Interface), i.e. the Graphical User Interface that allows users to interact with the web application
- Business Logic – intermediating between the Presentation layer and the Data Layer, responsible for the implementation of all business processes for which the application was created (e.g. order fulfilment)
- Data – responsible primarily for storing user data
- Infrastructure – all elements that allow the application to work.
Design Patterns – Model View Controller
Model View Controller is a pattern in which each of the above-mentioned layers performs a separate function, operates on the basis of its own logic and supports a separate set of functionalities.
Within this model, the Web Application consists of:
- View – i.e. the layer, logic of data presentation that is downloaded by the Controller from the Data Layer, responsible for what the Web Application looks like
- Data Model – a layer representing the problem, description of relationships between data, rules of data consistency and integrity
- Controller – a layer of logic intermediating between the View layer and the Data Model layer, responsible for how the Web Application works, what interactions occur between models, as well as for transferring data to the presentation layer (View).
The View and Presentation Layer is created by front-end developers who give the application an aesthetic, friendly, intuitive and ergonomic look. They design an interface and a layout focused on creating the best possible user experience (User Experience).
In turn, the remaining layers are created by developers specialising in backend technologies, whose goal is to provide stable, safe and effective solutions.
The essence of the layered approach to creating Web Applications is the autonomy of problems occurring in each layer and avoiding the introduction of dependencies that result in changes in the entire system.
In other words, when creating an application, it must be designed in such a way that a change introduced in one layer does not have a significant impact on the others.
Thanks to such separation, it is possible to create, develop, test, manage and repair the Web Application faster and easier. It also allows you to define roles, dependencies, responsibilities, methods of communication, and access within the entire system, i.e. relationships between entire layers and between elements of individual layers.
Nowadays, we can find other variations of this pattern, such as MVP (Model-View-Presenter) and MVVM (Model-View-ViewModel).
Business Layer
Thanks to such separation, it is possible to create, develop, test, manage and repair the Web Application faster and easier. It also allows you to define roles, dependencies, responsibilities, methods of communication, and access within the entire system, i.e. relationships between entire layers and between elements of individual layers.
From the business owner’s point of view, the Business Logic layer plays a key role because it translates processes and business goals into functionalities available in the Web Application.
For example, for a booking application used to make reservations, the Business Logic will be the ability to review available offers, make a selection and, as a result, book a specific facility for a specific date.
The Business Logic Layer of a web application is primarily intended to:
- implementing Business Rules, i.e. their translation into code (e.g. specific instructions, calculations)
- validating and buffering data, i.e. checking their correctness, which is necessary for the correct, effective operation of the Web Application and accelerating their service
- workflow management
- stock management
- access management
- allow users to be identified
In other words, correctly defined Business Logic is responsible for the effectiveness, efficiency and user-friendliness with which the Web Application allows you to achieve business goals and provide value to its users.
How to create a professional Web Application?
The culture of creating any software is no different from personal culture – it is also a set of rules, principles and good practices thanks to which we are better perceived by our surroundings.
In the case of software, our environment is, on the one hand, users, developers and customers. On the other hand, the software environment also includes the infrastructure in which our application runs.
Developer savoir-vivre includes the following features and principles:
- Attention to the cleanliness and transparency of the code – our programming style, like good handwriting, should be legible and understandable. Not only for us when we create this code, but it should also be understandable to any properly qualified programmer.
- Attention to logical structure – software development is not about producing an infinite number of lines of code, but about developing a simple, coherent and logical architecture of the entire system. We should always remember the principles of SRP (Single Responsibility Principle), simplified inheritance and encapsulation, thanks to which our software will be easy to maintain and its development will be safe, pleasant and cheap.
- Taking care of documentation and inventory – remember that what seems obvious to us does not have to be obvious to an outsider. Good code documents itself, but let’s respect other people’s time and don’t force them to read the entire code if it’s just about understanding how to use one simple public method. Especially in the era of Serverless and Microservices, we should take care of the API documentation of our software. Let’s also remember to create a list of the components of our system – even the best encyclopaedia without an index or table of contents is completely meaningless.
- Attention to testing and error monitoring – there is nothing worse than an error reported by a user or customer. Good software should be well monitored, have adequate coverage with automatic tests and have a full spectrum of diagnostic tools. We should know about any failure, error or anomaly before our users report it.
Dedicated Web Applications for Business
The business case for creating Web Applications is quite obvious.
They are cheaper than desktop or mobile applications.
They do not have to be adapted to the requirements of various operating systems (they work within the web browser environment).
Distributing applications is much easier than in the case of applications installed on users’ devices.
Web applications will prove useful in virtually every area of business, and modern technologies allow you to create efficient, easy-to-use and relatively cheap solutions, regardless of the size and complexity of the problem.
Conclusion
So let’s remember, a website is not a web application. Websites don’t really exist anymore. In most cases, we use a web application.
By creating a Web Application, we can achieve our business goals with smaller budgets than in the case of desktop applications.
Thanks to the division of their individual layers, it is possible to quickly and effectively adapt them to changes (market, technological) and develop them. These are the main advantages of the application, but not the only ones.
The choice of the most appropriate technology depends on the level of complexity of the individual layers of the Web Application and the level of complexity of their mutual dependencies.
In turn, attention to the quality of the code, its testing and production in accordance with the highest standards allows us to obtain a digital product that effectively competes on the market.
