First in the cool family front end blog

The title is my experience of developing client products based on Electron from the first perspective. In the following series of articles, I will introduce to interested friends step by step how I started to develop client products from the mentality of playing toys, and finally continue to optimize the client with the increase of business and function complexity.

This is the first article of this series, I am also learning while doing reflection, welcome to exchange, oh, do not worry about I will “eunuch” this series of articles, because my eldest brother holding a 40-meter broadsword watching me, irregular next article (the interval is not more than 3 weeks).

// Here is stand-up comedy, from the first point of view, how I came to know Electron until I decided to use it to develop an app. If you don’t like it, you can skip it

The Electron, also known as Atom Shell, is a “modern” text editor released by Github. Many people fall into the trap when they see “Atom’s gorgeous editor screenshots” and then fall into the trap when “Atom can’t produce a P in three minutes”. 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 had an editor called “VS Code” that was good, so I tried it again. It had the same gorgeous “cover”, but it was amazingly good and smooth. (I don’t want to start a war here, it’s just a personal experience.) That was my second encounter with Electron.

After that, I have read many articles about Electron in some blogs and columns. I generally know that Electron is a new technical framework that allows web front-end to develop cross-platform desktop clients, but I didn’t go into depth, because it literally means “to develop a desktop client product with Web front-end technology”. Six words in my head, “Uncle, we don’t date.”

Three months ago, my boss, “Nicholas Fei,” wanted me to have a front end for Windows client development, mentioned the technical framework to Electron, and asked if I wanted to try it out. I just confirmed the pronunciation and meaning of the word for the first time, which means “electron”. Let’s take a look at its previous life. It was called Atom Shell, which is the technical framework developed by Github when developing Atom editor. Maybe Github will have a “Nucleus” one day…

Furthermore, I found on Electron’s official website that I had experienced many of the major products based on Electron, but AT that time I did not know that it was Electron behind them. The one I contact most frequently every day is VS Code, which is also based on Electron. The GitGUI “GitKraken” I use on my company’s Windows PC and the email client Nylas I use on my Mac are all developed based on Electron.

So I told my boss, “I’m going to try developing client products with Electron.” At that time, I really thought it was fun and attractive (you can write interfaces with Web front-end, which is generally pretty). In addition, Electron itself was created with a fun mentality.

With the attitude of treating Electron as a toy, I looked through its documents, saw some application demos of Electron, and then combined with the needs of our client application to see what ideas we could learn from these demos. Gradually, I became proficient in Electron… The spelling.

// The stand-up is over

So, in this and a series of subsequent posts, I will record my own learning and application of Electron, and in this first post, I will do a “vulgar” introduction to how to “Quick Start Electron”, but not Hello World. My “Quick Start” will cover the following in turn:

  • What makes Electron so fascinating (especially to the front end)
  • The Electron entry stages and corresponding tasks to be accomplished
  • How do I read and study the Electron document
  • How to select some of the Electron Demo source code to study and practice
  • What features or topics will be covered later in the series?

This article will not specifically say how to Start a Demo to “Quick Start”, which can be found on the official website. There are also many articles written. I just give some limited suggestions on my own experience, so as to provide a reasonable reference for interested friends to get started. We don’t know what to do about it, so the enthusiasm is frozen in the “Hello World” phase, and the following joke is not the intended result.

What makes Electron so fascinating?

May be mainly because apes in the subspecies, front-end developer, and a new way out, haven’t find a job in the front of the development, can have a new job to choose, has been on the front end of the also have a New Year KPI/OKR, fledgling startups can pull a front-end can only develop cross-platform multiple desktop client… . (Just kidding).

1. Can use Web front-end technology to develop cross-platform desktop clients

This is the most fascinating thing about Electron, basically because it’s built on Chromium and Node, one interface, one logic behind it, typical “you’re responsible for being beautiful, I’m responsible for making money”, It’s understandable why Electron has been able to develop a cross-platform desktop application.

