Thanks to Electron, I now have two identities: front-end developer and Mac developer.

We started a brand new product this year, but we didn’t have a Mac developer on the project team, and we carried the banner on the front end and chose the Hot Electron (4W + Star).

It’s the end of the year, and everyone is writing all kinds of year-end summaries, thinking I’ve been flirting with Electron for months, and I should write something too. However, Electron has become so popular that you can Google many articles on how to develop desktop applications using Electron, for example, and also find official Chinese documents, albeit a bit late. So WITHOUT going into the details of how to write a Electron app from scratch, it’s a good idea to follow the official Quick Start before reading the following.

Why Electron

Electron provides a Nodejs runtime that focuses on building desktop applications while using web pages as the GUI for the application. You can think of it as a mini Chromium browser controlled by JavaScript.

It goes without saying that Electron was written by the same guy as Nw.js (originally node-Webkit). What’s it like to maintain a large open source project? The author’s answer to this question. There is also an official comparison between Electron and Nw.js. I believe that the author has new thinking in the new project, so choosing Electron is a right choice, and we only need to develop the Mac side (there are Windows developers in the group), there is no requirement for COMPATIBILITY with XP system.

A solution like MacGap was also considered, but MacGap is based on the WebKit kernel and does not support IndexedDB, and our project relies on third-party services that rely on IndexedDB for local storage. Electron is also more powerful, such as opening a new WebView to load third-party pages, and can preload JavaScript to be used as a JSSDK for Web applications.

So Electron is you!

Main process and renderer process

Personally, the most important thing to understand Electron is to understand the Main Process and the Render Process. Once you understand both, take some time to check the API documentation for the rest.

In Electron, the entry is a JS file (unlike nw.js, the entry is an HTML file), and the process running this entry file (usually the main script in package.json) is called the main process, Using the BrowserWindow module in the main process, you can create and manage web pages, the GUI of your application.

Const {BrowserWindow} = require('electron') // Let someWindow = new BrowserWindow(winOpts) // load the local file someWindow.loadURL('file://' + __dirname + '/index.html')Copy the code

Each web page created by the main process also runs its own process, namely the renderer process, which is independent and manages its own page, which can be imagined as a browser TAB.

Interprocess communication

As we know, Web pages cannot directly access native GUI resources (such as dialog and power monitor) due to security restrictions, and Electron is the same. If the rendering process wants to perform native GUI operations, it must communicate with the main process and request corresponding GUI operations.

Electron provides several ways for the rendering process to communicate with the main process:

One is to use the ipcMain and ipcRenderer modules. In the renderer process, the ipcRender module is used to send messages to the main process. The main process ipcMain receives messages and performs operations.

// Const {ipcRenderer} = require('electron') ipcrender. send('somemsg', data); ipcRender.on('replaymsg', (evt, OtherData) => {console.log(otherData)}) const {ipcMain} = require('electron') ipcmain. on('somemsg', (evt, data) => { console.log(data) evt.sender.send('replymsg', otherData); }); Electron also provides a means of synchronizationCopy the code

However, don’t use IPC to transfer large amounts of data. It can cause major performance problems and even make your entire application get stuck.

The second option is to use the remote module directly in the renderer, which can fetch modules directly from the main process. This approach is actually a simplification of the first approach.

// Const {dialog} = require('electron').remote dialog.showmessagebox ({opts});Copy the code

The third is when the main process sends a message to the renderer

this.webviewWindow.webContents.send('ping');
Copy the code

The fourth is communication between renderers

If data does not need to be real-time and is only shared between rendering processes, then use the official advice: How to Share data between Web Pages? . If the need for real-time, need to cooperate with the previous several ways to achieve.

Win1.webcontents. send('distributeIds',{win2Id: win2.id}); win2.webContents.send('distributeIds',{ win1Id : win1.id }); / / / / rendering process is obtained by id window. Remote BrowserWindow. FromId (win2Id). WebContents. Send (' someMsg ', 'someThing');Copy the code

Nodejs integration

