Our Experience Building Cross-Platform Web Apps Using Electron

Large platforms like WhatsApp, Twitch, Figma, Slack, and Microsoft teams all use Electron to provide users a desktop application that runs well on whatever operating system their device uses. We have recently started using Electron to make native apps for clients who want to add more user-friendly functionality to their business.

What are the benefits of a native app?

Building out native applications can be a little more challenging, but there are plenty of reasons to  want one:

• Accessible: Download as .exe file or off the app store
• Convenience of having it on the device: You can utilize native features such as notifications and local storage
• Runs faster: Because everything is located in one place the application will run faster as it doesn’t have to go through different APIs
• Multithreading: You can leverage the device’s CPU to run a heavier application
• User-friendly: Designed to feel more like a website while having everything locally stored

Ways Electron helps achieve the benefits

• Runs on Chromium (open source version of google chrome)
• Transpiles javascript into native language (iOS, Linux, Windows)
• Works with React, Vue, and Angular
• Robust community
• Relatively lightweight in code

Use case example:

Create a React web application → transpile into native OS app → generate .exe file to send to client → push updates

The client was interested in rebuilding a printing function for their POS that would get notified when an in-store purchase was made and print the receipt while having an administrative interface reflecting those receipts as an application on the local device. When we started the web app which reflected the purchases and the receipt printing process were two separate systems. They were connected through APIs but ultimately inefficient. With the client, we decided a better system would be to create a native app that bundled those two functions in one location.

For printing, we went with a library called electron-forge. This library utilizes electron as well as an .exe bundler in one framework. However, we’ve found electron-forge has drawbacks when being used to transpile a React project as many processes that are normally handled with create-react-app must be manually rebuilt and configured, adding (at least) hours worth of work depending on the size of your project and what other libraries you’re using.

These issues are specific to this library, but necessarily, electron. However, as Electron does not natively bundle .exe files, we’d need to find another library that likely has its own set of issues.

Alternatives for the future

In the future, we would probably look at using Tauri as an alternative to Electron. The main distinguisher that makes us interested in it is its compatibility with React. It is also more lightweight (therefore faster), takes up less size in Mb on clients’ computers (easier download), and has all of the parts of our flow taken care of out of the box. In our limited experience with Tauri, it was notably faster development time to generate a native app from a React app, even with having to adjust to the language it uses, Rust. It does have a smaller community than Electron and adds another layer of compatibility testing, but its framework compatibility feels like it would add enough convenience to offset those drawbacks.

If you are interested in building out a native application, feel free to reach out to our team to find the best solution to doing so! Our experienced team would be happy to help.