Cross-Platform Desktop Apps with Electron (Condensed Version)
•
2 likes•755 views
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, macOS, and Linux. Electron provides features like rapid development, cross-platform deployment, native UI integration, and offline capabilities. Some example Electron apps include Atom, Slack, and Visual Studio Code. The document provides an overview of Electron and tips for developing desktop apps with its framework.
![Cross-Platform Desktop
Apps with Electron
David Neal | reverentgeek.com | @reverentgeek
var trustMe = {
has: ["Beard", "Motorcycle"],
consumes: ["Bacon", "Caffeine"],
sometimesCanComputer: true
};](https://image.slidesharecdn.com/cross-platformdesktopappswithelectronnodevember-151208202850-lva1-app6892/85/Cross-Platform-Desktop-Apps-with-Electron-Condensed-Version-1-320.jpg)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Cross-Platform Desktop Apps with Electron (Condensed Version)
Similar to Cross-Platform Desktop Apps with Electron (Condensed Version) (20)
Recently uploaded
Recently uploaded (20)
Cross-Platform Desktop Apps with Electron (Condensed Version)
- 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. main.js
- 33. There are only 2 hard things in software development: cache invalidation, naming things, and off-by-one errors.
- 34. 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
- 35. Process modules • app • ipc • dialog • menu, menu-item • power-monitor • tray
- 36. Render modules • ipc • remote • web-frame
- 37. Modules available to both • clipboard • crash-reporter • native-image • screen • shell
- 38. Tools • electron-debug • electron-connect • electron-packager • electron-builder • electron-updater • electron-mocha
- 39. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate
- 40. photonkit.com
- 42. Tips • Use CSS default cursor • -webkit-user-drag:none • -webkit-user-drag:text • Keep windows open • Native modules (electron-rebuild) • IconFly