Do you want to create a native desktop application that can be used across different operating systems? If you want to build a web application that can be accessed also as a native application on Windows, MacOS, and Linux, then you will need something that will be able to work on the web and natively which can be hard to find.
Introducing ElectronJS, it’s an open-sourced project maintained by OpenJS Foundation. It allows you to use JavaScript, HTML and CSS to build native apps. ElectronJS is based on Chromium, the open source project behind Google Chrome, and Node.js, the open source JavaScript runtime. This means that ElectronJS apps have access to the same powerful web technologies that are used to build modern web applications. However, because ElectronJS apps are run as native applications, they have access to the same low-level operating system APIs that traditional desktop applications do. This makes it possible to build desktop apps that have the same features and capabilities as native apps, without having to learn a new language or platform.
One of the most powerful features of ElectronJS is its ability to package web applications into standalone executables that can be run on any supported platform. It can compile javascript, HTML, and CSS into readable code for the native application without having to use different frameworks or languages. It’s one codebase to rule them all!
ElectronJS also provides a number of features that are not available in traditional web apps, such as access to the native filesystem and the ability to run multiple processes in parallel. This makes it an ideal platform for building rich, cross-platform applications.
Building native applications without Electronjs
If you were to try and build an application without Electronjs, there are many headaches that you would encounter. First, you will need to use different coding languages for native desktop applications outside of your web application. So if you build something using the web frameworks, you would need to repeat that process on the native desktop apps. For writing code on windows, you would need to do it with C# or Visual Basic, whereas if you were to build for Mac, you would need to use Objective-C. This would require a larger development team and demand lots of testing, not to mention the management of several different code bases and versions of code to run the services.
ElectronJS criticisms
You may find that there are some criticisms about using ElectronJS, which can be valid at times considering what the issues are. Because it bundles node and chromium, this can account for the application to be larger and using more resources, even if it’s a simple application. Although this is true, there are still big companies that choose to use this kind of technology for their product because of all the value that you can gain from using it. You will probably use more CPU and RAM, than if you were to use C# or Objective-C for your native app. Considering the downsides of not using Electron, these are minor setbacks compared to not using it.
Getting started with ElectronJS
So now you know both the pros and cons of using Electron, here’s how you can get started. First, there are some dependencies that you will need to account for. You’ll need a basic knowledge of HTML, CSS and JavaScript. Next, you will need to have Node.js installed on your system and it will help to have a basic knowledge of it.
When developing with ElectronJS, there are three major concepts to understand. It’s built with Chromium, which is made for displaying web pages. So the content that you see is being served from chromium, which will also allow access to all browser API’s and development tools just as you would with a chrome browser. The next is Node.js, Electon’s main processor which will provide access to the system capabilities such as filesystem, operating system, etc. Last is the custom API’s. Electron provides an API of libraries that you can use for specific tasks, for example, notifications, keyboard shortcuts, etc.
You can use boilerplates such as Electron Forge, Electron-vue, and more that will help you get started. If you are using Electron Forge, you will see that it will come with index.html, index.css, index.js, package-log.json, package.json, etc when running the following command.
npx create-electron-app my-appYou can replace the my-app with the name of your application.
The index.html is the render process that uses chromium, whereas the index.js is the entry point to the main process.
You can see if the app is working by running the following in your terminal.
npm startIf you want to see the changes that you are making to your project, you will need to restart the app, you can use the following command to restart the project.
rsMost Electron projects have one main process, which is located in the index.js file. You are importing the app and the BrowserWindow using the following:
const { app, BrowserWindow } = require("electron");What if you want to run platform-specific code, for example, specific code for MacOS? Well you can check the platform by using:
app.on ('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});Mac would be using ‘darwin’ and Windows would be using ‘win32’.
This would be a render process, in which Electron allows you to run several render processes at once. You can think of the render process as a tab or a window in the browser. More on the render process can be found here: https://www.electronjs.org/docs/latest/tutorial/quick-start
Those are some of the basics to get started, however, you can find our more information about Electron on their website here.
Conclusion
ElectronJS although is not a perfect solution, it’s the best solution that we have so far for creating native desktop applications using web languages and frameworks. You can maintain your application using a single codebase and will likely find more help on projects since there are many web developers with skills in these such web frameworks and languages.