Make Your Electron App Feel at Home Everywhere
0 likes602 views
The document discusses best practices for enhancing the user experience of Electron applications across various platforms. It emphasizes maintaining user preferences, implementing OS-specific behaviors, and using appropriate menus and keyboard shortcuts. Additional resources and tools for developers are also highlighted, along with a link to a presentation video.
Make Your Electron App Feel at Home Everywhere
- 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. ✋
- 11. Kilian Valkhof kilianvalkhof.com | @kilianvalkhof
- 13. Qt
- 14. GTK
- 17. 8 ways to make your Electron app feel great on all three platforms
- 20. Hide the app until the page has loaded
- 21. Use a background color that matches your app
- 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.
- 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
- 33. Keep track of the last used folder
- 42. Context menus 6.
- 51. CmdOrCtrl
- 57. Memory
- 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
- 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/