Electron.js Alternatives For Cross-Platform Development

With the rise of the wide spectrum of web and mobile platforms catering to only one has become a restrictive compromise for online business owners. As this only allows them to reach out to a limited spectrum of target users with their products and services.

This can constrain businesses in terms of their growth and accessibility. One of the best ways to solve this is to adapt cross-platform programming methods. Earlier creating cross-platform solutions used to be a challenge for developers as there was a lack of technology that enables effective cross-platform programming.

All of this changed when Electron.js came into the picture. The framework allowed developers to create a unique cross-platform desktop application without any hurdles. However, it uses up quite a bit of resource making it harder for developers to create lightweight applications. With this blog, we will look into suitable alternatives for Electron.js.

Table of Contents

• Electron.js: Introduction and Benefits
• Challenges in Electron.js
• Alternatives to Electron.js
  1. Tauri
  2. Neutralino.js
  3. Proton Native
  4. Meteor

Electron.js: Introduction and Benefits

Electron.js is a javascript-based open-source framework from Github that helps developers in creating cross-platform desktop applications. It was previously known as Atom Shell and was later changed to Electron.

The framework bundles together Node.js and chromium while exposing JS APIs empowering developers to include native features in their cross-platform projects. Electron also easily blends in with most of the JS-based frontend technologies such as React.js and typescript to assist developers in offering unique functionalities.

Here are some of the major benefits of Electron.js:

1. Unified codebase: With Electron, you can say goodbye to the tiring process of writing separate codebases for your project. Electron allows developers to operate through a single codebase that runs on multiple platforms.
2. Rapid Development: The framework allows developers to adapt to multiple different libraries for creating efficient UI's that work across multiple platforms. This makes Electron.js a flexible and scalable choice for web developers. Community Backed: Electron has been in the market for a while and has huge community support from expert developers. This makes the framework beginner friendly and versatile.

Challenges in Electron.js

Although working with Electron for creating cross-platform solutions might just sound like a perfectly reliable option it has its own roadblock. The framework is known for causing performance issues which makes it unfit for complex and scalable projects.

Here are some of the common roadblocks that developers face while using Electron.js for cross-platform development:

1. Heavy Solutions: The applications made in Electron tends to be heavyweight as it bundles both Node.js and chromium expanding the application size dramatically. Hence, if you need a robust and lightweight solution it might not be the right choice.
2. Consumes Space/Resources: Electron bundles multiple complex technologies together which usually takes a large amount of disk space along with unfair consumption of physical memory. So Electron-based applications are usually not suitable for devices with limited space. Battery Drainage: Because of heavy resource consumption Electron based applications can end up causing high battery drainage.

Alternatives to Electron.js

From the above discussion, we can clearly conclude that although Electron.js offers cross-platform development in the long run it can adversely affect the overall user experience. To ensure your solution meets up the contemporary demands of lightweight products, robust performance, and low-resource consumption adapting to suitable alternatives is essential.

Here are some of the smarter replacements for Electron.js that allows developers for creating seamless cross-platform solutions:

Tauri

Tauri is a lightweight alternative to Electron.js. It removes the complications of large-scale bundling in Electron by replacing it with lightweight alternatives. The framework uses Rust as its core language hence its basic understanding is a prerequisite for smooth development. It offers the following benefits to its developers:

• It allows developers to use JS APIs for implementing native platform features.
• You can build your own API and implement it on rust while exposing it on webview as JS API.

Let’s try to create a basic Linux-based Tauri application for further understanding:

Step 1: Install the libraries using the following command:

$ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    libssl-dev \
    appmenu-gtk3-module \
    libgtk-3-dev \
    squashfs-tools \
    curl \
    wget

Step 2: Once the libraries are installed its time for you to install the cargo package manager and rust compiler in it along with Tauri CLI.

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ npm install -g tauri

Step 3: Once all your packages are installed enter the command below to create your app which will have "Tauri app" as its name.

$ mkdir tauri-app && cd tauri-app
$ tauri create

Upon entering the command tauri create you will receive some basic questions regarding the Tauri app.

1. What is your app name?
2. What should the window title be?
3. Would you like to add a UI recipe?
4. What is the url of the dev server?
5. Where are your web assets located, relative to the <current dir>/src-tauri folder that will be created?

Step 5: To execute your code enter "tauri dev" and you will see the result below.

Neutralino.js

Neutralino.js is yet another superior alternative to Electron.js. It uses a similar thought line as Tauri to help developers create lightweight and unique digital solutions.  However, its installation is pretty easy and it uses JS as its core language which makes it more accessible to the target users.

