If you're interested in web development, you've probably heard of Electron.
To deepen your knowledge, we have prepared this blog post. Here you will find answers to:
Electron is a popular framework developed by GitHub in 2013. It allows us to create fully-fledged desktop applications using web technologies.
Electron is based on the Chromium and Node.js projects, combined into a single environment. Such a feature allows web technologies to be applied in desktop program development.
The killer app of Electron is its support for technologies that are already very well developed, supported, and familiar to developers. So you can build a complete desktop app using Node.js + React/Vue/etc. and having only a slight idea of how Electron works.
Even though the idea of using web technologies to build complete desktop applications might sound impressive, there are some essential considerations before deciding to use Electron as a framework for your app.
Essentially, you are a trading developer- & company-facing advantages for user-facing disadvantages. Notice that all the pros positively affect developers, development time, and company, and all the cons negatively affect the resulting application.
Remember that these points may or may not be essential for your project. Therefore, always evaluate them in the context of what is Electron.js used for and the requirements for your project. Also, remember that the level of severity of these points is highly dependent on what is being made and the requirements - the cons may be utterly insignificant in your project.
How does Electron work? You can think of an Electron app as a bundle of four things:
(Node.js + Electron + Chromium) + (Your app code)
What is Electron programming? When creating an Electron app, you are writing code for both the frontend & backend part of the app. The frontend side will probably use a UI library (ex. React), and the backend side - just Node.js. These two "sides" do not share context and run on different threads. Communication between the frontend and the backend sides should be done through IPC messaging. Thankfully, it's bidirectional.
This is very similar to how a web app works: a browser makes a call to a remote server, requesting the app's files (JS, CSS, HTML, assets), which it then interprets and executes. The only difference is that with Electron, no web server is needed to send you those files; they are prepackaged with the app. User opens up your Electron application -> Node.js, and the chromium renderer interprets and executes the code you wrote.
You can probably already find that that's completely awesome and horrible at the same time. Such an approach to building desktop apps is excellent because you are probably already familiar with the tools and frameworks needed, but also bad because such a strategy provides much overhead in terms of performance and bundle size. I.e., you are packing a whole web browser with your app code. And that is done by every Electron app on the system - each has its own "Chromium+Electron+Node.js" stack built in.
Because an Electron app is basically just a Node.js+Chromium stack, you can use (almost) everything built for those two technologies*. We’re talking about React, Angular, Vue, Material UI, Redux, Bootstrap, or almost any other UI library or toolkit under the sun. This is also true for the backend part - fs, process, node packages, it's all here.
(* "Almost" is not accidental, study the "Native Node Modules" section of the docs for more info on possible problems with packages you may encounter)
Are you still having some questions about what an Electron application is? Then, we’ve decided to recommend to you some resources that will be definitely handy in your work and gaining more expertise:
We hope that you have managed to dive into Electron fundamentals! Although Electron applications have some drawbacks, the framework allows web developers to deploy them on 3 major PC platforms, which means saving time and money.
If you need more information or you want to develop your application using Electron, you can always contact us.