Web(& Electron) Apps Need To Improve Their User Experience

Written by me551ah | Published 2020/03/08
Tech Story Tags: webapps | electron-apps | user-experience | flutter | skia | progressive-web-apps | webgl-and-wasm-output | xamarin-react-native

TLDR Web apps are anything but simple these days and since they have to work under the limitations of all the slow components, the CPU ends up making up for it. Even basic apps with all of their trackers, external javascript scripts and doms take up 100s of MBs in memory. Native apps use the GPU a lot more efficiently, they can recycle items and do a much better job at hardware acceleration via the GPU. The web has the advantage of easy accessibility, but we have sacrificed too much in terms of user experience.via the TL;DR App

I’ve been using computers for over 2 decades now. My first PC was a 66 Mhz 486 machine with a 2.4 kbps modem and the web did not even have Google ( We had Altavista ). Since the internet was slow, I spent most of my time with Applications that could be installed on my local machine. Now I spend most of my time on web applications and somehow it feels like we have moved backward rather than moving forward.

Memory Usage

A few years ago while trying to figure out why I was running out of RAM, I stumbled upon chrome’s task manager. Gmail was using up 700MB of RAM and all I had open was the Inbox. No fancy search box or Compose, the Inbox was taking up 700MB of RAM to display lines of text in a Tabular format.
I’ve been a heavy user of Email clients and if you pick any of the native clients (Thunderbird, Outlook, Apple Mail) and open a bunch of searches and compose windows the memory usage will still stay below 100MB.
I used mIRC a few decades ago to connect to multiple chat servers, run my own bots, serve files over DCC and run scripts all while staying under 20MB of Ram.
These days to send a text message over Slack I need over 1GB of RAM. Even basic apps with all of their trackers, external javascript scripts and doms take up 100s of MBs in memory. And the most common solution to running out of memory is to close chrome windows.

Battery/CPU Usage

DOM is slow. Updating layout and repainting is even slow. Javascript being a dynamic language is slow. Web apps are anything but simple these days and since they have to work under the limitations of all the slow components, the CPU ends up making up for it.
Chrome is almost always present in my Macbook’s ‘Using significant energy’ tab.
On the other hand, I rarely if ever see native apps in the battery bar unless I’m doing something which should actually consume a lot of CPU cycles like running multiple synths in Ableton or Compiling.
When apps are built for mobile, battery usage is a major area to optimize on. But nobody even gives it a thought for web apps

60 FPS

Mobile apps run on 60fps, Native desktop apps run at 60fps, Games run ( or at least are designed to) run at 60fps. Instagram on chrome starts at 2–3 fps and usually hovers around 30fps.
My laptop which is supposed to be more powerful than my mobile phone is only able to churn out half the frame rate even though they are both running at the same resolution!
Web apps are not buttery smooth and can be jerky at times. Sure somebody can work really hard and optimize a website to run at 60fps at all times, but it needs a lot of effort. Mobile apps run at 60fps out of the box without much effort.
Mobile and native apps use the GPU a lot more efficiently. Since they have a lot more information about which controls are being used, they can recycle items a lot better and do a much better job at hardware acceleration via the GPU. Not to mention that you have access to raw graphics APIs in case you want to push UI performance even further.

Development Environment

You can build desktop apps in a plethora of languages and even for mobile apps you have many cross-platform frameworks. But building for the web(and electron) forces you to HTML/Javascript(and derivates). Javascript is a dynamic prototypical language that was not designed for the scale of apps that are being built in it today.
It has no type safety, memory leaks are common and it’s slow due to its dynamic nature. While there have been many efforts to improve performance like V8s JIT, it still lags behind a lot of major languages. WASM seems promising, but it’s still has a long way to go.
And it’s laughable how weak the browser platform itself is. SQLite is available on raspberry pi, embeddable systems, mobile platforms and just about every other platform on the planet.
You can store data, run complex relational queries and do more with so less. But it is not available on the most widely used platform on the planet, the browser.
With the rise of electron apps, big and bulky web apps have started making their way onto the Desktop. There are some who are even trying to get the same apps on mobile via PWAs.
While the web has the advantage of easy accessibility, IMO we have sacrificed too much in terms of user experience for that one convenience. If you built an app with the same UI and functionality in a native language and as a web app, the native app will run circles around it.
Flutter ,Xamarin and React Native seem to be promising alternatives. A lot of developers are already using them for cross platform mobile applications and these frameworks already have support for basic desktop rendering.
If they could make their desktop ports as good as their mobile ports, we might finally have one framework to rule them all. This should be a good alternative to Electron.
There's nothing for the web right now. But flutter is working on some experimental stuff with WebGL and wasm output. Skia is a nifty little engine and given that WebGL and wasm are meant for performance, I find this to be quite promising.

Published by HackerNoon on 2020/03/08