Video and slides synchronized, mp3 and slide download available at URL https://bit.ly/2Z4ZJjn. Kilian Valkhof discusses the process of making an Electron app feel at home on all three platforms: Windows, MacOS and Linux, making devs aware of the pitfalls and how to avoid them. Filmed at qconsf.com. Kilian Valkhof is a Front-end Developer & User-experience Designer at Firstversionist. He writes about various topics, from design to machine learning, on his personal website, kilianvalkhof.com and is a frequent contributer to open source software. He is part of the Electron governance team that oversees the development of the Electron framework.

1. Make your Electron app feel at
home everywhere

2. InfoQ.com: News & Community Site
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
electron-app/

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

4. ✋

7. $ electron index.js

11. Kilian Valkhof
kilianvalkhof.com | @kilianvalkhof

12. Superposition.designPolypane.app

13. Qt

14. GTK

17. 8 ways to make your
Electron app feel great on
all three platforms

18. Opening your app
1.

19. $ electron index.js

20. Hide the app until the page has loaded

21. Use a background color that matches your app

22. Closing your app
2.

23. The window is the appThe app has windows

24. Windows and Linux:
All app windows closed = close the app

25. Don’t close the app on MacOS.

26. …But don’t do that on MacOS.
And make sure to
recreate the window
when the dock icon
is clicked.

27. Remember user preferences
3.

29. • Window dimensions
• Window position
• Which monitor
• If the app is maximised

30. • Window dimensions
• Window position
• Which monitor
• If the app is maximised
electron-settings

31. Restore the window
position on load

32. Or use electron-window-state

33. Keep track of the last used folder

35. OS-specific menu
4.

36. npm install electron-create-menu

38. Text highlighting
5.

42. Context menus
6.

46. Or use electron-context-menu

47. Keyboard shortcuts
7.

48. Keyboard
shortcuts use
ctrl
Keyboard
shortcuts use
cmd (⌘)

51. CmdOrCtrl

52. Using system fonts
8.

57. Memory

58. Memory
https://electronjs.org/docs/tutorial/performance

62. chrome://inspect

63. In conclusion

64. Don’t launch your app like a site
1.
Hide until
“ready-to-show”
Use a fitting
backgroundColor

65. Handle window closing like the OS
2.
Keep app running
on MacOS, re-
open on click.
Closing the (last) window
should close the app on
Windows and Linux

66. Remember user preferences
3.
Restore windows
to their last
position and size
Remember the last used
folder

67. OS specific menu
4.
Use electron-create-menu

68. Prevent text highlighting
5.
Use electron-create-menu

69. Context menus
6.
Right clicking on
text should have
cut, copy etc.
Use contextual info to
give extra options for
images, links etc.

70. OS-specific keyboard shortcuts
7.
Use CmdOrCtrl

71. Use the system font
8.

72. kilianvalkhof.com | @kilianvalkhof | polypane.app
electronjs.org

73. App icons
9.

74. .icns .ico .png
16x16
32x32
128x128
256x256
512x512
1024x1024
16x16
24x24
48x48
256x256
1024x1024

75. png2icns icotool whatever
16x16
32x32
128x128
256x256
512x512
1024x1024
16x16
24x24
48x48
256x256
1024x1024

76. App layout
10.
Flexbox
CSS Grid
Grid stylesheets:
constraint based css
gss.github.io

77. Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
electron-app/