Why you should know about Electron.js in 2019
Tags: electronjs, webdev, html, css
Published: 2019-04-14 15:16:20

---
title: Why you should know about Electron.js in 2019
published: true
description: I won’t lie to you admitting that, with all the Javascript frameworks available out there, I don’t know most of them.
tags: Electron.js, webdevelopment, html, css
---

<!-- wp:paragraph -->
<p>I won’t lie to you admitting that, with all the Javascript frameworks available out there, <strong>I don’t know most of them. </strong>And when I say they I don’t know these frameworks I don’t mean that I’m not able to code using them, but that for some of them <strong>I don’t even know about their existence.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And that’s it, you may call me a developer not well informed, but with all the tools available out there I honestly think it’s very hard to be constantly aware of new releases. This, unless a framework becomes really important or if you just discover it randomly. Just like it happened for me with <strong>Electron.js.&nbsp;&nbsp;</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I discovered this tool almost as an error, when, during a <g class="gr_ gr_12 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="12" data-gr-id="12">chat</g> someone mentioned that <strong>Visual Studio Code was a web application.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>I was like: “WHAT?”</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>And this person was actually right. Visual Studio Code is a web application, you are even able to inspect its elements if you want. But how is that possible? How can we open what we suppose is a desktop application and then discover that it’s actually a web product?<br>And here comes <strong>Electron.js</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>The platform struggle</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This framework, like every good technology out there, arises from a necessity. In our modern, always-changing and fast-paced world of development, the ability of being able to create an application and then deploy it to many different platforms using a single codebase has become a serious problem. Relying on the old ways to do that can be extremely <strong>time-consuming </strong>and <strong>expensive</strong>, just think about how different the process to develop on Windows/OSX/Linux can be:&nbsp;<br></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>Windows</strong>: applications for this OS are usually realized using C++ or C#. Sometimes the need to be able to use these applications on different sub-ecosystems can arise other problems such as ad-hoc development for Windows Store, Windows phones etc.</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><strong>OSX</strong>: development for OSX can be quite hard since there are a ton of informations to learn. Usually, when developing for this OS you will have to interact with many “layers” such as <strong>Cocoa</strong> for the user application interface, <strong>Media </strong>for media operations and then the <strong>Core Services.&nbsp;</strong></li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><strong>Linux</strong>: Ad-hoc libraries are used for the application interface or, alternatively, Python. Other libraries like OpenGL can provide 3d and 2d rendering while the Kernel itself will provide core functionalities.&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>With all these so-different ways of developing an application, developers struggle to find a way to fast-prototype a project and to deploy a single code base to multiple platforms.&nbsp;<br>And that’s where <strong>Electron.js</strong> comes in handy!<br></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>What is Electron.js</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Electron.js</strong> is an open-source framework that allows developers to build GUI desktop applications using components originally developed for a web application. Both on the front-end side and on the back-end. A typical Electron app will be so composed:&nbsp;<br></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>An HTML &amp; CSS part&nbsp;</strong></li><li><strong>A Node.js part</strong></li><li><strong>A Chromium engine part</strong><strong>(Chromium</strong><strong> is an open-source web browser )</strong></li><li><strong>Eventually, a front-end framework like Angular, React, Vue.&nbsp;</strong></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>The Electron framework will take care of all the hard partsso that companies and developers can focus on the core of the application and make it better.<br></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Advantages of Electron.js</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let’s try to get an overview of some of the great advantages you can have by making use of this framework:&nbsp;<br></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>Reusability</strong>: since we are making use of only one code base, this can be shared across web applications and desktop applications making them extremely reusable.&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><strong>Making use of UI/UX frameworks</strong>: since we are making use of a web app code base, we get all the advantages of using front-end frameworks that will make our app look beautiful both in the browser and on the desktop, all with the application still looking the same across systems.&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><strong>Cost and time for realization</strong>: now that we can use a single code base for all our platforms, we won’t only save a lot of development time because we don’t have to port the application on different systems, but this will also save us a lot of money and expenses for doing so along the way!</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><strong>Data security</strong>: when migrating your web app to the desktop using Electron, all the data will be stored locally. This will make you sure that no data of your app get compromised.&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li><strong>Project management</strong>: still, using a unique code base is a tremendous advantage not only because the tech requirements will be the same across all the platforms, but also because it will save you a lot of time from having to fix errors on multiple code bases.&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Conclusion</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Electron was an amazing discovery for me, a tool that can make life easier for thousands of developers out there. Hope this article not only showed to you something new, but that it also encouraged to make an effort to try to discover what incredible tools are hiding out there. And just remember that, for Electron, you can even <a target="_blank" href="https://github.com/electron/electron/blob/master/CONTRIBUTING.md" rel="noreferrer noopener">contribute</a> to it!</p>
<!-- /wp:paragraph -->