In this lesson we are going to learn about Introduction to ElectronJS.
Introduction to ElectronJS
ElectronJS is framework that allows developers to build cross platform desktop applications using web technologies such as JavaScript, HTML and CSS. it is built on top of Chromium, the open source version of Google Chrome and Node.js, which provides runtime environment for JavaScript.
with ElectronJS developers can use the same codebase to create applications for Windows, Mac and Linux. this eliminates the need to write separate code for different platforms and it makes the development faster and more efficient.
One of the main benefits of ElectronJS is that it allows developers to leverage their existing web development skills to create desktop applications. Developers can use popular web frameworks such as React, Angular or Vue.js to build the user interface and Node.js to handle the backend logic.
The structure of an ElectronJS application is composed of two main parts: main process, which runs on the desktop and manages the application’s lifecycle, and renderer process, which runs in a web page and handles the user interface. main process and the renderer process communicate with each other through inter process communication (IPC) mechanisms.
ElectronJS also provides set of builtin modules, such as the electron and remote modules, which allow developers to access native functionality of the operating system and perform tasks such as creating windows, accessing the file system or displaying notifications.
ElectronJS is widely used by many popular applications such as Visual Studio Code, Slack and Discord. it is also good for creating desktop applications that require offline capabilities, native system integration or access to hardware devices.
What Applications are Made with Electronjs ?
Many popular applications are built using ElectronJS, some examples include:
- Visual Studio Code – code editor developed by Microsoft.
- Slack – popular team collaboration tool.
- Discord – communication platform for gamers.
- GitHub Desktop – desktop client for the GitHub version control platform.
- Spotify – music streaming service.
- Twitch Studio – live streaming software for Twitch.
- Postman – tool for testing and documenting APIs.
- Atom – code editor developed by GitHub.
- Zoom – video conferencing platform.
- Postico – tool for managing PostgreSQL databases.
These are just few examples but there are many other applications that are built using ElectronJS. It’s widely used framework and is well suited for creating cross platform desktop applications that require offline capabilities, native system integration, or access to hardware devices.
Pros and Cons of Electronjs
Pros of ElectronJS:
- Cross-platform compatibility: ElectronJS allows developers to build applications that run on Windows, Mac and Linux using single codebase.
- Leverage existing web development skills: ElectronJS allows developers to use web technologies such as JavaScript, HTML and CSS to build desktop applications.
- Access to native functionality: ElectronJS provides builtin modules that allow developers to access native functionality of the operating system, such as creating windows, displaying notifications or accessing the file system.
- Large developer community: ElectronJS has large and active developer community which means that there are many resources and tutorials available to help developers get started.
- Large number of pre built modules: ElectronJS has large number of pre built modules that can be easily integrated into an application which can save a lot of development time.
Cons of ElectronJS:
- Large application size: ElectronJS applications tend to be larger in size than native applications because they include the Chromium browser and Node.js runtime.
- High memory usage: ElectronJS applications can use more memory than native applications because they run in web browser environment.
- Slower performance: ElectronJS applications may perform slower than native applications because they run in web browser environment.
- Security concerns: ElectronJS applications are built on top of Chromium which means that they are vulnerable to the same security issues as Chrome.
- Difficulties with packaging and distribution: Packaging and distributing ElectronJS applications can be more difficult than packaging and distributing native applications because they require the Chromium browser and Node.js runtime to be included.
Basic Example of ElectronJS
This is basic example of an ElectronJS application that displays window with Hello World message make sure that you have installed ElectronJS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// main.js const {app, BrowserWindow} = require('electron') function createWindow () { // Create the browser window. let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // and load the index.html of the app. win.loadFile('index.html') } app.whenReady().then(createWindow) |
|
1 2 3 4 5 6 7 8 9 10 |
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body> </html> |
This code creates new browser window with the specified width and height and loads the index.html file into the window. the nodeIntegration property is set to true which allows application to use Node.js modules.
Then in the command line, you need to navigate to folder where your project is saved, then run the command:
|
1 |
npm start |
This will start the ElectronJS application and display the window with Hello World message.
This is very basic example, but it demonstrates the basic structure of an ElectronJS application. you can build on this example by adding more functionality and features to your application.
More on ElectronJS
This will be the result
Note: Make sure that you have installed ElectronJS
|
1 |
npm install electron |