Things we want to learn about

[rpherbig]

building

• javascript
• typescript?
• linting

deploying

• do we need to use make? - due to compilation, npm scripts may not be sufficient
• windows
• mac
• linux (different by distro?)
• cross-platform compilation (local Windows, CI/CD linux, etc.) (article on using GitHub action)
• build all platforms at once
  • It looks like we can build the windows installer from linux, but we need a mac to make the mac installer.
• "installing"
  • Windows Installer
  • Linux Installer
  • Mac Installer
• auto updating

automated testing

• unit - jest
• unit - react-test-renderer
• unit - @testing-library/react - this library only lets you examine the DOM and we wanted the ability to test React components themselves
• unit - enzyme - There is no adapter to allow Enzyme to work with the latest version of React (17.x). The PR has been stalled for over a year. There is an unofficial adapter which we decided not to use.
• integration - Cypress - Cypress has stopped supporting Electron
• integration - Spectron - Spectron has been deprecated
• integration - Selenium via WebdriverJS
  • Note: requires rebuilding the app before running tests if changes were made to it or it has never been built
  • requires a compiled Electron app and running Webdriver server to run locally
  • headless locally
    • headless windows - via cross-env
    • headless linux - via xvfb
    • headless osx - via xvfb & homebrew
  • headless on the CI/CD server requires using xvfb, maybe we can use a special GitHub Action
• integration - Playwright integrated with Electron plus Playwright Test (see also "Playwright vs Webdriver")
  • Note: requires browsers to support the DevTools protocol. Not a problem for Electron, but could be if the UI is hosted as a web site and required to support older browsers (e.g. Internet Explorer).
  • Note: requires rebuilding the app before running tests if changes were made to it or it has never been built
  • Note: for an Electron app, Playwright can be installed faster with PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm i -D playwright
  • headless locally
    • headless windows - via cross-env
    • headless linux - via xvfb
    • headless osx - via xvfb & homebrew
  • headless on the CI/CD server
• system level/UI: there aren't any external dependencies to justify this level of testing.

cross-platform?

• if/when deploying to different platforms, how much is custom?
• background services
• native components
• System tray icon (Windows) and the equivalent for Mac and Linux
  • Windows
  • Linux
  • OSx
  • Need to capture the system tray object as a variable to avoid garbage collection and the tray going away
• Mac-specific conventions

what does interacting with local resources look like?

• USB/HID
• Bluetooth
• files/disk
• database
• what about elevated access?
• use of IPC

logging

• splunk

ui framework

• use React
• use Angular
  • See https://www.logicflow.ai/blog/params/post/2543411/
  • From: https://angular.io/guide/setup-local
  • Note: don't search for "angular" - that will bring up results for angular.js that are a decade old. Use "angular.io" in searches.
  • Note: don't try to create components by hand, use ng generate component.
• SPA/routing - this is typically a concern of the UI framework and shouldn't be any different within Electron
• open multiple windows and have them communicate with each other
  • Note: two windows can communicate, but have to use the main process as an intermediary. This is by (Electron's) design. See the chat app's "whisper" for an example.
• Vue, Ember, Backbone?: we decided not to pursue this because the integration of these frameworks won't be significantly different than the React or Angular examples.

Localization/internationalization

• do it

[rpherbig]

It looks like Cypress might support the Electron browser: https://docs.cypress.io/guides/guides/launching-browsers#Electron-Browser and https://docs.cypress.io/guides/guides/cross-browser-testing

I'm unclear if that is different than supporting an Electron app. We might want to revisit that.

[Skytherin]

FYI, if you ever need to debug electron-forge, you can use syntax like DEBUG=electron-packager timeout 2m npx electron-forge make --platform win32

[Skytherin]

FYI: electron-packager timed out when packaging ng w/ default settings. We fixed this by ignoring all @angular packages as follows:

"packagerConfig": {
        "ignore": [
          "node_modules/@angular"
        ]
      },

My preference would be to:
1 - webpack the main process so we can simply ignore everything in node_modules
2 - use a packager that allows us to whitelist what gets included in the package instead of a blacklist.

[Skytherin]

We tried using electron-builder because we thought it supported multi-platform builds from a single platform. It does not: linux builds on windows have been broken for at least 3 years and don't appear to be on anyone's radar to fix. Mac builds can only be built on mac.

It was a bit snappier to make builds (after the first one which caches some stuff) on windows; I don't know if we'd see the same performance improvement on Windows.