From 1 to perfect, write a desktop application with JS and electron
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)