Electron allows developers to build desktop applications with web technologies like HTML, CSS, and JavaScript. It uses Chromium and Node.js to package these apps so they can run on Windows, macOS, and Linux. Electron provides features like rapid development, cross-platform deployment, native UI integration, and offline capabilities. Some example Electron apps include Atom, Slack, and Visual Studio Code. The document provides an overview of Electron and tips for developing desktop apps with its framework.

1. Cross-Platform Desktop
Apps with Electron
David Neal | reverentgeek.com | @reverentgeek
var trustMe = {
has: ["Beard", "Motorcycle"],
consumes: ["Bacon", "Caffeine"],
sometimesCanComputer: true
};

2. Up Ahead
• What is Electron?
• Why desktop?
• Crash course
• Tips

3. .NET + Mono + Xamarin
Pros:
• Shared .NET code base
Cons:
• Xamarin Mac !== Xamarin iOS/Android
• Native UI is hard, yo
• Deployment
• Licensing

5. Electron
Pros:
• HTML + CSS + JavaScript
• Node.js + Chrome
• No deployment dependencies

7. Electron
Cons:
• HTML + CSS + JavaScript
• Seriously, JavaScript
• Native modules in C/C++

8. History
• Created by GitHub for Atom
• Formerly Atom Shell
• Active since January 2013

9. Electron Features
• Rapid development
• Themes
• Shared code/UI
• Deployment + “silent” updates
• Native UX

10. Why Desktop Apps?
• Offline
• Printers, devices,
other local
hardware
• On-premises
• Internal, LOB
• Edit local files
• App Store
• Kiosk
• Desktop > Intranet
• Sometimes it “just
feels right”

11. Desktop App Ideas
• Disconnected data entry
• Editor
• Time management
• Media player
• Email client
• Messaging, collaboration
• Kiosk
• Mapping, route planner
• Social media client
• Calendar
• Bulk media editor
• File management, backup
• Document generation,
reading
• Audio/video conferencing
• Games

12. Atom

16. Nylas N1

20. > npm install electron-prebuilt
> touch main.js
> touch index.html

21. main.js

22. main.js

23. main.js

24. main.js

25. main.js

26. main.js

27. main.js

28. index.html

29. index.html

30. index.html

31. main.js

32. main.js

33. There are only 2 hard
things in software
development:
cache invalidation, naming things,
and off-by-one errors.

34. There are only 2 hard
things in software
development:
cache invalidation, naming things,
and off-by-one errors.
AND finding the right animated gif!
3

35. Process modules
• app
• ipc
• dialog
• menu, menu-item
• power-monitor
• tray

36. Render modules
• ipc
• remote
• web-frame

37. Modules available to both
• clipboard
• crash-reporter
• native-image
• screen
• shell

38. Tools
• electron-debug
• electron-connect
• electron-packager
• electron-builder
• electron-updater
• electron-mocha

39. Boilerplate Projects
• electron-boilerplate
• electron-react-boilerplate

40. photonkit.com

41. MOAR Resources
https://github.com/sindresorhus/awesome-electron

42. Tips
• Use CSS default cursor
• -webkit-user-drag:none
• -webkit-user-drag:text
• Keep windows open
• Native modules (electron-rebuild)
• IconFly

44. Thank you!
David Neal
@ReverentGeek
david@reverentgeek.com
reverentgeek.com