Electron integrates Nodejs, which greatly facilitates development. Nodejs is available in both the main process and the renderer process, which, as mentioned above, cannot manipulate the native GUI directly due to security restrictions. However, due to the integration of Nodejs, the rendering process also has the ability of the underlying API of the operating system. Path, FS, Crypto and other modules commonly used in Nodejs can be directly used in Electron, which is convenient for us to process links, paths, MD5 files, etc. NPM also has thousands of modules to choose from.

Nodejs can be particularly useful for features that Electron doesn’t easily implement. In our application, users need to download file message files, support colleagues to download multiple files, and give progress. Electron does not provide a convenient download interface, so we use THE HTTP and FS modules of Nodejs combined with the Dialog module of Electron to download files. And realize the download progress and download timeout error prompt.

HTML 5 enhancement

Not considering compatibility is one of the front-end coder’s dreams. Electron uses Chromium to display web pages, which means we only need Chromium browser compatibility for development, which means a lot of properties can be used without any care: Use HTML5 Audio directly for playback, IndexedDB for bulk data storage, Flexbox directly for tricky layouts, easy detection online and offline, and more.

Meanwhile, Electron has enhanced some HTML5 features:

  • For desktop notifications, you can use html5 notification directly, and Electron will convert it into a system native desktop notification.
  • File object, in a Web application we can get something similarC:/fakePath/xxx.docxElectron adds a path attribute to the File object that can be used to obtain the true path of the selected File on the File system.
  • aThe Download attribute of the tag, in a Web applicationaThe download attribute will force the browser to download. In Electron, the system download box will be directly activated to download. This method is recommended if there are no special requirements.

Renderer debugging is exactly the same as debugging in the browser. As mentioned earlier, each rendering process is completely independent. When you create multiple Web pages, each page can be opened with the corresponding debugging tool. You can view DOM, view logs, listen for network requests, and so on, just as you would with browser debugging. Electron also integrates With Nodejs, so you can debug the Nodejs API from the console or breakpoint, and even since the renderer can use the remote module directly to use the main module, you can get the data directly for debugging purposes.

Electron 中的 Webview

This new product has a requirement to load Webview applications in the client and provide the JSSDK for Web applications to get more native capabilities. In fact, Electron has the natural advantage of being able to load external applications. However, there are still a lot of issues to consider, such as showing the page loading progress, when the listening page is complete, when the PAGE DOM is complete, how the server handles some 302 redirects (such as some jump authentication), how to provide the JSSDK for the Web application, and so on.

Electron provides a series of events to listen for page loads, Page loading starts, page loading finishes, page loading fails, DOM Ready, did-frame-finish-load, did-get-redirection-request, and so on. By listening for these events, the page state can be handled.

Also, how do you provide a JSSDK for a Web application? Preload allows you to specify a script to load before the page loads. You can use Electron and the Nodejs API for this script, even if you don’t allow Nodejs in your configuration.

Var opts = {autoHideMenuBar: true, fullscreenable: false, webPreferences: {javascript: true, plugins: // Nodejs webSecurity: false, preload: path.join(__dirname, }} this.webviewWindow = new BrowserWindow(opts);Copy the code

Preloaded JS files are no different from any other JS, you just use remote or IPC communication in preload JS to provide an adequate interface to your Web application, depending on your business.

Write in the back

Electron is not very complicated. After writing a few main process codes, other business codes are almost the same as Web applications. It can even quickly package an online application into a client application, such as Electronic-Wechat and Worktile desktop. There are pitfalls (like not being able to write GIFs to a clipboard, etc.) and sometimes it’s hard to be as flexible as Native, but I’m glad we have tools that allow us to do so much more on the front end.

One last word: Although Electron is very convenient for inter-process communication and supports multi-window, I prefer to use Electron to build single-window applications, similar to netease Cloud Music, Atom, etc., which are simpler and more like familiar Web applications in terms of thinking.

Small AD

Welcome to our wechat official account:

Small front FE (smallsfe)