Times, they are a changing, less and less applications are written for desktop only – it is a mobile/browser world out there, people. As much as I like this idea, from time to time it still makes more sense to develop something as a desktop application. Occasionally you will need to create a client application that will need to do something that is tricky to achieve in the sandbox of your browser. You may, for instance, want to:
- Utilize system notifications
- Make user files more freely accessible
- Make your UI is less complex for a browser (think CAD/Visual Studio)
- Support “fully offline” mode
By any chance it is fairly easy to create windows desktop apps with WPF / WinForms, there are UI toolkits and components available to build modern looking rich client applications. Things get tricky, though, when you want your application to work on Mac/Linux systems, too. In such a situation most of the time your instincts will make you go with the web application just to avoid difficulties of cross-platform development/deployment.
What if I tell you it is possible to write a web app (with HTML, CSS, JavaScript) that will not be hosted on the web, but instead it will live on your desktop courtesy of some clever self-hosting magic? What if I tell you new visual studio code was written that way using JavaScript and HTML? I can imagine right now some of you may see the “Not sure if serious or just…” meme in your head.
I promise this is actually 100% accurate and among visual studio code, there are other cross-platform applications created with JavaScript CSS HTML. Perhaps you recognize some of them?
All this is possible thanks to ELECTRON – an open source framework developed by the very skilled Github team. The power of electron lays in its simplicity and flexibility – a very basic application may consist of just 3 files:
- package.json
- main.js
- index.html
Once you have finished writing your code you can simply go to command prompt and type “electron your-awesome-project”. This will build and run a compiled package which is essentially a small Chromium-based web engine – now hosting your app in a single executable file.
The difference between a regular web application and an electron app is mainly availability of its low-level apis that allow for a non-sandboxed access to the machines resources (which is by-design impossible to achieve in a regular browser). Additionally, since there is only one web-engine to worry about, you don’t have to cover all the cross-browser compatibility scenarios!
The Electron package comes with out of the box support for all the chromium apis, node js modules and pretty much all the other modules you have been using with npm so far so if you need your Underscore or Socket.IO they are fully supported!
To start playing around you only need to type those 3 commands:
# Clone the Quick Start repository $ git clone https://github.com/electron/electron-quick-start # Go into the repository $ cd electron-quick-start # Install the dependencies and run $ npm install && npm start
Once you are happy with your application and would like to package it for Windows / Mac or Linux, you can install an electron packager module:
$ npm install electron-packager -g $ npm install electron-packager -d
Once the module is installed both globally and in the current dev project you can type:
electron-packager . --platform=win32
This will output Windows-ready assemblies right into your project folder. That’s it, see how simple it is to create a cross-platform desktop application with Electron? Things can get even easier with the help of dedicated UI Toolkits for Electron like this one here.
For more complex applications, you may want to consider robust frameworks like Angular 4 which is also fully supported. You can see a simple application build and packaged with Electron 1.7 and Angular 4 in this great video by Angular Firebase.
If you are worried about support and maturity of Electron, don’t. Electron first started as Atom Shell in 2013 so it has been here for a while and is now supported by a huge community of people working together on new features, extensions, installers for different operating systems and much, much more. If you’d like to contribute or simply see the direction this project is going, check the community page. For learning materials, I recommend a PluralSight course. There are also great videos on the community page. Also – since 2016 when Electron officially reached version 1.0 you can easily publish your apps to both Windows Store and Mac App Store so no need to worry about any problems with any of the largest application stores either.
I really hope you will find Electron a useful tool to add to your arsenal of skills, and as always feel free to leave any of your thoughts in comments below.