Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Types of Web Applications: From a Static Web Page to a Progressive Web App

DZone's Guide to

Types of Web Applications: From a Static Web Page to a Progressive Web App

In this article, we go over the various types of web applications that exist to help you decide what architecture is best suited for your next project.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

The standards and requirements for online experience have been evolving along with the web app development technologies. The changes of visual presentation are now the most explicit, but they only became possible thanks to the transformation of web architecture.

Keeping up with all the abbreviations of various types of web applications can be quite tough. After all, the advancement of web apps wasn’t a simple process either: new types and approaches didn’t necessarily introduce a great difference from the already existing ones, but rather steadily caused improvements over time.

Still, the name of the game is usually narrowing the choice down to that one web app type that will suit individual business needs. Hopefully, our classification below will help you do just that. If you’re not sure about possible use cases for the app types described, feel free to refer to this article that delves into the functionality of enterprise web apps, web portals, and other kinds of web apps.

Static Web Apps

In terms of technical implementation, all web apps are, first of all, either static or dynamic. Yet, while ‘dynamic’ is a large group of subtypes, ‘static’ can be considered an architecture type on its own.

The term ‘static’ comes from these web apps’ lack of flexibility. Static web apps have their pages generated by a server and offer little to none (with no JavaScript code used) interactivity. Usually, no room for personalization exists and any possible change takes effect only after a full page reload.

Static web pages are often difficult to maintain and the excessive amount of data they send and receive creates risks of poor performance. Needless to say, they aren’t well-suited for a mobile environment. Still, a static web app can be a hands-on choice when very concise information is shared and interaction isn’t necessary.

Dynamic Web Apps

Any dynamic web app is based on a framework – web app software that controls web page construction and facilitates maintenance. The way such web apps are displayed on a user’s screen is not predetermined but rather dynamically shaped by app logic that is implemented on the server side or the client side of the app.

Dynamic web apps are different in how they work, and their use cases determine their development approach and the architecture.

Multi-Page Apps (MPA)

In multi-page web apps, the logic is almost fully on the backend. This means that for any change to take effect, all the requests from the client-side go to the server and back. Aside from the use of a framework, this principle was almost identical to that of static web apps in the past.

Now, however, MPAs take advantage of AJAX technology that enables instant changes without a full page reload. If designed as responsive, such web apps can even adapt to mobile environment. Also, MPAs are highly secure, due to the logic being inaccessible to a user, and are therefore widely used for web portals and enterprise web apps.

Rich Internet Apps (RIA)

Initially, RIAs tried to overcome browser limitations and heavily relied on client-side plugins, such as Flash, Shockwave, and Silverlight. Installed and regularly maintained by the users, these plugins were supposed to interpret either some highly interactive parts of a web app page or, at times, the web app’s very core.

The problem was in the plugins’ vulnerability as well as some inconveniences they created: if a plugin was just a little outdated, some parts of a web app, or sometimes the whole app, had no chance to function properly. Eventually, many plugins were abandoned after the introduction of HTML5 (which, when combined with JavaScript, is often compared to Flash in terms of functionality), so RIAs haven’t retained their initial form and have mostly morphed into other types of web applications by now.

JavaScript-Powered Web Apps

With the appearance of such front-end JavaScript frameworks as Angular, React, Meteor, and Ember, the logic of web apps has started its shift to the client-side, allowing for even better flexibility than occasionally embedded AJAX. Client-side logic has begun to take over the server-side’s responsibility of processing user requests and rendering the responses.

Web apps created with JavaScript frameworks show good performance, offer different levels of user interaction, and are mobile and search engine optimized. Such web apps are widely used in various industries and serve as e-shops, client portals, and business web apps.

Single Page Apps (SPA)

Thanks to the logic’s client-side implementation, SPAs managed to fulfill the promise of their name: they indeed let users freely interact with a web app from a single page. What’s more, the interaction is much swifter, as requests and responses communicate in small amounts of data and occur almost instantly.

In general, any web app can improve significantly after becoming an SPA. Yet, because of universal URLs, single page apps aren’t very compatible with SEO regulations, so using this type for e-commerce can be counterproductive. Social networks, online video/audio players, and e-mail services, however, often benefit from such web apps and their agility.

Progressive Web Apps (PWA)

Some say that a PWA is, first off, a well-developed SPA, and although this isn’t necessarily so in theory, the point holds true in practice. The catch is that progressive web apps aren’t about new principles in architecture, but rather features that improve performance and mobile adaptability of any web app. Cashing, home screen installation, and better data transfer over HTTP/2 are the key enhancements.

Unlike an SPA, an MPA or a static web app simply won’t be able to make the best out of all these features; as they are, MPAs and static web applications fall behind an SPA in terms of performance. Moreover, one of the PWA ideals is improving mobile web experience and making it available for users with slow or bad Internet connection. Even an MPA with a responsive design is, in fact, too difficult to optimize enough to be ‘progressive.’

Endnote

With the exception of rich Internet applications, it would be wrong to say that any type of a web application is no longer relevant. No matter what the possibilities of any web app type are, they can be extremely suitable for a particular solution. That’s why the choice of a web application type should always be the result of a case-by-case approach only.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
web app ,web application ,web app developemnt ,web applications

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}