If you have used Electron before, your initial experiences may have been less than ideal. Perhaps the apps you used were slow and clunky. However, did you know that Slack and VS Code are both Electron apps? They run pretty smoothly. Perhaps it is time to give it a second (or first, or third) look!
Electron is an open source framework for developing desktop applications using web development technologies. It is basically a way for web apps that you would run on a website to run stand-alone in their own window, in their own environment.
An Electron app consists of two main parts: the main process and the various renderer processes. The code for the main process is written in Node.js. The code for each rendering processes is written in HTML, CSS, and JavaScript, just like a web page. You can actually use web development frameworks like Vue.js or React to write your rendering processes.
Electron's number one strength is its turnaround speed. No other application development framework can go from 0 to fully functioning app as quickly as Electron can. Recently we were able to turnaround an app for a client in 2 weeks, because it was built on top of an existing React library. React, being a web development framework, integrates with Electron seamlessly.
Another advantage of Electron is that it's super beginner friendly. The amount of knowledge of low-level libraries one would need to acquire to program a similar application in, say, C++ or Python, and have a nice looking user interface is daunting to say the least. With Electron, if you've ever written a web page, you can write an Electron app.
And why would you want an Electron app instead of just a webpage? Electron makes it so that the app environment is consistent. It handles the communication to the OS for you, so it is super simple to export installable packages for Windows, Mac, and Linux. It's as simple as running yarn make. It also cuts down on your support costs because you won't have to answer a thousand and one emails with "please use the latest version of Chrome".
Electron Forge is an open source tool for getting started with Electron quickly. If you already have the yarn development tool installed, all you need to type to start creating your app is:
yarn create electron-app my-new-app --template=webpack
If you’re a fan of TypeScript (an enhancement of JavaScript that adds static type checking), use this alternative:
yarn create electron-app my-new-app --template=typescript-webpack
Once the app is created, yarn start it. You’ll see a “Hello World” app and the familiar Chrome development tools. Edit the code with your favorite editor.
You might wonder why Electron needs Webpack. Webpack is the de facto way to write modern JavaScript and compile your code to a representation that works in many environments. If you want to use frameworks like React in Electron, Webpack is the quickest way forward.
The ease of development and streamlined cross-platforming do come at a cost.
Electron apps used to be so slow they would turn people off the technology. They've gotten much faster, but they're still slower and more resource intensive than other native apps. On most rigs, that won't matter, but on small laptops or netbooks, they can cause a measurable drain on memory, processor, and battery usage.
The installable package that Electron generates tends to run on the large size for simple applications. You're looking at about a 60 MB minimum with default settings. Not a lot for a big software suite, but maybe too much for a simple, single use applet. This is because, with Electron, you're kind of throwing everything plus the kitchen sink along with your app. Any Electron app comes with its own implementation of the Chromium engine, a sort of proto-web-browser. So there will be a lot of things included with your app that your app itself might not use, but trade-offs is the name of the game with modern software development.
One of the most alluring features of Electron is its beginner friendliness. If you've never developed a GUI desktop app before, but you know HTML, CSS, and JavaScript, you can go to electronforge.io right now and quickly find yourself yarn make-ing your own app. If you don't have any web development experience, start by picking up the basics of HTML, CSS, JavaScript, and Node.js.
If you have written a lot of programs that run on the command line and always wanted to have a program with a window that users could click on, Electron gives you that chance. It delivers on the same promise that Borland Delphi or Microsoft Visual Basic delivered on back in the 90s: the promise of the window, of the graphical user interface. Only this time, it runs on any OS on any machine. Go forth and get your window; Electron makes it easy.
Six Feet Up, Inc.
11208 Windermere Blvd.
Fishers, IN 46037 - USA
Phone: +1 (317) 861-5948
Email: info@sixfeetup.com
