Electron

Introduction
 Electron is an open source framework that allows developers to use web
technologies to build desktop applications.
 Initial development started in 2013 at GitHub to support hackable text and
code editor Atom. Both were made publicly available in the 2014 , and
from then its become GitHub’s biggest open source project
 Electron is being maintained by a team at GitHub with support from the
community.
Core components
 At its core, Electron consists of three components
 Electron is based on Google’s open-source Chromium
 It embeds chromium’s rendering library (known as libchromiumcontent), which
is open source. With it comes support for the latest web standards, javaScript
engine, and developer tools.
 It is a common misconception that Electron includes Chrome in its entirely; but
what it really does just contain Chromium’s rendering library.
 The Second component is Node.js, It brings countless modules on npm for
common development tasks and easy integration. Node.js rightfully claims to
be the “largest ecosystem of open source libraries in the world”
 The third component is a layer of C++, which extends the available APIs with
native implementations for common OS operations such as sending native
notificaions, creating native dialogs and accessing the system preferences
 By combining Chromium and Node.js and large numbers of natively
implemented APIs, electron enables developers to builds powerful desktop
application with little effort. These all three technologies are cross platform,
supporting Windows, macOS and Linux .
 Slack’s desktop app was built by just two engineers.
 Electrons true power is that it allows developers to build desktop apps using
nothing but web technologies
Main & Renderer Processes
 When an Electron application started, it launches the main process. Within
one application instance, there is always one main process. This process
has no access to DOM APIs, is windowless, and behaves lot like node.js
process.
 As soon as the main process has initialized, it is able to open windows. Those
windows run in their own process and are referred to as renderer processes.
In Electron, each web page runs in its own process.
 Here the difference is important: Renderer processes have the DOM with window and document objects, can create and
render the HTML elements, and have Chromium’s developer tools available, whereas the main process is really just a
Node.js process. At the same time many of electron’s APIs can only be accessed from the main process: Calling methods
that perform native GUI operations from a renderer process is risky, likely to leak resources, and therefore simply not allowed.
 new BrowserWindow([options])
 Options Object (optional)
 width Integer (Optional )- Window’s width in pixels. Default is 800

 height Integer (Optional)- Window’s height in pixels. Default is 600

 x Integer (Optional) – (required if y is used) Windows left offset from screen. Default is center

 y Integer (Optional) – (required if x is used) Windows top offset from screen. Default is to center

 useContentSize – Boolean (optional) – The width and height would be used as web page’s size, which means the actual window’s size
will include window frame’s size and be slightly larger Default is false.

 center Boolean (optional) – show window in the center of the screen

 resizable Boolean(Optional) – whether window is resizable

 movable Boolean

 minimizable Boolean

 maximizable

 fullscreen

 fullscreenable

 title: if the HTML <title> is defined then this would be ignored

 Icon

 Show

 frame

 darkTheme Boolean – Forces using dark theme for the window, only works on some GTK+3 desktop environment