Introduction to Electronics

Understand the basics of Electron. EGitHub is a framework built by GitHub that supports many innovative and very popular cross-platform applications

Electron is an open source and free build toolCross-platform desktop applicationJS, HTML and CSS built by GitHub

It is very popular and has successfully used its applications, including VS Code, Slack, Discord, etc.

Electron is a huge project that revolutionized the development of native desktop applications by making it possible to become a JavaScript-based process.

Please note: Even before Electron, other tools could be used to write JavaScript-based desktop applications, but Electron made it more mainstream.

In particular, Electron allows the creation of cross-platform desktop applications. Previously, there was no tool that allowed you to run the same application anywhere.

Until the release of Electron in 2014.

Quickly understand the inside of electronics

Electron basically bundles the Chromium rendering library and Node.js (Chromium is an open source project made by Google to build the Chrome browser).

You can access the canvas driven by Chromium, which runs the V8 JavaScript engine, and can use any Node.js package and run your own Node.js code.

If you want, this is a Node.js for the desktop. It does not provide any type of GUI elements, but allows you to create UI using HTML, CSS and JavaScript.

Electron's goal is to be fast, small and slim, while providing core features that all applications can rely on.

What kind of applications can you create with Electron

You can create many different types of applications, including:

  • Regular application with a dock icon and a window
  • Menu bar application without any dock icon
  • Daemon
  • Command line utility

A large number of electronic applications are provided on the official website:https://electronjs.org/apps. With Electron, you can create applications and publish them in the Windows and Mac App Store.

Electronic API application

you couldDownload the Electron API demo application, This is the official sample desktop application built with Electron.

Electron app demo

The app is very cool, and it allows you to try out multiple features of Electron. It is open source and the code is available athttps://github.com/electron/electron-quick-start.

Electron app demo

How to create your first Electron application

First, create a new folder on the file system, and then run:

npm init -y

Createpackage.jsonfile:

{
  "name": "testelectron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add this line toscriptssection:

"scripts": {
  "start": "electron ."
}

Now install Electron:

npm install -D electron

Electronics are now available

npm start

However, if you do this, you will see an error message telling you that there is noindex.jsFile, this is where we arepackage.jsonThe file is the main starting point of our application:

Hello World Electron GUI application!

Let's create an application that displays Hello World in a window.

Create 2 files,main.js:

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

function createWindow() { // Create the browser window. const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, })

// and load the index.html of the app. win.loadFile(‘index.html’) }

app.whenReady().then(createWindow)

withindex.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node)
    </script>
    , Chrome
    <script>
      document.write(process.versions.chrome)
    </script>
    , and Electron
    <script>
      document.write(process.versions.electron)
    </script>
    .
  </body>
</html>

Now run againyarn start, This window should display:

Activity monitor

This is a very simple single window application, when you close this window, the application will exit.

Make the lives of app developers easier

Electron aims to make developers' lives easier. Applications have many common problems. They need to implement certain native APIs that sometimes make people unimaginable complex things.

Electronics provides an easy wayManage in-app purchases, Notifications, drag and drop, management shortcut keys and more.

It also providesApplication update hosting service, Making updating applications much simpler than having to build programs such as services yourself.


More devtools tutorials: