Electron, starting from the mentality of playing with toys, has created a more and more excellent desktop client product - an appetizing Quick Start that is not "Hello Word"

First published on Kujiale front-end blog

The title is my experience of developing client products based on Electron from the first perspective. I will introduce to interested friends step by step in a series of articles how I started contacting Electron from the mentality of playing with toys to developing client products. Finally, as the complexity of business and functions increases, the client is continuously optimized.

This is the first article in this series. I am also learning while doing and reflecting. Welcome to exchange. Oh, don't worry about me being a "eunuch" in this series of articles, because my boss is watching me with a 40-meter knife, and I will publish it from time to time. Next article (maximum interval of no more than 3 weeks).

// The following is a stand-up comedy. From the first point of view, how did I come into contact with Electron until I wanted to use it to develop applications myself. If you don't like it, you can skip it

Electron, nicknamed Atom Shell, and Atom is a "modern" text editor released by Github. Many people fell into the pit because they saw "Atom's gorgeous editor screenshots", and because "Atom can't hold back for three minutes" The fluency of a P" and abandoned the pit, Yang Tian sighed that "the covers are really deceptive", I was one of them, this was the first time I had contact with Electron, but I didn't know her at that time.

Later, I heard that Microsoft has an editor called "VS Code" which is very easy to use, so I used it again, the same gorgeous "cover", but it is very easy to use and smooth, (I don't want to provoke two big things here. Sect War, just a record of personal experience), that was my second contact with Electron, and I still don't know her.

Later, I saw a lot of Electron-related articles in some blogs and columns, and I generally know that this is a new technical framework that allows the web front-end to develop cross-platform desktop clients, but I didn’t go in depth, because literally " Use Web front-end technology to develop a desktop client product" to understand, there are six words "Uncle, we will not make an appointment".

And 3 months ago, my boss "Nicholas Fei" wanted me to develop a front-end Windows client, and I mentioned that the technical framework is Electron, and asked me if I wanted to try it. It was the first time I went to confirm the pronunciation and meaning of this word, which means "electron", and then took a look at her past and present life. It used to be called Atom Shell "Atom Shell", which was developed when Github developed the Atom editor. The technical framework is reasonable. Isn't "atom" composed of "electron" and "nucleus"? Maybe one day Github will come up with a "Nucleus" (nucleus) thing...

Going a step further, I found on Electron's official website that I have experienced many big-budget products based on Electron, but at that time I didn't know that Electron was behind it. The one I have the most frequent contact with every day is "VS Code", which is also based on Electron. The GitGUI "GitKraken" I use on the company's Windows computer, the email client Nylas I use on my Mac, and so on are all developed based on Electron.

So, I said to my boss, "I'm going to try to develop client-side products with Electron." At that time, I really thought this thing was fun and beautiful (you can use the Web front-end to write the interface, which is generally more beautiful). In addition, Electron itself This project was also created with a playful mindset.

With the attitude of treating Electron as a toy, I browsed its documentation, looked at some Electron application demos, and then combined with the needs of our client applications to see what ideas we can learn from these demos. Slowly, I became proficient. Learned the spelling of Electron....

// end of stand-up

Therefore, in this and the following series of articles, I will record my learning and application experience in Electron, and in this first article, I will "vulgarly" introduce how to "Quick Start Electron ", but not Hello World. My Quick Start will cover the following in order:

• What makes Electron so fascinating (especially for the front end)
• Several stages of getting started with Electron and corresponding things to be done
• How to read and learn Electron's documentation
• How to choose some Electron Demo source code to learn and practice
• What features or topics will be covered in future articles in this series?

This article will not specifically say how to start a Demo to "Quick Start", which can be found on the official website, and there are many articles written. I just give some limited suggestions based on my own experience, and give interested friends a reasonable one. Introductory reference, many times, when we practice "Hello world", we don't know what to do, so enthusiasm can only be frozen in the "Hello world" stage , the following joke is not the desired result.

1. What makes Electron so fascinating?

Maybe the main reason is that the subspecies of the apes - front-end development - has a new way out. Front-end developers who haven't looked for a job have new positions to choose from, and front-end who are already on the job. New year's KPI/OKR, start-up companies can develop multiple desktop clients across platforms with only one front-end... (just kidding).

1. Cross-platform desktop client can be developed with Web front-end technology

This is the most fascinating part of Electron. The fundamental reason is that it is built on "Chromium" and "Node". One is responsible for the interface and the other is responsible for the logic behind it. The typical "You are responsible for beauty, and I am responsible for making money." It is understandable why Electron can develop cross-platform desktop applications .

For front-end development, "don't tell me about C++, Java, I just use JS when I walk in the rivers and lakes, and I just do it when I need it." Front-end development can write the application interface in a way that you are familiar with, and the logic part is still JS. If you are proficient in Node back-end, you can also plug in the back-end. "Shot guns for cannons", your ability to develop clients has a kind of "suddenness" It feels like a spring breeze."

However, there are still big differences between different systems. "The same set of code compiles multiple clients across platforms." That is to say, but you have to do some extra processing because of the difference in the system to make the package The applications under different systems can work normally, which may be some "if - else" costs, but compared to 80% of the code that can be fully reused, these costs are already very small.

To sum up, a web front-end developer can get started with Electron at very little cost. Compared with the previous cost of developing a multi-platform client, the cost of developing a multi-platform client with Electron is extremely low.

2. You can get great help from the ecology of Node

Because Electron is based on Node, it means that the modules in the big ecosystem of Node, Electron can also be used, which reduces a lot of time for building wheels. If you want to write some logic, you must first consider whether there are mature modules that can be introduced, and If you don't make a car behind closed doors, you will consume a lot of time and energy, and you may overturn on the road.

Electron benefits from Node in two aspects. One aspect is that, like a modern web project, the development and construction process can introduce many mature packages to create a development workflow suitable for its own project. Another aspect is that its application itself can also rely on The required packages are needed to complete their own functions, and we will discuss them in detail in the following articles.

3. Why does the website need a client?

Since Electron uses Web technology to write the client, it seems that what Electron has to do can be moved to the website. Why should it be moved to the client? Here are three answers:

• User perspective: The client is an independent software, and its comprehensive experience is generally higher than that of the website, especially when it comes to applications in the category of "tools". In addition, certain user groups will have similar usage habits.
• From the issuer's perspective: the client is another form of product, a distribution method and entry point for the product. The client can meet the unique needs of many local applications to reach users, and can also provide more reliable services
• Development perspective: finally...don't worry about browser compatibility, Chromium is enough to develop and use some advanced CSS or JS features, we don't plan to introduce webpack and babel, because it seems to be enough now, restraint is love, in addition to writing It's cool. For development, I finally jumped out of the browser's sandbox. You can control the "browser" in Electron yourself, which is inexplicably happy.

These are combined to answer the question of this subsection, using Electron to develop a client, the user experience is good, the development trouble is small, the function is more powerful, and the boss has less hair loss .

4. Between Electron and NW.js, why choose the former?

I haven't used NW.js very much, but at that time, I chose the ecological one when I didn't have time to experience it in depth.

The community ecology related to Electron is very good, and the subsequent development process also proves this. The problems encountered can basically be found through Stackoverflow. If not found, open a new problem or go to Github to raise an issue can be solved quickly. Unless it's a known issue or something that can be resolved by looking at the documentation, this type of issue may be ignored in the past.

Therefore, the ecology is better, and I chose Electron.

2. What are the stages of getting started with Electron?

This section gives several stages of learning and using Electron from the author's current limited ability. The basic content mentioned in it can be searched. There are many articles explaining it, such as what is the main process and what is The rendering process, and some important practices will be written later, such as the development, packaging, build and distribution workflow, the implementation of automatic updates and upgrades, etc.

3. How to read and learn Electron's documentation

Reading the documentation is actually a matter of opinion. If you see that the documentation has its own three-axes, you can ignore this section. Otherwise, it is recommended to read some suggestions for reading and checking Electron documentation. I have read the Electron documentation and found that this is extremely inefficient, so it is a lesson.

1. To read the document, you should combine it with some blog posts or code written by others.

What you don't understand in the documentation may be explained by many developers in their own blogs, so if you encounter something that you don't understand after reading the documentation, you can search for some articles and read them together, so that you will understand, especially for those who must It is very important to understand the basic concepts.

Even, you may have to combine some code to see.

2. The first pass is to understand the basic concepts and see how the Electron documentation is organized

The first time you browse, one afternoon fast, two days slow, checking your own results is to solve the following 3 problems, you can express it clearly:

• Be able to explain the features and advantages of Electron as a technical framework to those who do not know Electron front-end development
• Can clearly explain what is "main process", what is "rendering process", what each is responsible for, and how to communicate
• The organization method of Electron documents can clearly emerge in the brain (especially the API document part, which is a modular API organization method that divides the main/rendering process)

3. The second look is mainly to see what each API module is generally responsible for

On the basis of the first time, when you read the API document for the second time, you basically have a certain framework in your mind (don't underestimate the first time browsing, this will greatly improve the efficiency of your second time reading, and it will also improve the future The efficiency of your checking the document), the goal of reading the document at this time is to make each module have an impression in the mind.

This impression includes what kind of process this module is available in, and what function this module is responsible for. It is good to have an impression.

Because each application is different, the order of importance of modules may also be different. I only give my advice. You may need to look at some modules. "Look well" means that these modules may be very important. , you have to look carefully :

Can only be used in the main process:

• app: Control the lifecycle of your entire Electron application
• BrowserWindow: Create and control the windows of the application
• ipcMain: used in the main process to communicate with the rendering process
• webContents: Render and control the web content in your window (because in Electron, you write the interface with the web)

Can be used in the rendering process:

• ipcRenderer: used in the rendering process to communicate with the main process
• remote: It is convenient for you to directly call the method of the main process in the rendering process
• <webview> Tag: Web pages that can be loaded from the outside world

The above modules are the first echelon modules that I think need to be carefully studied. Of course, each application is different, so the general idea is to know what is important to you, and focus on what to look at. As for the rest, you need to use It's time to check.

4. Check the documentation

As long as you already have a general understanding of Electron, you will check the documentation, there will be no modules you want to use in the rendering process, but you will go straight to the modules available in the main process for a long time.

There is a Tip, if you are clearly locatable, then you can check the corresponding module according to your needs. If you only have a few keywords, then Electron provides all documents to be displayed on one page, so that you can use " search".

Fourth, how to choose some Electron Demo source code to learn and practice

Every once in a while, I can always see some articles "Electron + xxx development what what what", so there are many demos that we can learn from and learn from, but we have to choose the one that suits us and is friendly. Code also needs a certain way.

1. How to choose the second Electron Demo you want to learn

Why not the first one? "Hello World": Where did you put me.

• Pick one that is not too complicated (package.json is simple and generally not complicated). This is easy to understand, but not explained.
• Don't choose a code that's written haphazardly, it might ruin you. There are no comments, the code style is neat, so forget it.
• Don't follow along to write a very complicated interface, but the use of Electron itself is not a few lines of Demo, after all, you are not here to learn CSS. I have really encountered so-called projects developed with Electron + XXX, wrote a fancy interface, and the use of Electron still stopped at the "Hello World" stage.

2. If you find such an Electron project, How to play

• Understand the main code logic, check the documentation if you don't understand
• Extend a function to it yourself. You will encounter some very interesting things here. For example, you think it should be simple, but it took you a long time to get it done. It is normal, so it is recommended to extend a function similar to the existing function in Demo. , so you can refer directly.

3. After you have the application you want to develop, what do you see when you go to other people's demos?

Until now, I still often watch some other Electron Demos or applications that can be called products. At this time, I can no longer look at the code of the entire application in detail, but clearly know what I want to see.

For example, after developing the actual application for a period of time, I feel that our Electron application, from development to packaging, to building the installation package, and finally to the release, the entire development workflow is inefficient and unsmooth. At this time, I will go. Look at a lot of projects, learn from a lot of good practices, thank them. At that time, I would just look at how they organized the entire project, how they divided the various stages of development, and how they automated the entire process smoothly.

Later, when I needed to implement the "automatic update" function, I went to see some applications and demos that implemented automatic update, and saw how they were implemented, and finally realized "automatic update according to strength and weakness" according to our own needs. Function.

So after you have the product you want to develop, look at the code of the Electron application, and look at it with the appeal. This step is very important to optimize your product .

5. What functions or topics will be involved in the series of articles in the future?

The above are some of the "correct postures" that I shared with the "pit friends" who want to enter the pit. The posture is wrong and it is easy to break. You can see that there is no specific practice in this entire text, but as a front-end that has developed a product for a period of time, these are some methods and methods that I think are very important.

In a series of articles that follow, I will cover the following (and I will definitely write):

• How to build your own development workflow: From source code to an installer, how do we automate the process
• Automatic update: how do we consider automatic update, why do we need automatic update at different levels, what is the difference, and how to achieve it
• How to add beta features to your app to provide some features that are convenient for testing
• How to do message push that the client can do but the browser is embarrassed
• ... ...

There is a long way to go, welcome to communicate, please indicate the original link and author if the above content is reproduced.