Web Apps Are Only Getting Better, So Make The Most Of It

The web wasn’t always the massive, interactive sprawl it is today.

When it was first created, it was basically just a collection of hyperlinked documents and the beginnings of its interactivity started in the early 2000s with the hype of “Web 2.0”. From the early IRC chat boards and plain HTML pages, the Internet evolved to its current form, in which users can shop, email, work and collaborate, all through the use of web apps such as Gmail, Twitter, Google Docs, Slack and Trello.

Some of these apps allowed collaboration or traditional desktop apps to move online, while others such a Slack and Twitter’s embeds, retained the nature of a hyperlinked document.

Despite the interactivity they’ve added to the web, the golden rule of web apps is that the native version is probably better.

Currently, native apps - the apps that are specifically designed for platforms such as Windows, iOS or Android - have many advantages over web apps, because no matter how many JavaScript is piled onto an HTML document, there is no way it could ever match the quality and performance of a native app. Though building web apps is quicker, and distributing them is simpler, those advantages mean very little in the face of the advantages native apps offer.

 However, the web is a constantly evolving thing, and certain upcoming web technologies could give native apps a run for their money.

web app development

Progressive Web Apps

Essentially, a progressive web app is a website with a ‘manifest’ file which dictates the app icon, name of the app and whether it should show the browser UI or take over the full screen, which basically allows users to add the website to their home screen or start menu and launch it like a regular app. Instead of loading from a website though, PWAs are typically cached on the device to provide some form of offline functionality - from saving the CSS and Javascript to allow the website to load faster, to saving everything a user does locally, just like a traditional app.

 PWAs also support push notifications and other background work thanks to ‘service workers’ which sync local changes to remote servers and cache new content - meaning the app is as up-to-date as a web app, but as responsive as a native one.

The best example of a progressive web app right now is the Twitter Lite client which is minimal, fast and comes with a toggle to minimize data usage.

Though Microsoft’s February announcement of Windows’ support for progressive web apps made a big splash, iOS added PWA support in Safari 11.3, meaning they can be created and shipped to Chrome OS, Windows, Android and iOs.

The caveat at the moment is that Google and Apple seem to have different visions for how much a progressive web app should be capable off, and Apple’s support standards are scattered and incomplete. 

WebAssembly

As computers have become faster and JavaScript performance has been optimized, the scope of work you can do on the internet has expanded from emails and writing text documents to creating music and intense graphic design.

However, an app written in Java or Swift for Android or iOS, or written in C or C++ will be much faster and more responsive than anything written in JavaScript. The speed of an app’s underlying code defines not only how responsive an app feels, but also limits what the app is capable of. Even something as simple as a Snapchat filter utilizes massive amounts of CPU and GPU power, and JavaScript just can’t compete.

WebAssembly, a binary format for the web, is beginning to change that. Being a binary format, it isn’t translated to CPU understandable machine code “Just In Time” like JavaScript is. Pre-compiled before being shipped over the web and full compiled by the browser once downloaded, parsing WebAssembly code isn’t as much of a burden on the browser, allowing it to run at near native speeds and almost as consistently.

Designed to work intraoperatively with JavaScript, web apps can have the majority of their logic written in JavaScript with only the speed sensitive parts such as the image processing algorithms running in WebAssembly.

One of the benefits of WebAssembly is not having to learn an entirely new programming language, as high performance code written in C and C++ can be compiled to WebAssembly, with even Unreal Engine and Unity having been ported to WebAssembly.

While many web technology proposals can sometimes get stuck in standards committees for years, or only enjoy spotty support, WebAssembly is already supported and shipped by all major browsers apart from Internet Explorer, and who uses that anyway?

Houdini

Though not many people say that native apps look better than websites, it is a fact that they do look different, and even if PWAs performed just as well as native apps, they would still look and feel like a website because web apps are limited by their CSS and HTML.

One of the web technologies that has, unfortunately been stuck in standards committees for years, Houdini is a set of features that would allow developers to talk directly to a browser’s CSS rendering engine. Rather than creating a set of style rules and letting the browser handle it, Houdini would allow developers to create custom styles, animations and layouts.

To understand just how powerful this might be, look at Google’s Flutter app development framework. Flutter simulates the feel of native apps with pixel-perfect accuracy, though it’s not for websites, it’s for making Android, iOS and Fuchsia apps. Fuschia uses the Skia graphics library, the same engine that powers Chrome’s browser rendering to do that styling and animation.

When creating a website, the content is defined an HTML and the style in CSS, but rendering engines such as Skia paint the pixels - meaning you can tell the browser to create a blue circle, but it’s up to Skia to decide how.  

Houdini allows you to talk to these rendering engines, but instead of writing custom Skia code and shipping it as a native app, the CSS and Javascript can be written to talk to each browser’s rendering engine.

Houdini’s code will coexist with traditional CSS, providing another option should you need something to look a specific way.

Unfortunately, most of Houdini’s specs are still in the air and only Chrome allows you to test many of the ideas, but if web apps are ever to mimic the feel of native apps, Houdini is probably how.

To recap:

  • Progressive Web Apps offer home screen icons, push notifications and offline support

  • WebAssembly provides native or near-native performance

  • Houdini will provide the fancy style

What About Native APIs?

Native apps will always have a place, and native apps can take advantage of platform-specific advantages from Google’s Visual Core chip, Apple’s ARKit, native graphics APIs and all the other features which keep operating systems competitive.

However, for apps that value convenience and ubiquity, web apps are set to grow in both number and importance., though it’s difficult to predict which next-gen web apps are set to make the biggest impact.

While Twitter Lite is a prime example of Progressive Web Apps, lightweight WebAssembly-built games might soon be everywhere.