Exploring the Web Application Landscape

A Guide for Aspiring Developers

Introduction

Web applications are dynamic websites coupled with server-side programming, offering functionalities such as user interaction, back-end database connectivity, and browser result generation. Understanding the diverse types of web applications is pivotal for aspiring developers, enabling informed technology stack choices for various projects. This post aims to provide a helicopter view of the currently relevant types of web applications.

Basic Web Applications

Basic web applications require little development effort. They primarily provide information, and have little interactivity.

Static Web Applications

• Overview: Primarily client-side rendering with fixed content.
• Technologies: HTML, CSS, JavaScript. Can often be generated from a template using Static Site Generators such as Jekyll and Hugo.
• Scenario: Building a personal blog or portfolio.

Off-the-shelf Web Applications

A web application can be built by configuring an existing ‘off the shelf’ solution, usually called a Content Management System. There are ready-made application platforms for websites, webshops, online learning environments and many more. These platforms can often be customized by installing or developing plug-ins and themes.

Content Management System (CMS)-based Web Applications

• Overview: Facilitate easy content creation, management, and delivery with little development effort.
• Technologies: WordPress, Drupal, Joomla, Moodle, Magento.
• Scenario: Establishing an educational platform with courses and resources. Creating an online shop by a small business.

Custom-made Client-Server Applications

Advanced custom-made web applications contain logic and/or process data. These applications can be single-page, or multi page. The difference being that a single page application fully runs in one page, and uses client-side logic (usually JavaScript) while a multi-page application can have multiple pages for the browser to navigate between.

Multi-Page Applications can also make use of client-side logic, essentially turning it into a collection of Single-Page Applications.

This gives us three types of web applications:

Fully server side Multi-Page Applications (Dynamic web applications)

• Overview: Server-side rendering with dynamic content, offering interactive functionalities.
• Technologies: PHP and various PHP frameworks such as Laravel, C# + ASP.NET, Ruby on Rails, Java + Spring Boot, Python + Django, Node.js and various Node.js frameworks, such as Express.js.
• Scenario: A business website with user login and personalized content.

Fully client side Single Page Applications (SPAs)

• Overview: Client-side rendering with server-side data interactions, offering a fluid user experience akin to desktop applications.
• Technologies: Frontend frameworks, such as Angular, React and Vue.js.
• Scenario: An interactive dashboard for financial data analysis.

Client and server side Multi-Page Applications (MPAs)

• Overview: Server-side rendering with multiple views and data interactions, structured with separate pages.
• Technologies: A combination of the above server-side and client-side technologies.
• Scenario: An e-commerce platform with various product pages and a checkout system that allows certain interactions, such as adding products to a shopping cart, without browser refreshes.

Specialized Web Applications

The combination of client and server can be made even more complex for specific scenario’s. These can be seen as extensions of the above.

Progressive Web Applications (PWAs)

• Overview: Enhanced with service workers for offline use and a native app-like experience. A PWA can usually be installed like an app on a mobile device, but even as a website, the app tries to replicate the app experience. It is essentially an extended version of the SPA.
• Technologies: Service Workers, Web App Manifest.
• Scenario: Constructing a news platform that’s accessible offline and sends push notifications.

Real-Time Web Applications

• Overview: For working with real-time data streaming and interactions. The HTTP communication between client and server is unsuitable for exchanging real-time data. This means applications that require data to be exchanged fast and continuously use a different type of communication technology. A real-time communication part can be integrated into any other type of application.
• Technologies: WebSocket, Socket.io, SignalR.
• Scenario: A live chat platform for instant messaging and notifications. An online game played in a browser.

Architectural Patterns

There are various overall architectures being employed in the development of web applications.

MVC-based Web Applications

• Overview: Code for web applications is often organized in Models, Views and Controllers to achieve separations of concerns for clear and maintanable code. These can be extended with Repositories, Services, Utilities and more, depending on architectural choices.
• Technologies: ASP.NET MVC, Django, Laravel, Spring Boot
• Scenario: Developing an architecture for a web application backend.

API-Driven Web Applications

• Overview: Web backends often expose data and functionality through APIs for other applications to interact with. This enables a client side frontend application, such as an SPA or a Mobile App, to communicate with a separate backend. The backend code structure often follows an ‘MVC without the Views’ pattern, where a separate frontend application takes over the interaction with the end-user.
• Technologies: REST, GraphQL.
• Scenario: Developing an integration platform that connects various software applications.

Microservices Architecture Applications

• Overview: Comprises loosely coupled, independently deployable services. These are important when applications become very complex and have to be scalable, for example to support many concurrent users.
• Technologies: Docker, Kubernetes, AWS ECS, Azure.
• Scenario: Building a large e-commerce platform with separate services for user, order, and inventory management. A video streaming service platform.

Deployment Architectures

Depending on the type of application, there are various strategies for deployment, ranging from cheap to expensive, and from easy to complex.

Static file hosting

• Overview: Many services offer the option to host static files cheaply or for free.
• Technologies: Github Pages
• Scenario: Creating a simple informative website with little to no cost.

Shared hosting

• Overview: Hosting multiple web applications on single servers in a data center by an internet service provider. A cheap but limited option that often runs on Linux Servers and provides server side programming support, through languages such as PHP, supported by a MySQL database.
• Technologies: Linux, PHP, MySQL
• Scenario: Creating a simple business website with a low monthly/yearly cost.

(Virtual) Server Hosting

• Overview: Hosting applications on single (virtual) servers in a data center. Virtual servers are cheaper than physical servers as multiple virtual servers can be hosted on the same physical hardware. The system administrator has full control over the operating system and can install any software they need.
• Technologies: Virtual Private Servers, Dedicated Servers, Colocated Servers, Managed Servers.
• Scenario: Providing all types of web applications to customers.

Serverless Applications

• Overview: Leverage third-party services for server-side logic, promoting scalability and reduced server management. Essentially hosting applications in the cloud, making server management unnecessary. Application resources (disk space, database etc.) still have to be configured and managed. This provides scaling options as the cloud provider can make additional resources available for the application. Since cloud applications are often billed for used processing time, it is also useful for applications that are used only incidentally and do not warrant having a server running 24/7.
• Technologies: AWS Lambda, Azure Functions, Google Cloud Functions.
• Scenario: Creating a real-time data processing application with automatic scaling. Hosting a rarely used incident reporting functionality that sends e-mails and SMS’s.

Containerized Web Applications

• Overview: Applications are encapsulated in containers ensuring environment consistency across deployments. These can be microservices, but also larger services. The container environment can be hosted by a cloud services provider, or managed internally, requiring extensive infrastructure and container management.
• Technologies: Docker, Kubernetes and variations (OpenShift, Ranger).
• Scenario: Deploying a microservices-based application with consistent environments. Large enterprise use cases with many applications and users.

Conclusion

The multifaceted realm of web applications offers a spectrum of solutions to diverse project needs. This post provided a helicopter view of the diverse types of web applications and the technologies that empower them. This knowledge is essential for aspiring developers to make informed decisions when developing web application. As technologies evolve, the landscape of web applications will continue to transform, offering new solutions to emerging challenges.

Glossary

• API: Application Programming Interface, a set of tools and protocols that allow different software applications to communicate with each other.
• CMS: Content Management System, a software that facilitates creating, managing, and modifying digital content.
• Microservices: An architectural style that structures an application as a collection of loosely coupled, independently deployable services.
• PWA: Progressive Web Applications, a type of web application that provides a native app-like experience on the web.