Make Desktop Application With Javascript: ElectronJS
Electron is a Node js-based open-source application development framework. It is used to create a cross-platform desktop application by leveraging existing web technologies such as HTML, CSS, and Javascript. Previously, you may have heard of frameworks such as React Native, Nativescript, Apache Cordova, and others that allowed you to create mobile applications using web technology. Similarly, electron enables you to build cross-platform desktop applications using the same code base as your web application which you can run on different desktop platforms such as Windows, Linux, and mac OS.
As this is the era of the web so making the desktop application again, might seem like a countermove for many. Even though web applications are portable in many ways, they don’t have all the power that a native application can provide. As client computers become more capable, handling all of the basic activities on servers that might easily be handled on a client computer appears to be daunting.
Furthermore, because of the variances in browsers, it is difficult for a developer to provide a consistent and consistent experience across all of them. Moreover, as web apps are sandboxed within a browser window, they are unable to manage and utilize all necessary client system resources. As a result, the browser determines the web application’s maximum access level.
There are certain functionalities that web applications cannot provide such as file io, system-level access, and many more. Even though most of the applications we use are web-based, desktop applications are still a fundamental part of our daily computer use.
Certain functions, such as file IO, system-level access, and others, are not available in web apps. Despite the fact that the majority of the programs we use are web-based, desktop applications remain an important element of our day-to-day computer usage.
The user experience with a web application is greatly decreased if your internet connection is slow. Making a desktop application allows the developer to create the app using similar technologies to that of a web app, but with significantly more access to system-level functionality and processing power on the move.
For all major systems, Electron also provides a native-like UI and windowing technology. As a result, your program has the same look and feel as the native apps for those platforms.
Let’s look at how the electron accomplishes this.
Electron is made up of two popular technologies: chromium, an open-source derivative of Google’s Chrome web browser, and Nodejs, a version of the V8 engine that provides a runtime environment for running js programs on desktop devices without the need for a browser.
Because Node JS is entirely cross-platform, the application you create will execute in the same way across all platforms without the need to target it separately for each one.
By focusing solely on chrome, the developer can easily disregard the fragmentation that exists in the browser market. In general, we may say that chromium renders and handles the user interface of your electron application, whereas Node JS handles the backend functionality. To create a user interface for your desktop program, you’ll need a basic understanding of HTML and CSS, similar to what you’re used to.
If you want to give your app a more desktop-like appearance and feel, you can use photon, a desktop UI framework that provides desktop-like components. You’ll also need a strong understanding of JS and some basic familiarity of NodeJS and NPM.
Most of the popular frontend frameworks such as Vue, Angular and React have the bindings for Electron.
Some application’s made with Electron:
- Visual Studio Code (VS Code)
- Slack
- Tusk
- Mailspring
- Skype
- Discord
- Streamlabs OBS Studio
- WordPress Desktop
If you want to create a desktop application for your next large project, you can use ElectronJS. You might also be interested in React Native and Flutter, which offer similar functionality and an even better experience. (2022)
Originally published at https://techbytesonline.com on September 7, 2019.