The current browser does not support music or voice playback. Please play music in wechat or another browser A long way to go with you

I think most programmers can listen to This song by Lin Zixiang, because we are all in the world of programming.

Today I would like to share with you some of my recent experiences in developing desktop applications using Electron (this is also a small accumulation of my work recently).

Electron is an “integration framework” for developing cross-platform desktop clients. The so-called “integration framework” means that it integrates “Chromium” and “Node.js” together, with a smooth interface and logic, and everyone is in order. This is a very low cost solution that is much faster than Native in terms of fast delivery, and for most applications at the application level, sacrificing performance in exchange for time pays off.

Website: https://electronjs.org/

Which scenarios use Electron:

  • Desktop software (mostly offline) improves the user experience a lot. If you have a web page, you might as well package a desktop side

  • A scenario where most of the work needs to be done on a computer

What are the benefits of using Electron?

The most typical one: “Another good job for front-end developers”.

Think of a word spread very widely in the network “do not say what C++, Java, old husband walking rivers and lakes on a JS, meet the need to roll up the sleeves is dry”.

Yes, Electron seems to be eating into the desktop client space, and you can understand how cross-platform it is, but with some of the differences between systems, you still need to do some extra processing, and that part of the work has been minimal (which is no big deal). You can imagine how low this cost is. In terms of development experience, Electron is based on “Chromium” and “Node.js”, so almost all node.js modules can run on Electron, which is very convenient for you to use “NPM” building blocks to quickly deliver a product. In this regard, you can probably imagine the build of Electron, which packaging is also based on Node.js. (This is handy for the front end)

How to get started:

Normally you’ll need to do a quick scan of the official documentation to understand some of the concepts introduced by Electron (no fear, the official documentation is already available in simplified Chinese).

  • Understand what a “main process” is and what a “render process” is

  • How does the renderer process communicate with the main process

  • Know what the renderer process is responsible for, and what the main process is responsible for

Once you understand the above three questions, you can quickly go through the API in the document and get an impression, because most likely, you will only need to use a few apis, create Windows, etc., and the rest will still be developing Web pages.

  • App controls the entire Electron life cycle

  • BrowserWindow Creates and controls the application window

  • WebContents renders and controls the content inside the window

  • OpenDevtools opens the debugging panel

  • IpcRenderer is used for communication between the renderer process and the main process

  • The < webView > Tag loads the components of the external page

Basically, you can build an application by understanding the use of these six aspects.

Learn to learn with a need:

“People are not born to be good at everything.”

In the process of learning, be sure to learn with your own demands. Now you can find many Demo about Electron on Github, which provides a good learning environment for getting started.

Step one: https://github.com/electron/electron-quick-start from the official to entry-level Demo, gradually came to know that some of these ideas.

Generally speaking, we are not going to learn Web technology or Node.js, we are going to learn good ideas, architecture, and organizational skills. Look at how other people build applications, navigate code. Or when you have a specific desire, you can look at other people’s ideas to achieve it. Only through learning, learning, can we continue to go on.

Enter development:

The overall “development” is in two phases, and while node.js capabilities can be used in renderers, normally renderers only do things related to the interface. As for drawing interfaces, you can use familiar techniques like React, Vue, and jQuery. The only thing to note is that anything unrelated to the interface is usually done in the main process. In the main process, one advantage is that when the package is “published”, the main process can output the log, which also facilitates debugging as a problem. Second, the organization of this should be appropriate, with the rendering process taking care of the interface and the main process taking care of the logic. This will reduce the number of pothole you may encounter.

Suddenly inspired by Side Project

When writing this article, suddenly thought of a small idea, maybe useful for notes has friends, exchange very much, now use the web is very inconvenient, if there is such a desktop application, each of the data set up, this time just need to install a desktop application, can know to each exchange data, thus rapid judgment.

If these shares are useful to you, you can send any ERC 20 standard token to the following address:

0x4A40Eb870DcF533D4dC097c3d87aaFE9f64490A1