See full record of the tals from our javascript meetup here: https://www.youtube.com/watch?v=QcSYGj4dZHo&index=4&list=PLXsWM8PhzhwRoD91MzCWn-INKkgoJBXxV

1. Developing desktop applications in JS
with Electron
Mykyta Semenistyi

2. Mykyta Semenistyi
@msemenistyi
Tech Lead
BinaryStudio
http://binary-studio.com/

3. Contents
1. Architecture
2. APIs
3. UI / UX
4. Cross-platform
5. Complex stuff
6. Tools

4. JS Desktop Evolution

5. Why Desktop Apps
• Offline
• Printers, devices, other hardware
• On-premises
• FS

7. Happy users

9. Hackolade
Data modeling
Reverse Engineering
PDF generation
Printing
Licensing
Plugin management

11. Architecture

12. Architecture

13. Processes

14. Versioning

15. API

16. main.js
$ ./node_modules/.bin/electron .

17. index.html

18. BrowserWindow
X 10

19. IPC

20. remote

21. shell

22. shell

23. Accessing OS settings

24. Accessing OS through Node

25. UI / UX

27. Chrome-like tabs
https://github.com/adamschwartz/chrome-tabs

28. Context menu

29. Photon

30. Native menu

31. Keyboard bindings
• Menu
• Accelerators
• Renderer JS - .on(‘keyup’)

32. Desktop Environment Integration

33. Notifications
electron-windows-notifications
node-mac-notifier

34. Cross-platform
macOS

35. Electron-packager
ASAR
https://github.com/electron-userland/electron-packager
electron-packager . --all

36. Native modules
PhantomJS
Kerberos
Couchbase
https://github.com/nodejs/node-gyp
VS 2010 / 2013 / 2015 / 2017

37. electron-rebuild
Win32
Win64
Linux - Ubuntu 16.04
Linux < Ubuntu 16.04
MacOS
https://github.com/electron/electron-rebuild

38. Updates - Squirrel
https://github.com/Squirrel

39. Updates - Squirrel
https://github.com/ArekSredzki/electron-release-server

40. Updates - manual download

41. Installers
$ npm install -g electron-installer-windows
$ electron-installer-windows --src dist/app-win32-x64/ --dest dist/installers/
dist/installers/app-0.0.1-setup.exe.

42. App meta info

43. Resource Hacker

44. Resource Hacker

45. Gotchas
Chrome versions
Security
Modal Windows / Chrome-native menu

46. Complex stuff

47. Clipboard

48. Communicating between applications
https://github.com/RIAEvangelist/node-ipc

49. Performance

50. Multithreading - WebWorkers

51. Multithreading - child_process

52. PDF printing

53. Headless CLI API
hackolade reverse --sample=1000 ./

54. Electron as headless browser
“Under the covers it uses Electron, which is similar to
PhantomJS but roughly 2 times faster and more modern.”

55. Tools

56. Visual Code debugger

57. Visual Code debugger

58. Devtron

59. Spectron

60. TypeScript support

61. Recap
There are still use cases for desktop apps
Developing Electron apps is dead simple
Electron is a default way for developing desktop apps today