Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make Your Electron App Feel at Home Everywhere

86 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Make Your Electron App Feel at Home Everywhere

  1. 1. Make your Electron app feel at home everywhere
  2. 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. 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. 4.
  5. 5. $ electron index.js
  6. 6. Kilian Valkhof kilianvalkhof.com | @kilianvalkhof
  7. 7. Superposition.designPolypane.app
  8. 8. Qt
  9. 9. GTK
  10. 10. 8 ways to make your Electron app feel great on all three platforms
  11. 11. Opening your app 1.
  12. 12. $ electron index.js
  13. 13. Hide the app until the page has loaded
  14. 14. Use a background color that matches your app
  15. 15. Closing your app 2.
  16. 16. The window is the appThe app has windows
  17. 17. Windows and Linux: All app windows closed = close the app
  18. 18. Don’t close the app on MacOS.
  19. 19. …But don’t do that on MacOS. And make sure to recreate the window when the dock icon is clicked.
  20. 20. Remember user preferences 3.
  21. 21. • Window dimensions • Window position • Which monitor • If the app is maximised
  22. 22. • Window dimensions • Window position • Which monitor • If the app is maximised electron-settings
  23. 23. Restore the window position on load
  24. 24. Or use electron-window-state
  25. 25. Keep track of the last used folder
  26. 26. OS-specific menu 4.
  27. 27. npm install electron-create-menu
  28. 28. Text highlighting 5.
  29. 29. Context menus 6.
  30. 30. Or use electron-context-menu
  31. 31. Keyboard shortcuts 7.
  32. 32. Keyboard shortcuts use ctrl Keyboard shortcuts use cmd (⌘)
  33. 33. CmdOrCtrl
  34. 34. Using system fonts 8.
  35. 35. Memory
  36. 36. Memory https://electronjs.org/docs/tutorial/performance
  37. 37. chrome://inspect
  38. 38. In conclusion
  39. 39. Don’t launch your app like a site 1. Hide until “ready-to-show” Use a fitting backgroundColor
  40. 40. 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
  41. 41. Remember user preferences 3. Restore windows to their last position and size Remember the last used folder
  42. 42. OS specific menu 4. Use electron-create-menu
  43. 43. Prevent text highlighting 5. Use electron-create-menu
  44. 44. Context menus 6. Right clicking on text should have cut, copy etc. Use contextual info to give extra options for images, links etc.
  45. 45. OS-specific keyboard shortcuts 7. Use CmdOrCtrl
  46. 46. Use the system font 8.
  47. 47. kilianvalkhof.com | @kilianvalkhof | polypane.app electronjs.org
  48. 48. App icons 9.
  49. 49. .icns .ico .png 16x16 32x32 128x128 256x256 512x512 1024x1024 16x16 24x24 48x48 256x256 1024x1024
  50. 50. png2icns icotool whatever 16x16 32x32 128x128 256x256 512x512 1024x1024 16x16 24x24 48x48 256x256 1024x1024
  51. 51. App layout 10. Flexbox CSS Grid Grid stylesheets: constraint based css gss.github.io
  52. 52. Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ electron-app/

×