And for the front-end development, “don’t say what C++, Java, old husband walking rivers and lakes on a JS, meet the demand is dry”. Front-end development can use their familiar way to write the application interface, the logic part is still JS, if you are proficient in Node back-end, that back-end can also plug in a foot, “shotgun for cannon”, your ability to develop the client has a kind of “suddenly like night spring breeze” feeling.

But, there will be quite different between different systems, “the same set of code, compile the cross-platform multiple clients”, is so, but you have to do some additional processing is different because the system, to make the packaging application under different system can work normally, it may be some “if – else” costs, But those costs are small compared to the 80 percent of code that can be fully reused.

To sum up, a Web front-end developer can get started on Electron at a fraction of the cost of developing a multi-platform client compared to the cost of developing a multi-platform client previously.

2. Get a huge boost from Node’s ecosystem

Since Electron is based on Node, it means that the module in the larger ecosystem of Node can also be used for Electron, which reduces a lot of time to build wheels. You need to write some logic and first think about whether there is a mature module to introduce, rather than trying to do it yourself. Make your own time and energy will be a lot of consumption, the road may also overturn the car.

Electron gain from the Node has two aspects, one aspect is like modern web project, the development of the build process can introduce a lot of mature package to create suitable development workflow of the project, another aspect is the application itself can also depend on the need to package to accomplish their functions, after the articles we will detailed said.

3. Why does the website need a client?

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

  • User perspective: The client is an independent piece of software, and its comprehensive experience is generally higher than that of the website, especially when it comes to the category of “tools”. In addition, specific user groups will have similar usage habits
  • From the perspective of publisher: Client is another form of product, which is a distribution method and entry point of product. The client can realize many unique needs of local applications to reach users, and also provide more reliable services
  • Development perspective: Finally… Regardless of browser compatibility, Chromium is also good enough for development to use some advanced CSS or JS features. We have no plans to introduce WebPack and Babel, because they seem to be good enough for now. You can control the “browser” in Electron yourself, which is strangely pleasant

Together, the answer to the question in this section is that developing a client using Electron provides a better user experience, less development trouble, more powerful functions and less boss hair loss.

4. Given the choice between Electron and Nw.js, why choose the former?

I haven’t used Nw.js much, but I chose to be ecologically sound without having time to experience it in depth.

The community ecology related to Electron is very good, which has been proved in the subsequent development process. Basically, all problems encountered can be found through Stackoverflow. If not, a new problem or a Github Issue can be solved quickly. Unless there are known problems or problems that can be solved by looking at documentation, these problems may be ignored.

So, ecology is better, and I chose Electron.

What are the stages of Electron entry?

This section provides several stages that the author may need to go through in learning and using Electron based on his current limited ability. The basic content mentioned in the article can be searched. There are many articles explaining the basic content, such as what is the main process and what is the rendering process, and some important practices will be gradually written later. Such as developing package build release workflow, automatic update and upgrade implementation, etc.

How to read and study the Electron document

Reading a document is a matter of opinion. If you have a hard time reading a document, you can skip this section or read some suggestions for reading and checking the Electron document. I once watched the Electron document like “walking dead” and found it extremely inefficient, so it’s a lesson.

1. Read documents in conjunction with other people’s blog posts or code

If you don’t understand something in the documentation, many developers have already explained it in their blogs, so if you don’t understand something in the documentation, you can search for some articles and read them in combination so that you can understand it, especially for basic concepts that must be understood.

You might even have to look at it in combination with some code.

2. The first glance is to understand the basic concepts and see how the Electron document is organized

The first glance, quick afternoon, slow 2 days, check your results is to solve the following 3 problems, you can clearly express it is ok:

  • Can explain the characteristics and advantages of the Electron technology framework to those who are not familiar with the development of the Electron front-end
  • Can clearly explain what the “main process” and “render process” are, what they are responsible for, and how they communicate
  • The organization of the Electron document (especially the API document part, which is a master/render process, modular API organization) can be clearly seen in your mind.

3. The second look is mainly about what each API module is responsible for

