Web apps are only getting better

0 13

- Advertisement -

Slack is a web app. Trello is a web app. Google Docs. Gmail. Even Twitter.

The web started out as a collection of hyperlinked documents. The “Web 2.0” hype in the mid-2000s was about how the web was becoming interactive. At first we were just commenting and upvoting on hyperlinked documents, but before long, people like me could do almost all of their work in what are now called “web apps.” Some of those apps added collaboration or other nice-to-haves to traditional desktop app tasks, like email or document creation. Others are more hyperlinked-document in nature — think embeds on Slack and Twitter, or Trello’s multi-user nature.

But there’s one near-golden rule about web apps: the native app is probably better.

Native apps — apps that are designed specifically for a platform like iOS, Android, or Windows — have a bunch of inherent advantages over web apps. No matter how much JavaScript you slap on top of an HTML document, it’s hard to match the performance, quality, and persistence of a native app. Web apps might be quicker to build, simpler to distribute, and easier to iterate, but that’s not enough of an advantage to unseat native apps in a vast variety of cases.

But the web platform continues to evolve, and there are a few upcoming web technologies that could give web apps a better chance at competing with their native counterparts.

Let’s talk about a few of them.

Progressive Web Apps

Microsoft made a big splash in February with its support for Progressive Web Apps on Windows. But did you know iOS quietly added support for PWAs to Safari in the 11.3 update? That means you can now make a Progressive Web App and ship it to Android, iOS, Chrome OS, and Windows.

So, what is a Progressive Web App?

Well, for starters, it’s just a website with a special “manifest” file that defines the name of the app, the icon for the home screen, and whether or not the app should show the typical browser UI or just take over the full screen. Users can add any website with a manifest file to their home screen or their Start menu and launch it like a regular mobile or desktop app.

But instead of just loading a website from the internet, a Progressive Web App is typically cached on your device so it has some sort of offline functionality. That could be anything ranging from saving the JavaScript and CSS so the website simply loads faster, on up to saving everything the user does locally like a traditional app.

Progressive Web Apps, importantly, can also support push notifications and other background work due to a new web technology called “service workers.” Service workers can help cache new content and synchronize local changes to a remote server, which keeps Progressive Web Apps as up-to-date as a typical website, while staying as responsive as a native app.

Right now the best example of a Progressive Web App is the Twitter Lite client. It’s fast, minimal, and even has a toggle so you can minimize data usage. Some online stores and publications have also taken advantage of the snappy performance of PWAs. I’ve actually been playing a minimal 2048 clone PWA on my iPhone for the last week. It works offline and remembers my high score between sessions. Sometimes it even saves the game state so I can resume a long run, but it’s not perfect.

Apple’s support for the Progressive Web App standards is scattered and far from complete. In fact, Apple seems to have a different vision than Google for how much a PWA should really be capable of. We’ll see how that vision evolves as PWAs become more ubiquitous and powerful on the platforms of Apple’s competitors.


How can web apps get more powerful? The kinds of work that you can do on a webpage has evolved significantly in the past decade. As our computers get faster, and browsers optimize JavaScript performance, we’ve gone from reading email and writing text documents to doing graphic design and making music.

But native apps have the advantage of compiled, close-to-the-metal code. If you write your app in Java for Android or Swift for iOS, you can easily outstrip nearly any JavaScript-based app in performance. If you write parts of your app using C or C++, as many game developers do, for instance, you can often go even faster.

The speed of the code underlying an app doesn’t just define how responsive an app feels, but the limits of what it can do. Video editing, motion graphics, 3D modeling, gaming, machine learning, music creation, and even Snapchat filters all utilize a huge amount of CPU and often GPU power. JavaScript just can’t compete in the high end.

That’s where WebAssembly steps in. It’s a binary format for the web. What does that mean?Well, unlike JavaScript, which is translated “Just In Time” to machine code that your CPU can understand, WebAssembly code is pre-compiled before it’s shipped over the internet, then fully compiled by your web browser when it’s downloaded. This means it’s less of a burden on the browser to parse, and that it can run at near-native speeds with consistent performance. WebAssembly is designed to interoperate with JavaScript, so a typical web app can have the majority of its logic written in JavaScript, and then the speed-sensitive parts like image processing algorithms or, say, an entire video game, can run in WebAssembly.

