How does Electron JS work in creating desktop applications for Mac and Windows?

- Andrés Cruz

En español
How does Electron JS work in creating desktop applications for Mac and Windows?

Before I talk to you about what Electron is, I want to make things easy for you; maybe you've written some code in Atom or Visual Studio Code or sent a message to a friend using the WhatsApp desktop app. If so, then YOU HAVE USED ELECTRON: Electron is a tool in which multiple VERY used applications such as VSC are built and used by companies as important as Microsoft

So,

What is Electron?

The short version is that it is a platform for building desktop applications that run on MacOS, Windows, and Linux using web technologies. Electron combines Node.js with Chromium, the open source foundation of Google Chrome. The long answer is the central theme of my course in which we are addressing this technology.

If you are part of a small team tasked with creating desktop applications for multiple platforms. Electron is a great way to build your product without the hassle of managing two or three different codebases; that is to say

With one source code, you can eliminate related bugs on two or three platforms or implement the same feature two or three times.

If you're a Node.js developer who wants to get your command line application in front of a larger audience, Electron makes it easy to create a graphical user interface (GUI) without having to learn a whole new skill set. If you're a web developer who's used to creating your own solutions to problems, Electron makes it easy to access the parts of your computer that exist outside of the browser's sandbox.

In my experience, learning Electron has both short-term and long-term implications:

The short one has to do with what we do in native JS, HTML and CSS, communication between processes is very easy to understand initially to launch our first application and see elements that already come for free with Electron...

It's immediately gratifying to see an icon appear on your dock or taskbar when you launch it or trigger a native file dialog from the operating system using JavaScript.

But, as you get more and more comfortable with Electron, you'll find ideas for applications that you couldn't build with either the browser or Node.js alone, and you're going to need to know more about Electron to do more specialized and comprehensive development, so learning to use and understand the Electron cycle is critical and this takes time and testing...
 

Building apps with Electron is easy and fun.

Finally... What is Electron?

Electron is a runtime or execution time in Spanish, which in a few words is a small operating system that provides the functionality that programs (our app) need to run.

With Electron we can build desktop applications with HTML5, CSS and JavaScript.

Electron is an open source project started by Cheng Zhao (also known as zcbenz), a GitHub engineer. Formerly called the Atom Shell, Electron is the foundation of Atom, a GitHub cross-platform text editor built on web technologies. You may have heard of, worked with, or used Apache Cordova or Adobe PhoneGap to build web applications, wrapped in native shells, for mobile operating systems such as iOS, Android, and Windows Phone. If so, it might help to think of Electron as a similar tool for building desktop apps.

Electron lets you use the web technologies you already know to build apps you wouldn't otherwise build.

With my comprehensive Electron course, you'll learn how to build apps that connect to native operating system APIs on Windows, macOS, and Linux.

Electron combines the Chromium content module and Node.js runtimes. It allows developers to create GUIs with web pages, as well as access native operating system capabilities on Windows, macOS, and Linux through an operating system-independent API (hence why it's known as an application runtime). Chromium and Node are tremendously popular app platforms in their own right, and both have been used independently to build ambitious apps. Electron brings the two platforms together to allow you to use JavaScript to create a completely new class of application. Everything you can do in the browser, you can do with Electron.

Everything you can do with Node, you can do with Electron.

The exciting part is what you can do with the two technologies together. You can build apps that take advantage of both platforms, and build apps that wouldn't otherwise be possible on just one.

Applications with native features and something else

Electron isn't just a great choice for building web apps that behave like native desktop apps; it's also a great option for building a GUI around applications in a way that would otherwise be limited to a command line interface.

Let's say you want to create an application that allows you to view and edit a folder of images on your computer. Traditional browser applications cannot access the file system. They were unable to access the photo directory, upload any of the photos to the directory, or save any of the changes you made to the application. With Node, you could implement all of those features, but you couldn't provide a GUI, making your app difficult for the average user to use. By combining the browser environment with Node, you can use Electron to create an application where you can open and edit photos, as well as provide a user interface to do so.

Electron is not a complicated framework, it's a simple runtime. Similar to the way you can use node from the command line, you can run Electron applications using the electron command line tool. You don't need to learn many conventions to get started, and you can structure your app however you want, though I'll provide tips and best practices throughout my course.

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.