From 1 to perfect, write a desktop application with JS and electron

Time:2020-3-25

From 1 to perfect, write a desktop application with JS and electron

At present, there are two ways to write desktop software with JS and front-end technology: electron and nw.js. These two are different in the underlying implementation. In short, electronic is node + chromium, and nw.js is node + WebKit. In terms of use, electronic is more widely used and the community is more active. There are a large number of mature commercial software, such as vscode, atom, etc. Therefore, it is now generally recommended to use electron to write desktop software.

1. Select appropriate component library and tool library

With the accumulation of many years in the electronic community, there have been many mature third-party group libraries and tool libraries to help you easily build desktop applications, improve development efficiency and avoid repeated wheel building.

The component library is used to help you write the logic or UI of the program:

  • Electronic store: save application data, such as data cache, application configuration, etc
  • Electronic context menu: create right-click menu function
  • Menubar: create status bar view
  • Photon: a set of quick component library
  • Electronic log: logging

The tool library is used to help you build programs:

  • Electronic Builder: create application installation files (Win: exe, Linux: DEB, MAC: DMG, etc.)
  • Devtron: the official chrome devtools plug-in
  • Electronic packager: package the application into a runnable file (Win: exe, Linux: DEB, MAC: DMG, etc., non installation file)
  • Spectron: a test tool for electronic application
  • Electronic devtools installer: ensure the installation of chromium devtools plug-in related to electronic development

For more information, please refer to the electronic community

2. Select the appropriate template

There are many ready-made templates in the community, which encapsulate a variety of tools, package them into applications, create installation files and a series of functions. Users only need to pay attention to how to write applications, rather than the implementation and principle of tools and commands.

  • electron-react-boilerplate: electron + react + redux
  • electron-vue: electron + vue
  • electron-boilerplate: electron

For more information, please refer to https://github.com/search? O = desc & Q = Electronic + boilerplate & S = Stars & type = repositories

If you need an extension, you can change the relevant profile.

3. Development application and operation command

Take electronic react boilerplate as an example.

The web part is react + Redux + react router + Redux thunk + react Redux, and the construction tool part is webpack + Babel + eslint + stylelint + preview + flow + enzyme

In addition, it encapsulates the following development tools:

3.1 dev development and debugging command

npm run dev

This command will run an electronic application instance, and then open a local server service locally. When you write rendering process code, the local server service will automatically refresh the page without closing the application and rerunning the command.

3.2 start start the application in publish mode

npm run start

Different from the development and debugging commands, it will not start the local server service, nor listen to file changes, but will run like a published application. This is usually run before publishing to check the operation of the application.

3.3 package package application as installation file

# create installer for linux&win&mac.
npm run package-all

# create installer only for linux.
npm run package-linux

# create installer only for win.
npm run package-win

# create installer only for mac.
npm run package-mac

4. Application examples

Image viewer is a picture browser application developed by using the electronic react boilerplate template.

5. follow up

For more blogs, see https://github.com/senntyou/blogs

Author: shenyuzhi (@ senntyou)

Copyright notice: Free Reprint – non commercial – non derivative – keep signature (Creative sharing 3.0 License)