What is Electron JS?

Electron JS is an open-source framework used for building cross-platform desktop applications. It was created by GitHub in 2013, originally named Atom Shell, as a way to build the Atom text editor. It allows developers to build desktop applications using web technologies such as HTML, CSS, and JavaScript, enabling them to leverage their existing web development skills.

Electron works by combining the Chromium rendering engine, which is used by the Google Chrome web browser, with Node.js, a popular JavaScript runtime environment. This combination allows developers to create desktop applications that have access to both browser and native desktop functionality, making it possible to build powerful applications that can run on Windows, macOS, and Linux.

One of the key benefits of Electron is its ease of use. Developers can create desktop applications using the same tools and frameworks they use for web development, without having to learn new languages or APIs. Additionally, Electron provides a range of APIs and tools that make it easier to work with native desktop features, such as system tray icons, notifications, and file system access.

Some of the popular applications built using Electron include Visual Studio Code, Slack, Discord, and GitHub Desktop. These applications demonstrate the power and versatility of Electron as a framework for desktop application development.

History of Electron JS

Electron JS is a popular open-source framework for building desktop applications. It was originally developed by GitHub as a way to build the Atom text editor, which was also created by GitHub. Electron was first released in 2013 under the name Atom Shell and was later renamed to Electron in 2015.

The main idea behind Electron was to provide a way to create desktop applications using web technologies such as HTML, CSS, and JavaScript. This allowed web developers to leverage their existing skills and build cross-platform desktop applications that could run on Windows, macOS, and Linux.

In addition to Atom, other popular desktop applications built using Electron include Visual Studio Code, Slack, and Discord. The popularity of these applications helped to further promote Electron and establish it as a popular framework for desktop application development.

Electron has continued to evolve since its initial release, with new features and improvements being added regularly. Some of the notable changes include better support for native desktop features, such as system tray icons and notifications, as well as improved performance and security.

Overall, Electron has played a significant role in the growth of desktop application development using web technologies. Its ease of use and cross-platform compatibility have made it a popular choice among developers, and it is likely to continue to be a popular framework for desktop application development in the future.

Getting Started with Electron JS

1. Install Node.js: Electron JS requires Node.js to be installed on your system. You can download and install it from the official Node.js website.

2. Create a new project: Once Node.js is installed, you can create a new project using the npm init command. Open a terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

    npm init
   

   This command will create a new package.json file for your project.

3. Install Electron JS: To install Electron JS, run the following command in your project directory:

    npm install --save-dev electron
   

   This command will install the latest version of Electron JS as a development dependency.

4. Create the main file: Electron JS uses a main file to start the application. Create a new JavaScript file in your project directory and name it main.js. This file will contain the main code of your application.

5. Add code to the main file: In the main.js file, add the following code:

    const { app, BrowserWindow } = require('electron');
   
    function createWindow() {
      const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      });
   
      win.loadFile('index.html');
    }
   
    app.whenReady().then(() => {
      createWindow();
   
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow();
        }
      });
    });
   
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
   

   This code creates a new window with a specified width and height and loads an HTML file named index.html.

6. Create the HTML file: Create a new HTML file in your project directory and name it index.html. This file will contain the content of your application's main window.

7. Start the application: To start the application, run the following command in your project directory:

    npm start
   

   This command will start the Electron JS application.

8. Congratulations, you have successfully created your first Electron JS application! You can now add more features to your application by adding more HTML, CSS, and JavaScript code to your index.html file and modifying your main.js file accordingly.

Follow for more

Linkedin: https://www.linkedin.com/in/prahladinala/
Github: https://github.com/prahladinala/
Instagram: https://instagram.com/prahlad.inala/
Twitter: https://twitter.com/prahladinala
Figma Community: https://www.figma.com/@prahladinala
Dribbble: https://dribbble.com/prahladinala
Behance: https://www.behance.net/prahladinala
Personal Portfolio: https://prahladinala.in
ToolMate: https://toolmate.co.in

Thank you!