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, Mac, and Linux. Some key benefits of Electron include rapid development, shared code/UI across platforms, offline capabilities, and access to native device functionality and APIs. Popular apps built with Electron include Atom, Slack, and Visual Studio Code. The document provides an overview of Electron and tips for developing desktop apps with its tools and frameworks.

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. There are only 2 hard
things in software
development:
cache invalidation, naming things,
and off-by-one errors.

33. 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

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

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

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

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

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

42. photonkit.com

43. Building for Windows
• Windows 7/Server 2008 R2 minimum
(https://dev.modern.ie)
• Visual Studio 2013
• Python 2.7
• Node.js
• Git

44. Building for Mac
• OS X 10.8+
• Xcode 5.1+
• Node.js
• pyobjc (Homebrew)

45. Building for Linux
• Python 2.7
• Node.js
• Clang 3.4+
• GTK+ & libnotify dev headers

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

47. Roadmap
• Streamline getting started
• Improve platform integrations
• 1.0 early 2016

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

50. Thank you!
David Neal
@ReverentGeek
david@reverentgeek.com
reverentgeek.com
http://bit.ly/codemash2016