Follow the below stepwise tutorial for an awesome head start:

Step 1: To install Neutralino all you need is a CLI. Use the following CLI on any OS  to get started.

$ npm install -g @neutralinojs/neu

Step 2: Now use the following command to create a new project. The command will download all the prebuilt JS templates along with binaries specific to Neutralino.

$ neu create neutralino-app

Step 3: To create a basic UI you can go to /index.html file and add the following command.

<h1 style="padding-top: 25vh; text-align: center;" >Welcome to  Neutralinojs!</h1>

Step 4: To further execute the command enter "neu run" and you will see the following output.

Add the following code in the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>NeutralinoJs</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="content-section">
      <h1 id="user-name"></h1>
    </div>
    <script src="js/neutralino.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Then insert the following CSS styles in the styles.css file:

html, body{
    margin: 0px;
    padding: 0px;
}

#content-section {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #CFF5E7;
}

#content-section h1 {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial;
    font-size: 48px;
    padding: 0px;
    margin: 0px;
}

Add the following code in the main.js file to get the username.

let getUsername = async () => {
  const key = NL_OS == 'Windows' ? 'USERNAME' : 'USER';
  let userName = '';
  try {
      userName = await Neutralino.os.getEnv(key);
  }
  catch(err) {
      console.error(err);
  }
  document.getElementById('user-name').innerText = `Hello ${userName}`;
}

Neutralino.init();
getUsername();

The above code produce the output as given below:

Proton Native

Proton Native allows developers to create effective cross-platform solutions using React Syntax. It uses the same syntax as React Native and allows developers to utilize all the available react-libraries for creating complex desktop solutions with ease.

Further, the framework also allows unique features such as hot-reloading to ensure rapid development progress. Lastly, it is a JS-based framework as well which makes it easier to use for developers.

# install the cli app
npx proton-native-cli init my-app

# move to your project directory
cd my-app

# run your app
npm run start

# OR to run with hot reloading
npm run dev

A simple example to create a notepad:

// index.js

import React, { Component } from 'react';
import fs from 'fs';
import { App, AppRegistry, Window, TextInput, View } from 'proton-native';

class Notepad extends Component {
  state = { text: '' };

  shouldComponentUpdate(nextProps, nextState) {
    if (typeof nextState.text === 'string') return false;
    // nextState is set from input
    else return true; // nextState is set from file
  }

  render() {
    return (
      <App>
        <Window>
          <View style={{ flex: 1 }}>
            <TextInput
              onChangeText={text => this.setState({ text })}
              value={this.state.text}
              style={{ flex: 1 }}
              multiline
            />
          </View>
        </Window>
      </App>
    );
  }
}

AppRegistry.registerComponent('notepad', <Notepad />);
                              

Meteor

Meteor is yet another JS-based framework that allows the rapid development of desktop apps for its target users. It uses a syntax similar to Node.js and allows developers to create web, mobile, and desktop applications with ease.

However, you can’t build desktop apps on Meteor and you’ll need frameworks such as Cordova to effectively execute your solution. To ensure it facilitates effortless development it provides features such as:

• Frontend and Backend development modules
• Extensive API and build tools
• Node.js packages

Final Words

Cross-platform development is a modern world demand and catering to this is essential for modern desktop-based projects in order to stay relevant. Electron.js understands these demands and has catered to them flawlessly.

However, when it comes to performance, disk space, and sustainability it fails to cater to the needs of its target audience and might end up driving confusion and increasing the overall project complexity as well.

This happens mostly due to the reason that the library bundles complex framework in the application package.

As discussed above, if you need a lightweight and interactive cross-platform solution you can choose amongst Tauri and Neutralino for creating cross-platform desktop apps. Both of them provide lightweight solutions and can handle complex business logic implementation with ease.

Monitor Your Entire Application with Atatus

Atatus is a Full Stack Observability Platform that lets you review problems as if they happened in your application. Instead of guessing why errors happen or asking users for screenshots and log dumps, Atatus lets you replay the session to quickly understand what went wrong.

We offer Application Performance Monitoring, Real User Monitoring, Server Monitoring, Logs Monitoring, Synthetic Monitoring, Uptime Monitoring and API Analytics. It works perfectly with any application, regardless of framework, and has plugins.

Atatus can be beneficial to your business, which provides a comprehensive view of your application, including how it works, where performance bottlenecks exist, which users are most impacted, and which errors break your code for your frontend, backend, and infrastructure.

If you are not yet a Atatus customer, you can sign up for a 14-day free trial .