Electron is an Open Source and free tool for building cross-platform desktop apps with JS, HTML and CSS, built by GitHub
It’s very popular and hugely successful applications use it, including VS Code, Slack, Discord and many, many more.
The 10 Most Popular Electron Apps of 2020. Slack is one of our favorite desktop apps, this is also what we use to have seamless communication in the workplace. Especially that work from home is on-demand these days due to the COVID-19 crisis. To give an overview, Slack is a cross-platform productivity app revolving around chat. Slack developer Felix Rieseberg has created an app written entirely in JavaScript that replicates the 1991 Mactinosh Quadra experience and runs Mac OS 8.1. The app has been packaged using Electron, so it works on all major platforms including Windows, macOS, and Linux. What are Electron Apps? Known as Atom Shell in its earlier avatar, Electron is a powerful open source framework that allows developers to create native cross-platform applications with web technologies like JavaScript, HTML and CSS using Node.js runtime as the back-end component and Chromium for the front-end.
Electron is a huge project that revolutionized native desktop app development, by making it viable to be a JavaScript-based process.
Mind you: it was possible to write JavaScript-based desktop applications even before Electron, with other tools, but Electron made it much more mainstream.
And in particular Electron allowed to create cross-platform desktop apps. Before, there was no tool that could let you run the same app everywhere.
Until 2014, when Electron was released.
A quick look into the Electron internals
Electron is basically bundling the Chromium rendering library and Node.js (Chromium the open source project made by Google, on which they build the Chrome browser).
You have both access to a canvas powered by Chromium, which runs the V8 JavaScript engine, and use any Node.js package, and run your own Node.js code.
It’s a sort of Node.js for the desktop, if you wish. It does not provide any kind of GUI elements, but rather lets you create UIs using HTML, CSS and JavaScript.
Electron aims to be fast, small in size, and as slim as possible, yet providing the core features that all apps can rely upon.
Which kind of apps you can create using Electron
You can create lots of different kind of apps, including:
A good collection of Electron apps is available on the official site: https://electronjs.org/apps. With Electron you can create apps and publish them on the Windows and Mac App Store.
The Electron APIs app
You can download the Electron API Demos app, which is an official sample desktop app built using Electron.
The app is pretty cool and it lets you experiment with several features of Electron. It’s open source, and the code is available at https://github.com/electron/electron-quick-start.
How to create your first Electron app
First, create a new folder on your filesystem and into it run:
to create a
package.json file:
Add this line in the
scripts section:
Now install Electron:
Electron can now be started with
https://renewga835.weebly.com/blog/apps-to-open-zip-files-mac. However if you do you will see an error telling you there’s no
index.js file, which is what we wrote in the package.json file to be the main starting point of our app:
An Hello World Electron GUI app!
Let’s create an application that shows an Hello World in a window.
Create 2 files,
main.js :
and
index.html : Grids mac app crack.
Now run again
yarn start , and this window should show up:
This is a very simple one-window app, and when you close this window, the application exits.
Making app developer’s life easier
Electron aims to make the developer’s life easier. Applications have lots of problems in common. They need to perform things that the native APIs sometimes make a little bit more complicated that one might imagine.
Electron provides an easy way to manage In-App Purchases, Notifications, Drag and Drop, managing key shortcuts and much more.
It also provides a hosted service for app updates, to make updating your apps much simpler than if you had to build such as service yourself.
It's 2019 and browser developers are excited about a new generation of websites: PWAs (short for Progressive Web App) are web applications supposed to bridge the gap between native applications and websites. You might be wondering: How does Electron fit into this story? Should I build an Electron app or a PWA?
What are Progressive Web Apps?
PWAs are built using a collection of technologies helping web applications present themselves as more natural citizens on user's devices. The term PWA doesn't describe a particular platform or technology but rather a set of attributes that PWAs typically have:
At the core, these apps remain web applications. The client-side code is written in JavaScript or WebAssembly and they inherit their capabilities from the browser that's driving them. On the desktop, they are run by either Chrome, Edge, or Firefox. Take note of this point, as it'll come up again.
For more information about what PWAs actually are or how you build one, check out Google's PWA portal, Microsoft's portal, Alex Russel's first introduction of the term, or Aaron Gustafson's summary in A List Apart. To see some apps in action, check out Twitter Lite, the Financial Times App, or the often-mentioned Starbucks PWA.
What is Electron?
Electron is a platform for building cross-platform desktop applications with HTML, JavaScript, and native code. It does so by combining Chromium's rendering engine libchromiumcontent, Node.js, and a thick layer of native APIs for common native operations.
The more popular examples for Electron apps are Visual Studio Code, Slack (the one I work on), Twitch, Skype, or the installer for Visual Studio.
In a nutshell, developers can use Electron to build applications that contain Chrome's rendering engine while having access to all of Node.js - including every module available on npm.
Which one should I choose?
The big difference between Electron apps and PWAs is that the former is a full-blown native desktop application. It lives in user-space, together with apps like Notepad, iTunes, or Microsoft Office. Thanks to Node.js Native Addons, it can run C++ and Objective-C. There is no native API offered by the operating system that your Electron app cannot make use of. If Apple releases a new gimmick tomorrow (say, an upgraded Touch Bar or a fancier version of Handoff), your app can immediately make use of said technology. An Electron app lives in user mode and is the master of its own destiny.
In contrast, PWAs exist within the confines of the browser that power them. On Chrome OS or macOS, that's Chrome, on Windows, that's likely the Windows Store and Edge. If your app wants to make use of an API offered by the operating system, the browser vendor must first make those features available to PWAs. Some support is available (Edge exposes some WinRT APIs, for instance), but generally speaking, PWAs do not interact directly with WinAPI, AppKit, or any other technologies used by native desktop developers.
Let's look at a little chart displaying the capabilities available to a piece of software: The outer-most circle represents the operating system, which directly controls hardware and memory. The inner-most circle represents static websites, which don't run any code. PWAs are a bit more powerful than web apps. Electron apps are desktop software. Web apps can be a part of PWAs. PWAs can be a part of Electron apps. Electron apps usually contain a large amount of JavaScript and HTML, but nothing keeps Electron developers from writing native user interfaces and interactions.
With Great Power Comes A Cost
Before you walk away with a 'Got it, Electron apps are more powerful than PWAs', hold up for a second: There's a real cost associated with that power. I've written a few Electron apps (windows95, Slack, Electron Fiddle) and can tell you about the things that excite me about PWAs:
With Great Power Comes Power, Too
That said, there are a few things that really hold me back:
Summary: For real, which one should I choose?
If you're building a web application, you should probably build a progressive web app. There are few reasons not do it - I've found Service Workers surprisingly easy to work with and a bit of offline capabilities will delight users.
Eventually, you might find that you bump against the edges of the browser's sandbox. There may just be some capabilites that justify the cost of maintaining a desktop application for you. Those demands can be straightforward - in Visual Studio Code's case, think of file system access, the terminal, or native debugging. In some scenarios, asking the user to first install a certain browser could be a difficult obstacle. In other cases, simply not being constrained by any browser is a worthy goal.
Electron Mac App
Browser Product Mangers sometimes ask me what kind of APIs PWAs need before Electron becomes unnecessary. The correct answer isn't a list of APIs, but a wildcard. Electron allows me to not make that decision. With an Electron app, there are no user-land scenarios my product managers can come up with that I won't be able to build.
Slack Electron App
In other words: If you're building an app with web technologies, make it a progressive web app. Once you've outgrown the constraints given to you, make your PWA run within Electron. Until you have needs that aren't met by progressive web apps, don't incur the cost of maintaining your own desktop software.
Electron Mac App Store
Photo by Ant Rozetsky on Unsplash
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |