Пишем настольное js-приложение с electron

Quantum Number

How would you send a letter to an electron? As strange as that question seems, electrons have «addresses,» just as people do.

Think of an oxygen atom, for example. Every oxygen atom has eight electrons. But those eight electrons are all different from each other. The differences among the eight electrons are represented by quantum numbers. A quantum number is a number that describes some physical property of an object (in this case, of an electron).

We know that any electron can be completely described by stating four of its properties. Those properties are represented by four different quantum numbers represented by the letters n, ℓ, m_ℓ, and s. Quantum number n, for example, represents the distance of an electron from the nucleus. Any electron for which n = 1 is in the first orbit around the nucleus of the atom. Quantum number ℓ represents the shape of the electron’s orbit, that is, how flattened out its orbit is. Quantum number m_ℓ represents the magnetic properties of the electron. And quantum number s represents the spin of the electron, whether it’s spinning in a clockwise or counter-clockwise direction.

So if you decide to send a letter to electron X, whose quantum numbers are 3, 2, 0, + ½, you know it will go to an electron in the third orbit, with a flattened orbital path, certain magnetic properties, and a clockwise spin.

Electron 11.0.0-beta.3 2020-08-31T19:29:34Z ()

Note: This is a beta release. Please file new issues for any bugs you find in it.

This release is published to npm under the beta tag and can be installed via , or .

Fixed Electron not working on Windows 7 after https://github.com/electron/electron/pull/25076. #25168 (Also in , , , )
Fixed an issue where filters set in dialogs on macOS would have nondeterministic ordering. #25193 (Also in , , )
Fixed network permission error when there are multiple WebContents sharing same session are created with web security disabled. #25180 (Also in , , , )
Fixed shell.moveItemToTrash on Windows so that it returns false when move was unsuccessful. #25171 (Also in , , )

Creating your First Electron Application

In this section, we’ll see how we can create a simple Electron example.

First, create a folder for your project and add a file using:

This will scaffold a file with default values:

You can also omit the from the command to be able to specify these information in the prompt.

Next, we need to create two files:

The file which contains an HTML page for buidling the UI
The file which contains code that bootstraps the Electron application and create the main GUI.

Now we need to change the main property of the file to :

Next, we need to install from npm using the following command:

This command will install locally. Read the official guide for more options for installing .

Next, we need to use a script to run the file with Electron. In the file and add:

Now, let’s run a GUI window from the main process. Open the file and start by importing the module:

Next, we need to create an instance of the and load the file. Add the function with the following content:

We set the window’s width to 800 and the height to *600.

Next, we need to listen for the event and we call the method when the app is ready:

We can also add code to handle situatios such as when closing all Windows:

Now to create our UI, we simply use HTML and CSS. Add this simple markup to the file:

Finally, you can use the following command to start the application:

Electron 10.0.0-beta.24 2020-08-20T19:37:34Z ()

Note: This is a beta release. Please file new issues for any bugs you find in it.

This release is published to npm under the beta tag and can be installed via , or .

Fixed a crash that could occur when using in-memory sessions. #25001
Fixed an issue where the Save button did not function in PDF previews. #24995
Fixed crash when using client certificate. #25019
Fixed frameless window’s size being changed when restored from minimized state. #25044
Fixed performance regression with CSS counters. #25023
fix an issue where voiceover doesn’t read the first item selected from a ARIA combobox. #25003

Resolve network issues that prevented RTC calls from being connected due to network IP address changes and ICE. (Chromium issue 1113227). #24998
Updated Chromium to 85.0.4183.78. #25016

API

Window to register the behavior on.

URL to download.

saveAs

Type:
Default:

Show a dialog instead of downloading immediately.

Note: Only use this option when strictly necessary. Downloading directly without a prompt is a much better user experience.

Name of the saved file.

This option only makes sense for .

errorTitle

Type:
Default:

Title of the error dialog. Can be customized for localization.

Note: Error dialog will not be shown in . Please handle error manually.

errorMessage

Type:
Default:

Message of the error dialog. is replaced with the name of the actual file. Can be customized for localization.

Note: Error dialog will not be shown in . Please handle error manually.

onProgress

