Would you like to leverage your HTML, CSS, and JavaScript skills to build cross-platform desktop applications? Electron is an open source application shell created by GitHub, designed to make building great desktop applications easy. You may have already experienced Electron using applications such as Atom, Slack, or Visual Studio Code. In this talk, you will learn its features, how to quickly get started, and tips from my experience building Electron applications.

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
• Deployment
• Licensing

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

7. Electron
Cons:
• HTML + CSS + JavaScript

8. History
• Created by GitHub for Atom
• Formerly Atom Shell
• Active since January 2013
• 1.0 release May 2016
• 1.2.6 release July 6th

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 )
( index.html )

24. ( main.js )
( home.html )
( editor.html )
( settings.html )

25. main.js

26. main.js

27. main.js

28. main.js

29. main.js

30. main.js

31. main.js

32. main.js

33. index.html

34. index.html
> electron main.js

35. index.html

36. index.html

37. index.html

38. index.html

39. index.html

40. index.html

41. index.html

42. index.html

44. main.js

45. main.js

46. main.js

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

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

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

57. Recommended Tools
• electron-debug
• electron-reload
• electron-packager
• electron-builder
• electron-updater
• electron-mocha

58. Devtron

59. Test your app

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

61. electron-prebuilt-compile
• ES6/ES7 (Babel), TypeScript,
CoffeeScript
• React.js
• LESS
• Jade
• CSON

63. photonkit.com

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

66. Building for Mac
• OS X 10.8+
• Xcode 5.1+
• Node.js
• pyobjc (only if using Python installed
with Homebrew)

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

68. Tips
• Use CSS default cursor
• -webkit-user-drag:none
• -webkit-user-drag:text
• Keep windows open

69. Local Storage
• Read/write .json files
– Pro tip: use fs-jetpack
• nedb
• pouchdb

70. Relational DB Storage
• seriate
• pg
• mysql
• oracledb

71. From here…
https://github.com/sindresorhus/awesome-electron
Pluralsight Course: Rob Conery’s “Electron Playbook”
http://electron.atom.io

73. 12:55 PM
Room 200-C