On the basis of the first time, the second time to see the API document, the brain basically has a certain framework (don’t look down on the first time to browse, this will greatly improve your second time to see the efficiency, but also improve the efficiency of later you check the document), this time to see the document goal is to let each module in the brain have an impression.

It’s good to have an impression of what kind of process the module is available in and what the module is responsible for.

Because each application may be different, the order of importance of the modules may be different, so I’ll just give you my advice. You may need to take a good look at some modules, and “take a good look” means they may be important enough for you to look at them carefully:

Used only in the main process:

  • app: Control your entire Electron application life cycle
  • BrowserWindow: Windows for creating and controlling applications
  • ipcMain: used in the main process to communicate with the renderer
  • webContentsRender and control the Web content in your window (because in Electron, you are writing the interface in web)

Available in the render process:

  • ipcRenderer: used in the rendering process to communicate with the main process
  • remote: allows you to call the main process’s methods directly from the renderer process
  • <webview> Tag: Can load external web pages

The above modules are the first echelon of modules that I think need to be studied carefully. Of course, each application is not the same, so the overall idea is to know what is important to yourself and focus on what to see. As for the rest, when you need to use it, you can check it.

4. Check the document

Once you’ve got a general idea of Electron, you’ll look it up in the documentation, not the module you want to use in the render process, but the module that’s available in the main process.

One Tip is that if you are definitely locatable, then you can look up the corresponding module according to your needs. If you only have a few keywords, Electron offers to display all the documents on one page so you can use “search”.

Four, how to choose some Electron Demo source code to study and practice

Every time, we can always see some articles “Electron + XXX develop what What What”, so we can learn from and learn a lot of Demo, but to choose their own and friendly Demo, and look at the Demo code also need a certain way.

1. How do you choose the second Electron Demo you will study

Why not the first one? “Hello World” : Where did you put me?

  • Pick one that is not too complex (package.json is simple and generally not complex). This point is easy to understand, no explanation.
  • Don’t pick a code that’s written haphazardly, it could hurt you. There are no comments, the code style is strange, so let’s not do that.
  • Don’t follow up with a very complicated interface, but there are few lines of Demo for Electron itself, after all you’re not here to learn CSS. I actually came across a project called Electron + XXX that wrote a fancy interface and still stopped using Electron in the “Hello World” phase.

2. If such a Electron project is found, How to play

  • Understand the main code logic, do not understand the documentation
  • For example, you think it should be simple, but it took you a long time to figure it out. It is normal, so I suggest that you extend a function similar to the existing functions in the Demo, so that you can refer to it directly.

3. What is the point of watching someone else’s Demo after you have your own app to develop?

To this day, I often watch other Electron demos or other applications that I can call production, so I don’t have to look at the entire application code in detail, but I know exactly what I want to look at.

For example, after developing the Electron application for some time, I felt that the whole development workflow of our Electron application was inefficient and not smooth, from development to packaging, to construction and installation package, and finally to release. At this time, I visited many projects and borrowed many excellent practices to thank them. At that point, I just looked at how they organized the project, how they divided up the stages of development, and how they smoothly automated the process.

Later, when it was necessary to implement the function of “automatic update”, I went to see some applications and demos that implemented automatic update to see how they implemented it. Finally, we realized the function of “automatic update by strength” according to our own needs.

Therefore, after I have my own product to develop, I will look at the code of Electron application with appeal. This step is very important to optimize my product.

5. What features or topics will be covered in this series?

These are my tips for those who want to go into the pit. If you don’t, it’s easy to break. As you can see, there are no specific practices in this whole article, but as a front end of a product that has been in development for some time, these are some approaches that I think are very important.

In the next series of articles, I’ll cover the following (and definitely will) :

  • How to build your 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 by strong and weak level, what is the difference, how to achieve
  • How to add beta features to your app to provide some features that are easy to test
  • How to make a message push that the client can do but the browser can’t
  • . .

A long way to go, welcome to exchange, the above content reprint please mark the original link and author.