Following on from our introduction to web applications and their benefits, today we want to focus on some of the key terms commonly used when discussing web apps, and provide some deeper business context.

The aim of this article is to help demystify some of the language surrounding web apps without getting too technical, but we should note before we start that definitions aren’t necessarily clear cut on this topic. Labelling can be subjective, and terms are often used interchangeably. With that said, we hope this post will help clarify some of the basics.

Desktop apps vs web apps.

A traditional desktop application is a downloadable programme that lives on your computer and runs locally. Desktop applications need to be developed specifically for each individual operating system – this is why some software works on a PC but not on a Mac, and vice versa. 

A web application, on the other hand, loads in the browser and doesn’t require you to download anything as it runs remotely from a server. As such, you usually need to be connected to the internet to be able to use a web app (though not always, as we’ll see below), but you can run it from any browser on any internet-enabled device.

Web app vs website.

So if a web app lives on the internet, why don’t we simply call it a website?

Some people do. The truth is that the dividing lines aren’t clear. Web apps behave a lot like websites – the user visits a URL in the browser and content appears that they can interact with, just like on a website.

For us, the key difference is that a website tends to display information while a web app allows the user to perform complex actions. 

Sometimes, you might see core bits of functionality within a website that are essentially mini embedded web apps. For example, the website we designed for Royal Collection Trust includes an interactive Explore the Collection feature – we built this using web app technologies.

There’s no need to “decide” upfront which type of digital product to build. Any agency worth its salt will help you figure this out based on your business goals, desired functionality, user journey and so on.

Progressive Web Apps (PWAs)

Now let’s drill into some specifics. Progressive Web App (PWA) is a fairly new term that’s quickly growing in popularity. Confusingly, a PWA is not strictly an app, but a regular website that acts like an application when you load it on a mobile device. (We did warn you the dividing lines aren’t clear!)

With a PWA, users have the option to add a shortcut icon to their homescreen, meaning they can launch the web app in the same way they would launch a native app (an app downloaded directly onto the device from the app store).

The FT is a high-profile example of this type of web app, and they published an enlightening blog post back in 2012 outlining their thoughts on the topic. They agree that the definition isn’t clear-cut, but explain “The FT app is designed to fit the screen, has a touch optimised UI, gestures, no page reloads, and you can save an icon to the homescreen. For all its lack of native code, it’s still an app.” 

The benefits of PWAs are that they work on most devices, they tend to be fast to load, and people can use them without having to install anything so they take up hardly any space compared to native apps. They can be limited though. If you need your app to be able to take advantage of system features – like the device’s camera, or push notifications – a PWA might not be the most suitable option.

Google is leading the way in championing PWAs, emphasising they they should be reliable, fast and engaging. They provide a comprehensive checklist to validate your PWA against.

Hybrid Web Apps

It’s also possible to build an app that’s somewhere between a web app and a native app. Unlike PWAs, Hybrid Web Apps are installed via the native app store rather than directly from the browser, and run locally on the device.

The key difference is that Hybrid Web Apps make use of web technologies like HTML, CSS and JavaScript, which means you don’t need to develop for each device or operating system separately.

Progressive enhancement

When you’re building a web app, as opposed to a desktop or native app, it’s with the knowledge that anyone could try to view it on any device and in any browser. Making it work perfectly and look beautiful for every single user is a huge challenge.

One way around this is to start by developing the most basic version of the app, serving the core content and functionality and ensuring it is supported on all browsers. You can launch this version right away and your agency can then gradually build and release new features which take advantage of the capabilities of newer browsers. This way the app will work for everyone from the start, and those with a more up-to-date set-up will get an even better user experience.

Single Page Applications (SPAs)

A Single Page Application (SPA) runs in the browser and – as the name suggests – has just one page. Rather than using links to navigate to new pages, which would require the site to reload each time, the content is broken down into smaller objects that update independently on the page as needed. If you use Gmail or Google Calendar, you’re already familiar with how SPAs work.

Image from google.co.uk/inbox 

Because the site doesn’t need to reload all the time, an SPA can run as quickly as a desktop application even on slow connections, and can be designed to continue functioning if the user loses their internet connection altogether.

SPAs aren’t without their disadvantages though. The page needs to use JavaScript to understand and respond to what the user is doing, so an SPA won’t work at all if the user has disabled their JavaScript.

Frameworks

Let’s finish with a super brief introduction to two of the most popular frameworks for building web apps, both of which we have experience of using at Deeson.

React.js (usually referred to as React) is currently the fastest growing framework, though it’s technically a JavaScript library for building user interfaces. Maintained by Facebook, it’s free and open-source, highly performant, relatively easy to learn, and allows developers to save time by creating reusable components.

Angular is another popular open-source option, maintained by a core team of contributors at Google. The project has a huge community of developers worldwide, making it a popular option for powering large-scale web applications, including PayPal, iStockphoto and NASDAQ. 

What other terms would you have liked to see explained in our web apps glossary? Tweet us and let us know, and we may publish a follow up post in the new year.

We design and build transformative websites and digital products. Get in touch to discuss your project.