In modern software development, we have a variety of tools, languages, platforms and devices as rich as it has never been before. If you are after a mobile solution it’s at least 3 operating systems to cover (iOS, Android and Windows 10 Mobile), for online experience you need to deal with a variety of browsers and screen sizes (Chrome, Firefox and IE). And last but not least — desktop apps that work on Windows, Linux and Apple computers. That is a lot!
There are many ways to solve this puzzle, but if you already have a web development team that knows JavaScript, HTML and CSS you are all set to start building native cross platform desktop apps. How? Electron is the framework to look at.
We decided to experiment a bit and make our own app. The goal was not to make another “Hello world” sample, but to do something useful that could scratch an itch. How about a small translator app?
There are many translator apps available in the market. Most of the online translators require multi step actions to get the result. In most cases you have to manually run application, then enter the text, specify source as well as target language and press translate. For patient people only :)
With our small tool, you can make it a lot simpler. Here come the benefits of desktop app:
App starts with the OS, just mark the text, copy to clipboard and press the hotkey. Translator app opens and your text is translated. Done!
It is responsive!
The beauty of Electron is not only that you can use your web dev skills to create cross platform desktop app, but also that it ‘inherits’ some of the goodies of the modern web development. It supports media queries so your desktop apps can be responsive as your website is! It’s not easy if you work with native desktop development languages.
We tested our app on Windows and Ubuntu and we are happy with the results.
Tech stack
On a high-level app was written using Electron, Angular and Bootstrap. To make our development more interesting we decided to use Electron Forge which is described as: "The command line interface for ambitious Electron applications". We are very ambitious, so we literally had no other choice :)
What's really awesome in Electron Forge is that it comes with the variety of templates:
Just run some commands and you’re ready to go! We all don’t want to waste our time, do we?
We decided to use Angular 2 template because there was no template for Angular 4. Translations are done by Yandex translate API (free one). But if you are after a paid and higher quality translations you can easily make your own provider for Microsoft Translator Text API or Google Cloud Translation API. In addition, user can translate his/her text(s) in Bing Translator or Google Translate website from our app :)
Show me the code!
We are happy to make this project opensource and share it with you. It’s all free. Enjoy!
Feel free to clone its repository and run/play with the code - click here!
You can also have a look at the presentation about Electron that we used on during tech event - just click here!
It’s cool and it’s easy to learn
It took just a week to make our app (with no prior experience with Electron). Have a look at the key benefits:
Still not convinced about Electron?
It’s not an early stage idea. It is mature and there are some serious products create with the framework. Just to mention a few:
When not to use Electron
Be careful when you are concerned with the size of the app, it’s heavy because contains Chromium inside. Might not be the fastest one to start up as well. As for compatibility, it will not work on Windows XP (if you care ;))
If above is not an issue you should definitely consider Electron for you next desktop app development.
Useful links:
