1) What is Electron?
Electron is an open source library developed by Github. It is used to develop cross platform desktop application.
2) Which technology Electron uses?
Electron uses Chromium and Node.js with HTML, CSS and JavaScript.
3) How Chromium and Node.js are used in Electron?
Chromium is a Webkit, based web browser with V8 JavaScript engine which support all the browser and DOM APIs. It is good for making web page.
Node.js keeps backend code's JavaScript state separate from frontend application windows state.
4) What are the different types of process in Electron?
There are two types of process in Electron. These are main process and renderer process.
Main process is responsible for interacting with native graphical user interface (GUI) of operating system. I also respond for auto-update of events and managing BrowserWindow instances.
Randerer process is responsible for running the user interface of your application by using HTML files, CSS files, JavaScript files etc.
5) What is Inter Process Communication (IPC)?
Inter Process Communication module is mechanism which allows exchange of synchronous and asynchronous message between main and renderer process. ipcMain module communication takes from main process to renderer process and ipcRenderer module communication takes from renderer process to main process.
6) How could we build user interface in Electron?
User Interface of Electron is built by using HTML, CSS, and JavaScript.
7) What are environment variables in Electron?
Environment variables control configuration (behavior) of Electron application without changing code. There are two types of environment variables in Electron.
Production variable
Development variable
8) What is webview in electron?
Webview is a tag which is used to embed web page in electron app. It runs in a separate process and interacts asynchronously between app and embedded content.
9) Tell me about packaging apps.
Packaging is an electron app, simply refers to creating a desktop installer. Packaging and distributing apps is an integral part of the development process. These can be done by using:
Electron-packager.
Electron-builder.
10) How debugging done in electron?
Debugging is a set of steps that involves identifying the problem, source of problem then resolving the problem to work application successfully. In electron, app are run over main process and rendered process debugging applied on both processes.
The DevTools in an Electron browser window can only debug JavaScript that is execute in that web pages. It uses external debugger and launch Electron with commands –debug or --debug-brk, --inspect or inspect-brk.
Chrome Devtools are use to debug renderer process as it executed in browser window.
11) What are different types of menu?
There are two type of menus are created in electron desktop apps.
- application menu
- context menu.
Application menu are those which display on top bar and context menu display on right-click.
12) Tell me something about System Tray.
System tray represents an icon in an operating system's notification area in other word we can say that system tray is a menu outside of your application window.
13) How dose notification is created in electron?
Notification is created by using npm module called node-notifier used to notify users in Windows, Linux and MacOS. Electron also provides native notifications API only for MacOS.
node-notifier module is install by using command
$ npm install –save node-notifier
14) How electron works?
Electron work by taking main file created in your package.json file and executes it. The main file creates application windows contains rendered web pages and interact with native GUI. The main process is created when you start your application. Main process manage BrowserWindow module (provide ability to create new application windows in your app) and each browser module runs its own renderer process.
15) What is the structure of an Electron application?
The basic structure of electron application consists of three files: package.json, main.js and index.html. Package.json used for metadata, main.js for code and index.html for graphical user interface.
