Cross-Platform Desktop Apps with Electron - JazzCon 2018

Would you like to leverage your web skills to build cross-platform desktop applications? Electron is an open-source solution designed to make building great desktop applications easy. In this talk, you will learn its features, how to quickly get started, and tips from my experience!

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 + Chromium • No deployment dependencies
8. Electron Cons: • HTML + CSS + JavaScript
9. History • Created by GitHub for Atom • Formerly Atom Shell • Active since January 2013 • 1.0 release May 2016 • Current: 1.8.4 March 16th • 2.0 Beta
10. Electron Features • Rapid development • Themes • Shared code/UI • Deployment + “silent” updates • Native UX
11. 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”
12. 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
13. Atom
14. Slack
15. Visual Studio Code
16. Postman
17. GitHub Desktop
18. Jibo
20. > npm install electron > 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
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. Deploying Electron • Phase 1: Copy Files • Phase 2: Compile to App • Phase 3: Build Installer • Phase 4: Automatic Updates
58. Recommended Tools • electron-debug • electron-reload • electron-packager • electron-builder • electron-updater • electron-mocha
59. Devtron
61. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate
62. electron-prebuilt-compile • ES7 (Babel), TypeScript, GraphQL • React.js • LESS, Sass/SCSS, Stylus • Jade • Vue components
64. photonkit.com
66. Tips • Use CSS default cursor • Keep windows open • Offload work to main over ipc
67. Local Storage • Read/write .json files – Pro tip: use fs-jetpack • nedb • pouchdb
68. Relational DB Storage • seriate (SQL Server) • pg • mysql • oracledb
69. From here… https://github.com/sindresorhus/awesome-electron Pluralsight: “Electron Fundamentals” by Jake Trent http://electron.atom.io http://atom-slack.herokuapp.com/