Electron: If you can build a website, you can build a desktop app.
Video and Images can be loaded here: Link
Currently, in the WEB using HTML/CSS/JS we can do almost everything. There are a lot of libraries, frameworks, debug tools, test frameworks, articles, training materials. Also do not forget about StackOverflow, where the answers to questions you can find almost instantly and some of them with real examples.
Even for browser we have many extensions that follows/measures/debugs/shows us each part of the site - so you can see everything that happens with your app.
All these things helps us to create applications almost instantly. I can remember just a couple of libraries that are aimed at solving the problems with the GUI: vxWidgets, QT, Gtk.
Yes, their is enough but what about Pixel Perfect design? Responsive design? And what about the redesign? Such problems are not solved so simply.
Electron allows us to create native Desktop application using all power of HTML, JS, CSS.
Electron is a relatively new library, developed by GitHub for Atom.io, that enables developers to leverage the power of web technologies and use them to develop desktop applications. How does it work? Well, Electron basically exposes a webkit environment through Chromium, the browser engine behind Google Chrome, and let you write code to render your application.
NOTE! The purpose of this article is not to introduce Electron. In this article I will show how to create a simple application using Electron.
In this article I will try to show next:
- We will implement first desktop application that contains a single HTML page.
- Then we will build an application that consist three different windows ( Main Window, About Window, and Tray Window.
- Then I'll show you how to pack application to the archive
.DMG. After unpacking this archive the app will work as a native app from the App Store.
For the final version of the project, I used the following technologies:
Electon, Electon Builder, React, Redux, Redux DevTools, Webpack, Rails-API, and and desktop features ( Notification, Update Tray )
All the story is cut into sections - at the end of the section can see video-gif of the done work.