Cross-Platform Desktop Apps with Electron (CodeStock 2016)

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.

Transcript

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