Originally published March 26, 2019 , updated on May 31, 2023

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. Users can now 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. But 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 you pile 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. Certain upcoming web technologies could give native apps a run for their money.

Progressive Web Apps

Essentially, a progressive web app is a website with a ‘manifest’ file. It dictates the app icon, the name, and whether it should show the browser UI or take over the full screen. It 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 and saving everything a user does locally, just like a traditional app.

PWAs also support push notifications and other background work thanks to ‘service workers’. They sync local changes to remote servers and cache new content. It means 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. It 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. It means you can create and ship them 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 of. Apple’s support standards are scattered and incomplete.

WebAssembly

Computers have become faster and JavaScript performance has been optimized. So the scope of work you can do on the internet has expanded. It has changed 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 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. JavaScript just can’t compete.

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

Web Apps and JavaScript

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

One of the benefits of WebAssembly is not having to learn an entirely new programming language. You can compile high-performance code written in C and C++ to WebAssembly. Even Unreal Engine and Unity having been ported to WebAssembly.

Many web technology proposals can sometimes get stuck in standards committees for years, or only enjoy spotty support. But all major browsers already support and ship WebAssembly. The only exception is 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. Even if PWAs performed just as well as native apps, they would still look and feel like a website. That’s because the CSS and HTML limit the web apps.

Houdini is one of the web technologies that has, unfortunately, been stuck in standards committees for years. It 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, you define the content in HTML and the style in CSS. But rendering engines such as Skia paint the pixels. It means that you can tell the browser to create a blue circle, but it’s up to Skia to decide how.

Understanding Houdini

Houdini allows you to talk to these rendering engines. But instead of writing custom Skia code and shipping it as a native app, you can write the CSS and Javascript 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 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 Among Web Apps?

Native apps will always have a place. They can take advantage of platform-specific advantages from various sources. For example, 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 will grow in both number and importance. Though it’s difficult to predict which next-gen web apps will make the biggest impact.

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

Post Views: 286