Cross-Platform Desktop Apps with Electron - NDC Sydney 2018

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

25. Up Ahead • What is Electron? • Why desktop? • Crash course • Tips
26. .NET + Mono + Xamarin Pros: • Shared .NET code base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI is hard • Deployment • Licensing
28. Electron Pros: • HTML + CSS + JavaScript • Node.js + Chromium • No deployment dependencies
31. Electron Cons: • HTML + CSS + JavaScript
32. History • Created by GitHub for Atom • Formerly Atom Shell • Active since January 2013 • 1.0 release May 2016 • Current: 3.0 Sept 18th
33. Electron Features • Rapid development • Deployment + “silent” updates • Native UX • Shared code/UI • Themes
35. 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”
36. 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
37. Atom
38. Slack
39. Visual Studio Code
40. Postman
41. GitHub Desktop
48. ( main.js )
49. ( main.js )
50. ( main.js ) ( index.html )
51. ( main.js ) ( home.html ) ( editor.html ) ( settings.html )
53. main.js
54. main.js
55. main.js
56. main.js
57. main.js
58. main.js
59. main.js
60. main.js
61. index.html
62. index.html > npx electron main.js
63. index.html
64. index.html
65. index.html
66. index.html
67. index.html
68. index.html
69. index.html
70. index.html
72. main.js
73. main.js
82. Process modules • app • ipc • dialog • menu, menu-item • power-monitor • tray
83. Render modules • ipc • remote • web-frame
84. Modules available to both • clipboard • crash-reporter • native-image • screen • shell
85. Deploying Electron
86. Deploying Electron
87. Deploying Electron
88. Deploying Electron
89. Deploying Electron
90. Recommended Tools • electron-debug • electron-reload • electron-mocha
91. Devtron
93. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate • angular-electron • electron-vue
94. electron-prebuilt-compile • ES7 (Babel), TypeScript, GraphQL • React.js • LESS, Sass/SCSS, Stylus • Jade • Vue components
96. photonkit.com
98. Tips • Use CSS default cursor • Keep windows open • Offload work to main over ipc
99. Local Storage • Read/write .json files – Pro tip: use fs-jetpack • nedb • pouchdb
100. Relational DB Storage • seriate (SQL Server) • pg • mysql • oracledb
101. From here… https://github.com/sindresorhus/awesome-electron Pluralsight: “Electron Fundamentals” by Jake Trent http://electron.atom.io http://atom-slack.herokuapp.com/