Optional callback that receives an object containing information about the progress of the current download item.

{
	percent: 0.1,
	transferredBytes: 100,
	totalBytes: 1000
}

Type:
Default:

Reveal the downloaded file in the system file manager, and if possible, select the file.

What’s Electron?

Electron is a tool, developed by GitHub for its Atom Editor. But it was later extracted from Atom into an independent platform to allow developers to build cross-platform desktop applications that target Windows, Linux and MAC with web technologies i.e JavaScript, HTML and CSS and related tools and frameworks.

Electron uses Chromium, the open source browser created by Google and used as a base for many popular browsers. That means, Electron is simply a web container with a rich API that integrates your «web» application with the native features of the underlying system.

What mekes Electron more powerful than just a web container is the support of the Node.js runtime so you can also make use of the powerful Node.js APIs and ecosystem for building desktop apps just like you build server-side applications.

In recap, Electron provides multiple environments and runtimes such as Node.js, the modern HTML5 APIs and a rich and cross-platform API for accessing native features of the underlying operating system. So you can build powerful desktop applications with no restrictions.

Electron Applications Architecture

In Electron, you have two types of processes; the Main and Renderer processes.

The main process is the one that runs the script in the file. This script can create and display GUI windows, also many Electron APIs are only available from the main process. An Electron application has always only one main process.

Electron makes use of the chromium browser to display web pages. Each web page runs on its own process called the renderer process.

You could also think of Electron as a web browser but unlike typical browsers (such as Chrome, Firefox and Edge etc.) web pages don’t run inside isolated or sandboxed environments since they have access to Node.js APIs and by result can communicate with the low level APIs of the underlying operating system.

Note that Electron is not a JavaScript binding for GUI libraries but a browser/Node.js runtime that uses web pages as its GUI.

Electron Main vs. Renderer Processes

The main process uses the to create native GUI Windows. A window runs a web page in its own renderer process.

Renderer processes are not able to call native GUI APIs so they need to communicate with the main process, via different mechanisms, which will handle the native operations and return any results to the requesting renderer process.

Communication Between Renderer and Main Processes

Electron provides different ways to allow communication between main and renderer processes, such as:

Sending messages using and modules;
RPC communication using the remote module.

Sharing Data Between Renderer Processes

Each renderer process is isolated and only manages its own web page but in many situations, you need to share data between web pages (i.e renderer processes). There are multiple ways to achieve that, such as:

using the HTML5 APIs like Storage API, , , and IndexedDB;
using the main process as global storage area via the IPC (Inter-Process Communication) system in Electron.

For example; in the main script, add the following code:

We simply, add variables and objects to the namespace.

Then, in scripts running in the web pages, add:

We import the module and we use the method of the property to access and modify global objects.

Using Node.js in Electron

Electron provides complete access to Node.js in main and renderer processes. That means, you have access to a full and rich ecosystem of APIs and also the modules available from npm which is the biggest repository of open-source modules in the world.

Compiling Native Node.js Modules for Electron

Keep in mind that native Node.js modules, such as SQLite3, require re-compilation to target the Electron ABI. You need to use the package for rebuilding native APIs to target the Electron API

You can follow this tutorial for more information on how to compile native Node.js module for Electron.

Accessing Electron APIs

Electron provides a rich and cross-platform ecosystem of APIs. APIs can be accessed from only the remote process or only the renderer processes or both.

To access APIs, you need to import/require the module:

For example, the API, which is only available from the main process, can be imported using the following syntax:

If you want to access it from a renderer process, you can simply run:

Electrons in theory

As applied to electrons the word «particle» is somewhat misleading. This is because electrons can also behave like a wave; that is they exhibit wave-particle duality. The wave behavior of electrons can be demonstrated in the interference patterns produced in a double-slit experiment, and is employed in the electron microscope. The wave nature of electrons is essential to the quantum mechanics of the electromagnetic interaction, where electrons are represented by wave functions. From the square of the wavefunction the electron density can be determined. Also, the exact momentum and position of an electron cannot be simultaneously determined. This is a limitation described by the Heisenberg uncertainty principle, which, in this instance, simply states that the more accurately we know a particle’s position, the less accurately we can know its momentum and vice versa.

