in Resources

Introduction to Electron JS: The Complete Guide for Building Cross-Platform Desktop Apps

default image

Hi there!

As a fellow developer, I‘m excited to share with you this comprehensive guide to Electron JS. Whether you are new to desktop app development or an experienced web developer looking to expand your skills, Electron opens up an entire world of possibilities!

In this guide, we‘ll explore:

  • What is Electron, exactly, and how it works its magic
  • The key benefits of using Electron for desktop apps
  • Architectural components and processes that make Electron tick
  • Step-by-step instructions for building and running your first Electron app
  • Real-world examples of big-name apps built on Electron
  • Tips and resources to level up your Electron skills

So let‘s get started!

What is Electron JS and How Does it Work?

For starters, Electron is an open-source framework developed and maintained by GitHub. It allows developers like you and me to build cross-platform desktop applications using web technologies like JavaScript, HTML and CSS.

But how does it actually work under the hood?

Electron combines the Chromium browser and Node.js together in a unique architecture. Here‘s what each piece does:

  • Chromium provides the browser window and rendering engine to display the UI. This allows your app UI to be built purely with web technologies.

  • Node.js gives your app OS-level access and the ability to handle backend logic using JavaScript. This opens up native functionality.

The end result? You can leverage your existing web dev skills to build desktop apps that feel native across Windows, macOS, and Linux!

Now let‘s quickly walk through the architecture:

Electron architecture

There are two main processes in Electron apps:

Main process: Runs in a full Node.js environment and controls the lifecycle of your app.

Renderer process: Responsible for rendering UI in a Chromium instance. Isolated for security.

These two processes talk to each other asynchronously for efficient performance.

So in a nutshell, Electron fuses together web technologies and native capabilities to allow you to build truly powerful desktop apps using JavaScript. Pretty cool, right?

Why Choose Electron JS for Desktop Apps?

At this point, you may be wondering…

Why choose Electron over traditional native development platforms like C++, Java, C# etc.?

Here are some of the key benefits that make Electron a compelling choice:

  • Cross-platform support – Develop on Windows, deploy to macOS and Linux! No need to build native apps separately.

  • Leverages web languages – Use HTML, CSS and JS to develop the UI and backend code. Leverage existing skills.

  • Node.js integration – Access powerful Node.js modules and APIs for OS-level capabilities.

  • Native OS access – Access native features like the file system, notifications, menus and more.

  • Chromium-based rendering – Leverage Chromium‘s speed and web standards support for UI.

  • Customizable and extensible – Electron has a modular architecture and supports NPAPI plugins.

  • Open source – Electron has a vibrant open source community constantly improving the framework.

According to Stack Overflow‘s 2020 developer survey, Electron ranks high among the most loved frameworks with 67.8% of developers expressing interest in continuing its use.

And reports suggest the global Electron market is poised to grow at a CAGR of 17.9% between 2020-2025.

So in summary, Electron leverages web technologies to empower developers to build truly native desktop apps with a blended web/OS architecture. This winning combo has made it a rising star among leading desktop development frameworks.

Now let‘s dive deeper into the components that make up Electron apps…

Main Architectural Components of Electron Apps

As we discussed earlier, Electron app architecture consists of a main and renderer process. These leverage various scripts, modules and APIs to deliver the app functionality:

Main process:

  • Main script – Entry point JS file (typically main.js) that controls app lifecycle events. Registers callbacks, creates windows etc.

  • Main module – Exposes app event lifecycle APIs. Methods like app.on(), app.quit() etc. Loaded automatically.

Renderer process:

  • Web page – Renders UI with Chromium engine. Can be local or remote web page. Isolated for security.

  • Preload script – JS file that executes before page load. Used to expose APIs and customize renderer.

Common modules:

  • Node.js modules – Leverage Node.js core modules like fs, os, path etc.

  • Electron modules – Custom modules like dialog, app, autoUpdater provide app-specific APIs.

  • Chromium modules – Low-level browser modules and utilities for power users.

This architecture provides tremendous flexibility to combine the power of web UIs with native OS capabilities in a single codebase.

