Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge that javascript can write desktop programs, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value, I believe you can write desktop programs after reading this javascript? the article will gain something, let's take a look at it.

Javascript can write desktop programs. In javascript, you can use the Electron software framework to develop desktop applications; Electron is an open source library for building cross-platform desktop applications, which provides rich native API, enabling developers to use pure JS to create desktop applications.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

What is a desktop application

Desktop applications, also known as GUI programs (Graphical User Interface), are also different from GUI programs. Desktop applications change GUI programs from GUI to "desktop", making the cold, wood-like concept of a computer more humane, vivid and dynamic.

So can javascript write desktop programs?

Javascript can write desktop programs. The world of JavaScript is getting more and more powerful, and you can use Eletron-like frameworks to easily develop desktop-level applications.

Electron is a cross-platform javascript desktop development library.

Electron is an open source library developed by Github to build cross-platform desktop applications using HTML,CSS and JavaScript. Electron does this by merging Chromium and Node.js into the same runtime environment and packaging them into applications under Mac,Windows and Linux systems.

Electron provides a rich native (operating system) API that allows you to create desktop applications using pure JavaScript. Unlike other Node.js runtimes, Electron focuses on desktop applications rather than Web servers.

Electron allows you to use pure JavaScript to call rich native APIs to create desktop applications. You can think of it as a variant of io.js that focuses on desktop applications rather than web servers.

Reasons for using Electron development:

Using Web technology with powerful ecology to develop UI with low development cost, strong scalability and cooler.

Cross-platform, a set of code can be packaged into three sets of Windows, Linux and Mac software, and compiled quickly.

Can be extended directly on existing Web applications to provide capabilities that browsers do not have

You are a front end.

Of course, we also need to recognize its disadvantages: the performance is lower than the native desktop application, and the packaged application is much larger than the native application.

Development experience

Compatibility

Although you are still using WEB technology for development, but you do not have to think about compatibility issues, you only need to care about your current version of Electron corresponding to the version of Chrome, in general, it is new enough to let you use the latest API and syntax, you can also manually upgrade the Chrome version. Similarly, you don't have to worry about the style and code compatibility of different browsers.

Node environment

This may be a feature that many front-end developers have dreamed of, using the powerful API provided by Node.js in the WEB interface, which means that you can directly manipulate files, call system API, and even manipulate databases on the WEB page. Of course, in addition to the full Node API, you can use hundreds of thousands of additional npm modules.

Cross-domain

You can directly use the request module provided by Node to make network requests, which means you don't have to be bothered by cross-domain.

Strong scalability

Use node-ffi to provide powerful extensibility for your application (described in more detail in later chapters).

Who is using Electron?

Now there are many applications in the market using Electron for development, including our familiar VS Code client, GitHub client, Atom client and so on. I am very impressed by the copy of Xunlei X10.1 when it was released last year:

Since version 10.1 of Xunlei X, we have completely rewritten the main interface of Thunderbolt using the Electron software framework. Using the new framework, Xunlei X can perfectly support 2K, 4K and other high-definition screens, and the text rendering in the interface is more clear and sharp. From the technical level, the interface rendering and event handling of the new framework are more flexible and efficient than the old framework, so the fluency of the interface is significantly better than that of the old framework. As for the specific promotion, how much? You'll know as soon as you try.

You can open VS Code and click help [switch developer tools] to debug the interface of the VS Code client.

Operation principle of Electron

Electron combines Chromium, Node.js, and API to invoke the native functionality of the operating system.

1 、 Chromium

Chromium is an open source project launched by Google to develop Chrome browser. Chromium is equivalent to the engineering version or experimental version of Chrome. The new features will be implemented on Chromium first and will not be applied to Chrome until verification, so the function of Chrome will be relatively backward but stable.

Chromium provides Electron with powerful UI capabilities to develop interfaces regardless of compatibility.

2 、 Node.js

Node.js is a development platform that allows JavaScript to run on the server side. Node uses the event-driven, non-blocking Imax O model to be lightweight and efficient.

Chromium alone cannot directly operate native GUI. Nodejs is integrated in Electron, which makes it have the ability of operating system underlying API while developing the interface. Path, fs, Crypto and other modules commonly used in Nodejs can be used directly in Electron.

3. System API

In order to provide GUI support for native systems, Electron has built-in native application program interfaces to support calling some system functions, such as calling system notifications and opening system folders.

In the development mode, Electron is developed separately on the calling system API and the drawing interface. Let's take a look at how Electron divides the process.

4. Main process

Electron distinguishes between two processes: the main process and the rendering process, each responsible for its own functions.

Electron the process that runs package.json 's main script is called the main process. An Electron application always has one and only one main process.

Responsibilities:

Create a rendering process (multiple)

Control the application life cycle (start and exit APP and do some event listening to APP)

Call the underlying functions of the system and call native resources

Callable API:

Node.js API

Main process API provided by Electron (including some system features and Electron additional features)

5. Rendering process

Because Electron uses Chromium to display web pages, Chromium's multi-process architecture is also used. The web page in each Electron runs in its own rendering process.

The main process uses an instance of BrowserWindow to create a page. Each BrowserWindow instance runs the page in its own rendering process. When a BrowserWindow instance is destroyed, the corresponding rendering process is also terminated.

You can think of the rendering process as a browser window that can exist multiple and independent of each other, but unlike browsers, it can call Node API.

Responsibilities:

Render the interface with HTML and CSS

Use JavaScript to do some interface interaction

Callable API:

DOM API

Node.js API

Rendering process API provided by Electron

This is the end of the article on "can javascript write desktop programs?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "can javascript write desktop programs?". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.