In relativistic quantum mechanics, the electron is described by the Dirac Equation. Quantum electrodynamics (QED) models an electron as a charged particle surrounded a sea of interacting virtual particles, modifying the sea of virtual particles which makes up a vacuum. Treating the electron as a dimensionless point, however, gives calculations that produce infinite terms. In order to remove these infinities a practical (although mathematically dubious) method called renormalization was developed whereby infinite terms can be cancelled to produce finite predictions about the electron. The correction of just over 0.1 percent to the predicted value of the electron’s gyromagnetic ratio from exactly 2 (as predicted by Dirac’s single particle model), and it’s extraordinarily precise agreement with the experimentally determined value is viewed as one of the pinnacles of modern physics. There are now indications that string theory and its descendants may provide a model of the electron and other fundamental particles where the infinities in calculations do not appear, because the electron is no longer seen as a dimensionless point. At present, string theory is very much a ‘work in progress’ and lacks predictions analogous to those made by QED that can be experimentally verified.

In the Standard Model of particle physics there are three generations of matter particles. In this model the muon and the tauon correspond to the electron in the other two generations. Also in the model each fundamental particle has an antiparticle counterpart. The antiparticle of the electron is the positron (see below). Electrons are also a key element in electromagnetism, an approximate theory that is adequate for macroscopic systems, and for classical modeling of microscopic systems.

Words to Know

Electric current: A flow of electrons.

Energy level: A region of the atom in which there is a high probability of finding electrons.

Nucleus (atomic): The central core of an atom, consisting of protons and (usually) neutrons.

Positron: The antiparticle of the electron. It has the same mass and spin as the electron, but its charge, though equal in magnitude, is opposite in sign to that of the electron.

But it is known that the orbit concept is not appropriate for electrons. The uncertainty principle, a fundamental law of physics (the science of matter and energy), says that the pathway traveled by very small particles like an electron can never be defined perfectly. Instead, scientists now talk about the probability of finding an electron in an atom. In some regions of the atom, that probability is very high (although never 100 percent), and in other regions it is very low (but never 0 percent). The regions in space where the probability of finding an electron is high corresponds roughly to the orbits about which scientists talked earlier. Those regions are now called energy levels.

The positron

One of the interesting detective stories in science involves the discovery of an electron-type particle called the positron. During the 1920s, English physicist Paul Dirac (1902–1984) was using the new tools of quantum mechanics to analyze the nature of matter. Some of the equations he solved had negative answers. Those answers troubled him since he was not sure what a negative answer—the opposite of some property—could mean. One way he went about explaining these answers was to hypothesize the existence of a twin of the electron. The twin would have every property of the electron itself, Dirac said, except for one: it would carry a single unit of positive electricity rather than a single unit of negative electricity.

Dirac’s prediction was confirmed only two years after he announced his hypothesis. American physicist Carl David Anderson (1905–1991) found positively charged electrons in a cosmic ray shower that he was studying. Anderson called these particles positrons, for posi tive electrons. Today, scientists understand that positrons are only one form of antimatter, particles similar to fundamental particles such as the proton, neutron, and electron, but with one property opposite to that of the fundamental particle.

Usage

Register it for all windows

This is probably what you want for your app.

const {app, BrowserWindow} = require('electron');
const electronDl = require('electron-dl');

electronDl();

let win;
(async () => {
	await app.whenReady();
	win = new BrowserWindow();
})();

Use it manually

This can be useful if you need download functionality in a reusable module.

const {BrowserWindow, ipcMain} = require('electron');
const {download} = require('electron-dl');

ipcMain.on('download-button', async (event, {url}) => {
 	const win = BrowserWindow.getFocusedWindow();
 	console.log(await download(win, url));
});

Credits

New World Encyclopedia writers and editors rewrote and completed the Wikipedia article
in accordance with New World Encyclopedia standards. This article abides by terms of the Creative Commons CC-by-sa 3.0 License (CC-by-sa), which may be used and disseminated with proper attribution. Credit is due under the terms of this license that can reference both the New World Encyclopedia contributors and the selfless volunteer contributors of the Wikimedia Foundation. To cite this article click here for a list of acceptable citing formats.The history of earlier contributions by wikipedians is accessible to researchers here:

Electron history

The history of this article since it was imported to New World Encyclopedia:

History of «Electron»

Note: Some restrictions may apply to use of individual images which are separately licensed.

Background

Electron is a JavaScript platform whose primary purpose is to lower the barrier to entry for developers to build robust desktop apps without worrying about platform-specific implementations. However, at its core, Electron itself still needs platform-specific functionality to be written in a given system language.

In reality, Electron handles the native code for you so that you can focus on a single JavaScript API.

How does that work, though? How do Electron’s features written in C++ or Objective-C get to JavaScript so they’re available to an end-user?

To trace this pathway, let’s start with the module.

By opening the file inside our directory, you’ll find the following line of code towards the top:

This line points directly to Electron’s mechanism for binding its C++/Objective-C modules to JavaScript for use by developers. This function is created by the header and implementation file for the class.

History

The electron has a special place in the history of understanding matter. It was the first subatomic particle to be discovered and was important in the development of quantum mechanics. As a unit of charge in electrochemistry it was posited by G. Johnstone Stoney in 1874. In 1894, he also invented the word itself.

The discovery that the electron was a subatomic particle was made in 1897 by J.J. Thomson at the Cavendish Laboratory at Cambridge University, while he was studying «cathode rays.» Influenced by the work of James Clerk Maxwell, and the discovery of the X-ray, he deduced that cathode rays existed and were negatively charged «particles,» which he called «corpuscles.» He published his discovery in 1897. Thomson’s work only allowed him to determine charge to mass ratio of the electron. It was Millikan’s oil-drop experiment of 1909 that measured the charge on the electron and thus allowed calculation of its mass.

The first quantum mechanical theories were explanations of the electronic stucture of atoms. In 1913 Neils Bohr proposed the first quantum mechanical explanation of electrons in atoms. In his model, electrons existed in quantized orbits around the atomic nucleus. Soon after this in 1916, Gilbert Newton Lewis and Irving Langmuir explained the chemical bonding of elements by electronic interactions. In 1925 Bohr’s model of the atom was superseded by the wave description of electrons involving Schrodinger’s wave equation, where electrons exist in orbitals. This model is still in use today. The electronic structure of atoms is the source of structure and periodicity found in the periodic table of elements.

Characteristics

The electron is one of a class of subatomic particles called leptons which are believed to be fundamental particles. As an elementary particle it is not considered to have any substructure (at least, experiments have not found any so far) and there is good reason to believe that there is not any. Hence, it is usually described as point-like, i.e. with no spatial extension. However, if one gets very near an electron, one notices that its properties (charge and mass) seem to change. This is an effect common to all elementary particles: the particle influences the vacuum fluctuations in its vicinity, so that the properties one observes from far away are the sum of the bare properties and the vacuum effects.

The antimatter counterpart of the electron is its antiparticle, the positron.

Charged particles, monatomic ions and larger particles, arise from an imbalance in the total number of electrons and protons in the particle. When there is an excess of electrons, the object is said to be negatively charged. When there are fewer electrons than protons, the object is said to be positively charged. When the number of electrons and the number of protons are equal, the object is said to be electrically neutral. A macroscopic body can acquire charge through rubbing, i.e. the phenomena of triboelectricity.

Electrons have a negative electric charge of −1.6 × 10−19 coulombs (this is usually just stated as a charge of −1) and a mass of about 9.11 × 10−31 kilograms (0.51 MeV/c2), which is approximately 1⁄₁₈₃₆ of the mass of the proton. These are commonly represented as e−. The electron has spin ½, which implies it is a fermion, i.e., it follows the Fermi-Dirac statistics. While most electrons are found in atoms, others move independently in matter, or together as an electron beam in a vacuum. In some superconductors, electrons move in Cooper pairs, in which their motion is coupled to nearby matter via lattice vibrations called phonons. When electrons move, free of the nuclei of atoms, and there is a net flow of charge, this flow is called electricity, or an electric current. There is also a physical constant called the classical electron radius, with a value of 2.8179 × 10−15 meters. Note that this is the radius that one could infer from its charge if the physics were only described by the classical theory of electrodynamics and there were no quantum mechanics (hence, it is an outdated concept that nevertheless sometimes still proves useful in calculations).