Now let‘s look at the tools you‘ll need to start building Electron apps!

Tools Required for Electron App Development

The great news about Electron development is that you can hit the ground running with minimal requirements since it leverages web languages under the hood. Here‘s what you‘ll need:

Node.js

Since Electron apps run on Node, installing Node.js is the first requirement. Make sure you install version 12 or above. Verify the install using:

node -v

Code Editor

You‘ll want a good code editor like Visual Studio Code, Atom or WebStorm. Make sure it has support for JavaScript.

Command Line Tools

You‘ll use the command line tools like Terminal or PowerShell to initialize, develop and build Electron apps.

And that‘s about it! The simplicity of getting started with web languages is part of why Electron is so attractive.

Now let‘s walk through building your first Electron app…

Building Your First Electron App: Step-by-Step

Once you have Node.js and a code editor ready, you can follow these steps to build a simple "Hello World" app:

Step 1: Initialize a new Node.js project

Open your terminal and initialize an empty Node project:

# Create project folder 
mkdir my-electron-app && cd my-electron-app

# Initialize npm project
npm init -y

This will generate a package.json with default configs for your Electron app.

Step 2: Install Electron locally

# Install latest Electron version  
npm install --save-dev electron

This will install Electron packages in your project as a dev dependency.

Step 3: Create main script file

Create a main.js file at root. This will act as the entry point:

// main.js

const { app, BrowserWindow } = require(‘electron‘) 

function createWindow() {

  // Create browser window
  let win = new BrowserWindow({
    width: 800,
    height: 600
  })

  // Load index.html
  win.loadFile(‘index.html‘)

}

app.whenReady().then(() => {
  createWindow()  
})

Here we‘re creating an 800×600 browser window and loading index.html into it.

Step 4: Add start command

Update package.json with a start command: 

{
  "scripts": {
    "start": "electron ." 
  }
}

Step 5: Create a web page

Create a simple index.html page:

<!-- index.html -->

<!DOCTYPE html>
<html>
<body>


  We are using Node.js <span id="node-version"></span>,
  Chromium <span id="chrome-version"></span>,
  and Electron <span id="electron-version"></span>  
</body>
</html>

Step 6: Run the Electron app

That‘s it! You can now start your app:

npm start

A desktop window with "Hello World" should appear!

With just these basics, you can start building powerful desktop apps with HTML, CSS and JavaScript!

Real-World Examples of Apps Using Electron

Millions of developers around the world are building apps with Electron. Here are some examples of big-name apps powered by Electron:

  • Visual Studio Code – Microsoft‘s hugely popular cross-platform code editor.

  • WhatsApp – Desktop and web app for the WhatsApp messenger.

  • Discord – Voice, video and text chat app for communities.

  • Twitch – Desktop streaming app to watch Twitch game streams.

  • Slack – Popular desktop and web app for team collaboration.

  • Figma – UI design tool for collaborating on designs online.

  • Atom – Hackable text editor for developers.

These are just a handful of the many popular desktop apps that leverage Electron‘s capabilities.

Level Up Your Electron Skills with These Resources

To take your Electron skills to the next level, make sure to explore these helpful resources:

So don‘t be afraid to dive into the Electron community to further level up your skills!

Go Forth and Build Awesome Desktop Apps!

Hopefully this guide gave you a comprehensive introduction to building cross-platform desktop apps using JavaScript and web technologies with Electron.

Here are some key takeaways:

  • Electron uses Chromium + Node.js to create native desktop app experiences.

  • It has a main and renderer process to handle UIs and backend logic.

  • You can easily get started with web languages like HTML, CSS and JS.

  • There are tons of resources to help you advance your Electron mastery.

Now you have the power to turn your web development skills into desktop apps that feel right at home on Windows, macOS, and Linux.

So go forth, build awesome things with Electron, and let me know if you have any other questions!

AlexisKestler

Written by Alexis Kestler

A female web designer and programmer - Now is a 36-year IT professional with over 15 years of experience living in NorCal. I enjoy keeping my feet wet in the world of technology through reading, working, and researching topics that pique my interest.