What’s nice about WebAssembly is that you don’t have to learn a whole new programming language to use it. High performance code that’s already written in C and C++ can be compiled to WebAssembly. For instance, both Unity and Unreal Engine have been ported to WebAssembly. That means that you can play games in your browser window without worrying about installing a special plug-in.

Unlike many web technology proposals that languish for years stuck in standards committees, or only ever enjoy spotty or inconsistent support from various browsers, WebAssembly has been fully embraced by Google, Mozilla, Apple, and Microsoft, and is now shipping in every major browser if you don’t count Internet Explorer.

Pairing WebAssembly with Progressive Web Apps turns a boring old website into a viable contender for a spot on your home screen next to “real” apps built with native technologies, without sacrificing any of the advantages of being a boring old website.


To be honest, I don’t often hear people say “Yeah, but native apps look and feel better than websites,” but it sounds like something someone would say if I went to the right kind of parties.

I mean, sure, you can download a PWA that persists offline, gives you push notifications when they’re warranted, and performs just as well as a native app thanks to WebAssembly. But won’t it still just look and feel like a website?

Yes, it will. No matter how much work you do to mimic the aesthetic and animations of iOS or Android, your hands are tied by the basic limitations of HTML and CSS.

So, speaking of web technology proposals that languish for years stuck in standards committees… let me introduce you to Houdini.

Houdini refers to a set of new features that allow developers to talk more directly to a browser’s CSS rendering engine. Instead of merely defining a set of style rules and letting the browser handle it, a designer working with Houdini could create incredibly custom layouts, styles, and animations.

To help understand why this might be a powerful thing to have, take Google’s Flutter app development framework as an example. Flutter can simulate the look and feel of a native iOS or Android app, with supposed pixel-perfect accuracy, down to the correct scroll speeds. Flutter isn’t for making a website, though, it’s for making iOS, Android, and Fuchsia apps.

But under the hood, Fuchsia does all that pixel-perfect layout, styling, and animation with the Skia graphics library, which is the same engine that powers the Chrome browser’s rendering. When you make a website, you define the content in HTML and the style in CSS, but it’s a rendering engine like Skia that paints the actual pixels. You said, “make me a red box,” but Skia is in charge of exactly how.

Houdini is designed to give you access to the browser’s rendering engine. But instead of writing custom code for Skia and shipping it as a native app with Flutter, you could write CSS and JavaScript, and talk to the rendering engine of every browser.

That’s a big responsibility, but that responsibility gives you a lot of power. Thankfully, Houdini code will coexist just fine with traditional CSS layout and styling. It’s just an extra option when you need something to look and feel a very specific way.

It’s hard to tell if the Houdini proposals will ever advance deeply enough into the browser’s internals to mimic everything Flutter does with Skia. But it’s interesting that the browser vendors want to progress in that direction.

Unfortunately, right now most of the Houdini spec is still up in the air, and Chrome is the only browser you can test many of these ideas in. But if web apps are ever going to look and feel “native,” Houdini might be the path they take to get there.

But what about native APIs?

So, to recap:

Progressive Web Apps give me an icon on my home screen, offline support, and push notifications.
WebAssembly gives me native or near-native performance.
Houdini, if it ever happens, gives me the fancy animations and drop shadows that I crave.

“But what about Feature X, my favorite new API from Android / iOS?” Well, you’re probably out of luck.

There will always be a role for native apps. A native iOS or Android app can take advantage of all the specific benefits the platform has to offer: Apple’s ARKit, Google’s Visual Core chip, native graphics APIs, and the multitude of other features that pile onto operating systems every year to keep them competitive. But for apps that value ubiquity and convenience over bleeding-edge functionality, it seems to me that web apps are only going to grow in number and importance on our home screens and desktops in the coming years.

It’s hard to predict which next-gen web apps will make the biggest impact. Right now, Twitter Lite is the golden example of Progressive Web Apps, and soon we’ll be seeing a ton of lightweight games built with WebAssembly (typically as ads), but what’s over the horizon?

One place to start looking: anything that seems useful as an app, but for whatever reason isn’t in the app stores.

Source link: https://www.theverge.com/circuitbreaker/2018/4/11/17207964/web-apps-quality-pwa-webassembly-houdini


Leave A Reply

Your email address will not be published.