Electron is a essentially a wrapper that encapsulates previously existing technologies; According to the documentation, Electron is…
…an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime, and apps can be packaged for Mac, Windows, and Linux.
Node.js has allowed front-end engineers to more easily transition to writing server-side code and includes APIs for accessing file systems, creating servers, and loading external modules.
The Chromium Content Module is the open-source version of Google Chrome’s browser featuring core technology required to render HTML, CSS, and JS such as the V8 JS Engine and Blink Rendering Engine.
A bit of history…
In 2013, Electron was birthed as ‘Atom Shell,’ the foundation for a hackable text-editor called Atom that currently offers multi-platform support. What sets Atom truly apart from its predecessors and competitors is not necessarily what it can do, but how it was built — without all the headache typically required to boost cross-platform functionality.
Electron became open-sourced in 2014 and maintains its popularity among a full range of software developers and organizations seeking a quicker product launch and production time. One argument against using this library may be its magnitude. Electron boots a pretty fat size for relatively simply apps, but considerable benefits outweigh its costs.
Normally, if you wanted to build a desktop app for 3 different operating systems, you would need to learn at least three new languages or frameworks. The beauty of building desktop apps in Electron is that you can use all the skills you already possess and know so well.
Electron enables a developer to create an entirely new breed of app than we have seen previously, offering a new class of application development in which you get some pretty awesome features out of the box: automatic updates, native menus & notifications, app crash reporting, debugging & profiling, windows installers — all making for a much more seamless production environment and development experience.
Electron helps us create Graphic User Interfaces (GUIs) for Node apps with Native OS capabilities. Essentially, everything you can do in the browser and in Node, you can do in Electron. As you may have predicted, these apps live in the user’s system tray or menu bar and have the ability to run offline.
If you’re not motivated to use Electron yet, building an Electron application allows you to do things that would not normally be possible in a browser. For example, two huge benefits of using Electron are:
- Accessing the filesystem
- Activating native OS dialogs
These actions are best handled by the main process, one of 2 essential Electron processes that run simultaneously and don’t share memory or state:
- Main Process
- Renderer Processes
Your package.json’s entry point will specify primarily how the Main Process communicates with native OS APIs and responds to lifecycle events, while the Renderer Processes cannot communicate with Native OS APIs. They use the main process as a middle man and are responsible for loading web pages to display the main GUI. They may sum to zero or larger, depending on how many you specify or how many your app needs.
The main process and our renderer process are completely separate. In order to facilitate communication between the two, there is a necessary intermediary: Electron’s interprocess communication (IPC) protocol to communicate between processes. More about IPC can be understood by taking a glance at the documentation on electron remotes.
Large in part, Electron allows for much greater flexibility and permissions, lending to less security concerns that are typical of developing in the browser. Furthermore, browsers are completely dependent on JavaScript to execute code, whereas Electron is not. The app crash reporting and debugging tools reduce any nuances that come with developing for browsers, such as fallbacks and feature detection.
If you’re interested in running through a guided-build of an Electron app, see what the FireSale is all about — taught by Steve Kinney, the Director of the Front-End Engineering program at Turing: School of Software & Design. This tutorial was made for building a Markdown-to-HTML renderer.
Feel like taking the plunge:
npm install -g electronAbove all, Kinan’s passion is activating human potential through areas of technology, health, and psychology. He strives to push human innovation to the limit and actively participate in the evolution of consciousness.
Kinan believes we can achieve this primarily in the ways we communicate intelligently, software being a back-bone to global interconnectivity and the transformation of self-destructive behavior being the bridge to greater human connection and empowerment.
You can follow his most recent software developments/projects at kswhyte.com and discover more about transformation and evolving consciousness at cosmicroots.co.