History

As has been the case with many developments in science, the discovery of the electron and the recognition
of its important role in the structure of matter evolved over a period of almost 100 years. As early as 1838, English physicist Michael Faraday found that when a charge of several thousand volts was applied between metal electrodes in an evacuated glass tube, an electric current flowed between the electrodes. It was found that this current was made up of negatively charged particles by observing their deflection in an electric field. Credit for the discovery of the electron is usually given to the English physicist J. J. Thomson. He was able to make quantitative measurements of the deflection of these particles in electric and magnetic fields and measure e/m, the ratio of their charge to mass.

Later, similar measurements were made on the negatively charged particles emitted by different cathode materials and the same value of e/m was obtained. When the same value of e/m was also obtained for «electrons» emitted by hot filaments (called thermionic emission ) and for photoelectrons emitted when light hits certain surfaces, it became clear that these were all the same type of particle, and the fundamental nature of the electron began to emerge. From these and other measurements it soon became known that the charge on the electron was roughly 1.6 × 10-19 coulombs. But the definitive experiment, which indicated that the charge on the electron was the fundamental unit of charge in nature, was carried out by Robert A. Millikan at the University of Chicago between 1907 and 1913. A schematic diagram of this famous «oil drop» experiment is shown in Figure 1. Charged oil drops, produced by an atomizer, were sprayed into the electric field maintained between two parallel metal plates. By measuring the terminal velocity of individual drops as they fell under gravity and again as they rose under an applied electric field, Millikan was able to measure the charge on the drops. He measured the charge on thousands of drops and was able to follow some drops for long periods oftime and to observe changes in the charge on these drops produced by ionizing x rays . He observed many drops with only a single electronic charge and never observed a charge that was not an integral multiple of this fundamental unit. Millikan’s original measurements gave a value of 1.591 × 10-19 coulombs. These results do not prove that nonintegral charges do not exist, but because many other different experiments later confirmed Millikan’s result, he is generally credited with discovering the fundamental nature of the charge on the electron, a discovery for which he received the Nobel Prize in physics in 1923.

Electron

The electron is a subatomic particle that carries a negative electric charge. It has no known substructure and is believed to be a point particle. An electron has a mass that is approximately 1836 times less than that of the proton. The intrinsic angular momentum (spin) of the electron is a half integer value of 1/2, which means that it is a fermion. The anti-particle of the electron is called the positron, which is identical to electron except that it carries electrical and other charges of the opposite sign. In collisions electrons and positrons annihilate, producing a pair (or more) of gamma ray photons. Electrons participate in gravitational, electromagnetic and weak interactions.

The concept of an indivisible amount of electric charge was theorized to explain the chemical properties of atoms, beginning in 1838 by British natural philosopher Richard Laming; the name electron was introduced for this charge in 1894 by Irish physicist George Johnstone Stoney. The electron was identified as a particle in 1897 by J. J. Thomson and his team of British physicists. Electrons are identical particles that belong to the first generation of the lepton particle family. Electrons have quantum mechanical properties of both a particle and a wave, so they can collide with other particles and be diffracted like light. Each electron occupies a quantum state that describes its random behavior upon measuring a physical parameter, such as its energy or spin orientation. Because an electron is a type of fermion, no two electrons can occupy the same quantum state; this property is known as the Pauli exclusion principle.

In many physical phenomena, such as electricity, magnetism, and thermal conductivity, electrons play an essential role. An electron generates a magnetic field while moving, and it is deflected by external magnetic fields. When an electron is accelerated, it can absorb or radiate energy in the form of photons. Electrons, together with atomic nuclei made of protons and neutrons, make up atoms. However, electrons contribute less than 0.06% to an atom’s total mass. The attractive Coulomb force between an electron and a proton causes electrons to be bound into atoms. The exchange or sharing of the electrons between two or more atoms is the main cause of chemical bonding.

