Table of Contents
Introduction
For the purpose of creating cross-platform desktop applications with HTML, CSS, and JavaScript, GitHub created the open-source library known as Electron. By fusing Chromium and Node.js into a single runtime, Electron does this, and apps can be bundled for Mac, Windows, and Linux.
Let's begin.
Brief history of electron.js framework
The search for a tool to create a cross-platform text editor where users could interact with languages such as JavaScript, HTML, and CSS gave rise to Electron.js in January 2013.
It was established on July 15, 2013, with the goal of facilitating "Atom" development across platforms. Its original name was Atom Shell. See the graphic below for a more detailed explanation of Electron.js journey.
Key features of electron.JS
If the definition provided above has answered your question about what Electron.js is, then let's move on to its features.
You can use Electron.js to run any web application you have created. Similar to that, you can use this technology in any Node.JS application you create.
Web standards such basic HTML, CSS, and JavaScript are used by Electron JS. Except for when you wish to perform a difficult task, it does not require native abilities. It might be created for just one browser. Its file system is a part of the Node.js APIs and operates on Windows, Mac OS X, and Linux.
It makes use of the popular npm package for JavaScript. It is made up of a native menu for notifications and dialogues. The Windows installers don't require any setting up.
It also has the facility of auto-updating and crash reporting on Windows and Mac with Squirrel. The crash reports are submitted to the remote server for further analysis. The content tracing activities like debugging and profiling are looked after by Chromium.
Tools For electron.JS developers
These are the resources required for Electron.js to create an application.
- Electron - Using npm, it instals prebuilt Electron binaries for usage on the command line.
- Electron - compile - it integrates ES2015, Coffee Script, LESS, and SCSS directly into your programme without requiring pre-compilation.
- Electron - packager - distributes the files in your programme after packaging them.
- The official Dev Tools plugin is called Devtron.
- Spectron uses Chrome Driver to test Electron apps.
Launching your first electron.js application and installing "Hello World"
Open your file system and create a new folder.
Package.json, main.js, and index.html are the three sorts of files required to develop a simple application.
Making the package.json file with the command "yarn init":
This JSON file describes the app's information and dependencies and refers to the app's main file.
Change the main file's extension to main.js in the package.json file and then add the script that follows:
Set up electron:
Currently, you may begin it by:
You will see this since you haven't contributed any code yet:
It's now time to insert code into the files and produce a Hello World application.
Include the script below in the main.js file:
This file initiates the app's primary process and opens a browser window for rendering HTML. It is in charge of interacting with and integrating the operating system GUI.
For the renderer process, you can use any JavaScript library, such as Angular, React, JQuery, etc.
Make a file called index.html:
To render is the web page index.html. This is how the app renders content.
You may test your app by executing "yarn start" from the application's directory once your first main.js, index.html, and package.json files have been produced.
The app window appears when you execute your files and displays Hello World.
It is a straightforward programme, and it ends when you dismiss the window. Developing this application will help you understand Electron JS more practically.
Conclusion
We really hope that our explanation of Electron JS's definition, functionality, and basic tools has been helpful.
Overall, Electron.js handles many dynamic apps that rely on our browser as a delivery platform for their integrated features and aids in our ability to reach a bigger audience. After all, the main goal of any open-source framework is to create and supply the appropriate apps that may assist users in completing their tasks.
