Progressive Web Apps

PWA vs Electron: A Deep Dive

It seems that there are too many new techs in the field nowadays for us to keep track of. Just recently we’re seeing an emergence of Electron.js which is a powering platform behind a not-so-small number of popular apps that we use every day, and then there’s also Progressive Web App which is supposed to be a new way for websites to deliver top-notch, engaging customer experiences without sacrificing performance along the way.

To best help you keep track of all these newfound technologies, today in SimiCart article, we’ll be comparing between the two—Electron and PWA, in the most comprehensive way.

What is PWA?

PWA seems to be all the hots these days, as it’s a technology backed by Google themselves and has all the attention of the big guys such as Microsoft with their ambitious plan of making Microsoft Store filled with PWA. The reason why it’s so popular is that PWA itself is the best thing to come from the web in years—its track record speaks for itself.

To put it simply, Progressive Web Apps are websites that look and feel like an app. The technology is a mix of the best features from both the web and native applications, which means that users who use PWA can benefit from all the features previously exclusive to native apps such as push notifications, geo-location, and more.

Twitter PWA
Twitter in Microsoft Store is a PWA

What is Electron?

Compared to PWA, Electron is similar in many ways as it, too, utilizes technologies of the web—i.e., HTML, CSS, JavaScript—to best tackle the cross-platform challenge. However, unlike PWA, Electron-powered apps can be made into fully functional desktop applications, owing to its utilization of native APIs and Chromium’s rendering engine. In fact, it’s so functional that oftentimes it’s indistinguishable from native desktop applications, and you could have come across one without knowing that it’s Electron-based—for example, some of your essential applications are probably Electron-based, including Skype, Slack, Discord, and Visual Studio Code.

Discord Electron

Doesn’t Electron just sound straight-up better?

Well, when you put it that way… it kind of does; but no, it’s more nuanced than that. There’s a reason that we’re seeing a recent slow down in the number of Electron-based apps—that’s because Electron is showing its age, especially at a time of now when users are now more demanding of the omnichannel experience that PWA offers than ever.

When asking inputs from experienced developers of both Electron and PWA, we’ve noticed the following patterns:

  • Availability: Since Electron-based apps are pretty much a hybrid version of desktop applications and can’t be installed at all on mobile devices, PWA has the upper-hand of being available on almost any device that has a PWA-compatible browser. 
  • Performance: An Electron-based app, when done right, should feel just as fast and lightweight as a text application—but that’s not the best performance you can get. One known advantage of PWA is that you can achieve better performance (compared to Electron) on first load, and near-instantaneous load time on further loads since everything is cached on the fly, and much of the JavaScript overhead can instead be shifted onto the service workers which is an integral part of PWA.
  • Updating: As we all know, updating (and deploying in general) is a major hassle for native applications of any kind—and Electron is no exception. This can be avoided by opting for the PWA approach with which the whole updating process can happen on the server-side, thus relieving your clients of the installing updates process.
  • Size: Electron, while weighs less than the typical desktop application, is still considerably heavier than PWA. It’s hard to find an Electron app that weighs less than 50mb, while most PWA is under one megabyte.
  • Security: PWA is just better when it comes to security since it relies entirely on secure connections (HTTPS) maintained by the browser-side, while Electron, being a web application wrapped in native app container, has to do everything manually by itself.

Why PWA is only ever getting more popular

Here’s the truth, Electron is an obsolete technology. Despite it currently being used by an extensive number of desktop applications, many of those are already having plans to convert their existing Electron-based desktop apps to PWA. Yes, you can convert an Electron-based app into a PWA, although it won’t be as smooth of a process as compared to the process of converting from PWA to Electron, but it’s possible.

Electron without all its faults

Progressive Web Apps can be said to be a better, potentially more evolving technology as it solves the fundamental problems of Electron—compatibility and ease of distribution—while remaining functional and engaging to the user experience. This is due to the fact that browsers today are becoming its own universal OS with all the capabilities that you could ask for, and as a side-effect of this, technologies that rely and run on the Web such as PWA only get better with time.

See more: 
Desktop PWA - The future of Software Delivery
PWA for Magento 2

Omnichannel

When it comes to the omnichannel experience, PWA excels in every way imaginable as it’s specifically built for the responsive multi-device experience. Depending on the type of business involved, PWA can be the go-to for businesses that want the user experience to be one and the same across all devices, while with Electron JS you’d have to develop different codebases for different platforms, thus increasing the development cost.

When to choose Electron

While having its perks, PWA can’t be an all-encompassing solution for all business models, and this is where Electron finds its niche. Apps that are based on Electron typically don’t run into the usual browser constraint and are free to develop based on Node.js functionality, with which Electron can have access to all the native APIs of the operating system. This means that Electron-based apps run in user-mode all the time, effectively ensuring a safe and stable operating environment for the user.

As a rule of thumb within the Electron community, it’s never a good idea to use Electron for what can just be a website. So if you think your app falls into the small minority of cases when you need the extra freedom and functionalities of native applications—go for Electron; but in any other case, a PWA is more than sufficient.

Wrapping words

The Web with its technologies is catching up fast, and combined with movement from big brands to push adoptions of PWA forward, it shouldn’t be surprising to you to see more of PWA in the future. However, that’s not to say that Electron is on its deathbed either, since the technology is, still, quite functional and is expected to be here for quite a while; but if you’re one of those who are considering between the two, PWA is a no-brainer choice as the technology is still relatively fresh and support for it is projected to skyrocket in the near future.


Read more:
PWA vs Flutter: A Detailed Comparison

All you need to know about Progressive Web Apps

Progressive Web Applications: 12 Examples from Real Brands for Your Inspiration

Magento PWA Studio: A Detailed Comparison with Vue Storefront