Electrons were created by the Big Bang, and they are lost in stellar nucleosynthesis processes. Electrons are produced by cosmic rays entering the atmosphere and are predicted to be created by Hawking radiation at the event horizon of a black hole. Radioactive isotopes can release an electron from an atomic nucleus as a result of negative beta decay. Laboratory instruments are capable of containing and observing individual electrons, while telescopes can detect electron plasma by its energy emission. Electrons have multiple applications, including welding, cathode ray tubes, electron microscopes, radiation therapy, lasers and particle accelerators.

native_mate

At present, answers to this question can be found in : a fork of Chromium’s library that makes it easier to marshal types between C++ and JavaScript.

Inside there’s a header and implementation file for . This is what allow us to form modules in native code whose shape conforms to what JavaScript developers would expect.

If we look at every Electron module as an , it becomes easier to see why we would want to use to construct them. This class is built on top of a class exposed by V8, which is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. V8 implements the JavaScript (ECMAScript) specification, so its native functionality implementations can be directly correlated to implementations in JavaScript. For example, gives us JavaScript objects without a dedicated constructor function and prototype. It uses , and in JavaScript would be equivalent to .

To see this in action, look to the implementation file for the app module, . At the bottom is the following:

In the above line, is called on . can be called on any instance of the class to set methods on the Object prototype in JavaScript, with the following syntax:

This is the JavaScript equivalent of:

This class also contains functions to set properties on a module:

These would in turn be the JavaScript implementations of Object.defineProperty:

and

It’s possible to create JavaScript objects formed with prototypes and properties as developers expect them, and more clearly reason about functions and properties implemented at this lower system level!

Почему десктоп

Недостаточная отзывчивость web-приложений. Где-то всему виной клиент-серверная синхронизация и медленный интернет, где-то однопоточная природа javascript-а, а где-то и просто прожорливость браузера на вашей не очень мощной машине. Стоит заметить, что решение вышеперечисленных проблем лишь вопрос времени. В частности, web worker-ы уже всеми современными браузерами, что частично решает проблему отсутствия многопоточности, а возможности типа SharedArrayBuffer позволяют уменьшить накладные расходы на копирование памяти между основным потоком и воркерами.
Доступ к локальным ресурсам системы. Есть целые классы приложений (файловые менеджеры, tweaker-ы, демоны и сервисы) которые не могут быть реализованы как web-приложения (по крайней мере на данном этапе развития).
Ограничения возможностей самого браузера. К примеру, сетевое взаимодействие ограничивается только отправкой http запроса и соединения по web-socket-ам. Более низкоуровневые вещи (tcp, upd сокеты), увы, недоступны.
Искусственные ограничения браузеров в целях безопасности. CORS, работа с cookies, ограничения на отсылаемые заголовки.
Ограниченный набор языков и подходов. В отличие от web-приложений, где единственным языком для написания приложений остается javascript, десктопные приложения позволяют использовать любые языки программирования вплоть до ассемблеров, эффективно использовать ресурсы системы, применяя многопоточное программирование и низкоуровневые инструкции. Стоит отметить, что по данному вопросу ситуация улучшается — появляются транспилеры из некоторых языков в javascript. Более того, компиляция в webassembly позволяет перенести наработки из других языков (C++, C#, rust и т.д.), зачастую получая неплохой прирост производительности.

Нам необходим доступ к файловой системе для работы с проектом.
Ограничения fetch не позволяют получить полный контроль над конфигурированием и выполнением запроса.
В будущем нам могут потребоваться низкоуровневые оптимизации для улучшения производительности приложения.

Выбор технологии

Это должен быть язык со статической типизацией.
Язык должен иметь большую и зрелую инфраструктуру — должны быть как проверенные библиотеки так и поддержка со стороны IDE и других инструментов.
Язык должен быть знаком большинству членов команды.

Кроссплатформенность (Windows, Linux, MacOS)
Богатый набор как встроенных так и сторонних компонентов
Кастомизируемость компонентов
Наличие языка разметки для описания интерфейса
Хорошая поддержка

Electron

многиене прекратился

Возможность использования наработок из web.
Проще найти специалистов в данной сфере.
Отработанный воркфлоу «дизайнер» — «верстальщик» — «программист», изобилующий удобными инструментами на каждом этапе.