Series introduction: This series of articles will focus on the key points of the Electron framework, and then analyze the DEMO program to give front-end developers a preliminary understanding of developing desktop applications using Electron. This series is updated at a rate of 1-2 articles per week.

Reading time: about 5 minutes

What is the Electron

define

Electron is a framework that allows you to develop a cross-platform desktop application using traditional front-end technologies (Nodejs, Javascript, HTML, CSS). Desktop applications are applications that run on Windows, OSX, and Linux systems.

history

The Atom editor arrived in 2013, and Electron became known as the underlying framework to implement it. It was opened source in 2014, when it was still called Atom Shell.

For the next few years, Electron was constantly updated, with a major milestone almost every year

  • On April 11, 2013, Electron started as Atom Shell.
  • On May 6, 2014, Atom and the Atom Shell became open source under the MIT license.
  • On April 17, 2015, Atom Shell was renamed Electron.
  • On May 11, 2016, version 1.0 was released.
  • On May 20, 2016, submitting packages to the Mac App Store was allowed.
  • August 2, 2016, Windows Store support.

In the latest stable version v3.x, Electorn integrates Nodejs V10.2.0 with Chromium with a v66.0.3359.181 kernel

Based on Electron realization of software

Electron has been used by several open source applications, including Atom and VsCode editors that are widely known and used by programmers. Try opening VsCode and click on the switch developer tool in the help menu. You can see the familiar Chrome devtool on the interface, as shown below

The underlying implementation

Since the application scenario is developed on the system platform, we need the ability to call the native system API when developing. To enable the front-end language to interact with the underlying language, Electron integrates Nodejs+Chromium. Nodejs is mainly responsible for the main thread logic control, low-level interaction and other functions of the application, while Chromium is mainly responsible for rendering the business logic of the thread window. The main architecture is shown below:

This architecture makes it possible to upgrade the Chromium version separately. Let’s say your program is currently running Electron V3. x, which has Chromium version 66 in it. If you need to use Chromium 69 for certain features, you can upgrade the Chromium version separately from the whole upgrade Electron to specify the latest version, which is provided in the official documentation. To upgrade the Chromium

But in general we don’t recommend doing this, as a successful upgrade requires knowledge of C and C++, as well as some knowledge of the Underlying Chromium implementation. Even if you successfully upgrade the Chromium version, the overall stability of the software is not guaranteed.

Why use it

Take the Windows platform for example, most people will first think of using QT(C++), WPF(C#) and other languages to develop applications. There is no denying that these are very mature development solutions. However, let’s look at the following two scenarios:

  • The company wants to make a brand new APP, but most of the technical staff is front-end development
  • The company already had an online Web application, but wanted to wrap it up and open it directly on the desktop, while adding some functionality to interact with the system

In the first scenario, the developers on the team are unfamiliar with C++ and C#, and although they can learn it by hand, the technical and project management of the entire project becomes out of control.

For the second scenario, the business logic of the application is not much, just a set of runtime environment with a browser, it does not pay to configure a C++, C# developer.

In both cases, it would be perfect if existing front-end developers could just figure it out.

Electron’s birth offers that possibility. It helps front-end developers quickly develop cross-platform desktop applications without having to learn other languages and skills.

How to use

In later chapters, we will explain how to develop using Electron in detail, based on the main knowledge points and supported by practical cases. Here we’ll briefly cover how to write a classic Hello World using Electron.

First, create a new directory and initialize NPM

mkdir helloword
npm init
Copy the code

Modify package.json file and add NPM run start command

{
  "name": "electron demo"."version": "1.0.0"."description": ""."main": "main.js".// Change to main.js
  "scripts": {
    "start": "electron ."  // Add the start command
  },
  "author": ""."license": "ISC"."dependencies": {
    "electron": "^ 3.0.10"}}Copy the code

Install Electron through NPM

npm i electron --save-dev
Copy the code

Create main.js and index.html in the root directory

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // Create a browser window
  win = new BrowserWindow({ width: 800.height: 600 })

  // Then load the app's index.html.
  win.loadFile('index.html')
}

app.on('ready', createWindow)
Copy the code

index.html


      
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
Copy the code

At this point, all our prep work is done, and now it’s time to run it!

npm run start
Copy the code

See the effect

So much for the brief introduction of Electron. Presumably, you have already had some preliminary understanding of Electron. In the following chapters, we will start to practice.