This is part of the Web Application Development — An Introductory Course series.
We can classify web applications into 4 types:
• Client-side application
• Server-side application
• Single Page application
• Progressive web app
Let’s explore each type in detail.
Client-side Application
Some web applications operate only on the client side i.e. the browser.
The earliest client-side web applications are probably Applets which were small applications capable of executing within browsers. Applets became popular since Java 1.0’s introduction in 1995 but gradually lost browser support amid competition from other technologies and security concerns.
Java Chess Applet example - https://en.wikipedia.org/wiki/Java_applet#/media/File:ChessApplet.png
Between 2000 and the first half of the 2010s, Flash was a popular option to develop web applications which comprises mostly games and multimedia applications. Flash retreated in the second half of the 2010s due to security concerns and the advancement of web technologies.
Flash game example from Game Informer - Source: https://www.gameinformer.com/b/features/archive/2010/11/28/gem-polishers.aspx
Nowadays, Javascript, HTML5, and CSS3 dominate the landscape of web application technologies. Single-player games and simple utilities (e.g. calculators, converters) probably dominate this type of client-side web application.
Modern JavaScript Pong game example - Source: https://www.ponggame.org/
Server-side Application
This type of web application runs mostly on the server. Server-side applications still have user interface components aka web pages that render in browsers. These pages often contain Javascript and CSS as well. But these features are usually reserved for display and simple input validations. The bulk of input processing, data storage and retrieval, and process execution happens on the server side. Each time a user requests new data, triggers an execution, or submits inputs, the browser reloads the entire web page. The server receives and processes the request, generates the HTML output, and sends it back to the browser. The whole page, input, HTML, CSS, and images travel across the internet for every request.
In the beginning, server-side applications were developed by hardcore programmers writing C, C++, or Perl before it became a bit easier with the advent of .php, .asp, .jsp and /servlet/ server page technologies.
Perl CGI form example - Source: https://linuxconfig.org/perl-cgi-form-submit-example
Nowadays, most server-side applications do not advertise their dot-extension technology anymore. URL mapping techniques allow server programs to receive browser requests at .html or no extension addresses.
Popular server-side application frameworks
Single Page Application
Single Page Application (SPA) is the newest fashion. It combines the best of client-side rendering and interaction and server-side security and processing.
A SPA appears as a single web page to end users. Most, if not all, interactions with the app happen within the page regardless of whether they are form submission, file upload, data retrieval, screen refresh, or even page navigation.
Facebook as an example of Single Page Application
Powering SPA are modern application frameworks on both client and server sides. On the frontend, Angular, ReactJS, and Vue account for most UI codes. And most backend frameworks for server-side application supports API development just as well.
Progressive Web App
Another type of web application called Progressive Web App (or PWA) brings the web even closer to the native device experience. PWA runs on user’s device’s browser but looks and feels just like any native app (most commonly mobile apps on mobile devices).
PWA packs powerful features such as offline capability and push notification, allowing users to install and open just like any other app.
Progressive Web App examples from Microsoft Edge documentation - Source: https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/demo-pwas?source=recommendations
Conclusion
We have examined the 4 common types of web applications, each with a brief description of their distinct features and underlying technologies.
In the next lesson, we will survey various technologies that make up a web application.
Previous: Web Application Development — #1: What makes a Web Application?
Next: Web Application Development — #3: Technologies Behind a Web Application
For Content and Index, visit Web Application Development — An Introductory course
comments powered by Disqus