cross-platform desktop apps with electron (condensed version)
TRANSCRIPT
Cross-Platform Desktop Apps with Electron
David Neal | reverentgeek.com | @reverentgeek
var trustMe = {has: ["Beard", "Motorcycle"],consumes: ["Bacon", "Caffeine"],sometimesCanComputer: true
};
Up Ahead
• What is Electron?
• Why desktop?
• Crash course
• Tips
.NET + Mono + Xamarin
Pros:• Shared .NET code base
Cons:• Xamarin Mac !== Xamarin iOS/Android
• Native UI is hard, yo• Deployment• Licensing
Electron
Pros:
• HTML + CSS + JavaScript
• Node.js + Chrome
• No deployment dependencies
Electron
Cons:
• HTML + CSS + JavaScript
• Seriously, JavaScript
• Native modules in C/C++
History
• Created by GitHub for Atom
• Formerly Atom Shell
• Active since January 2013
Electron Features
• Rapid development
• Themes
• Shared code/UI
• Deployment + “silent” updates
• Native UX
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”
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
Atom
Nylas N1
> npm install electron-prebuilt> touch main.js> touch index.html
main.js
main.js
main.js
main.js
main.js
main.js
main.js
index.html
index.html
index.html
main.js
main.js
There are only 2 hard things in software
development:
cache invalidation, naming things, and off-by-one errors.
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
Process modules
• app• ipc• dialog• menu, menu-item• power-monitor• tray
Render modules
• ipc• remote• web-frame
Modules available to both
• clipboard• crash-reporter• native-image• screen• shell
Tools
• electron-debug• electron-connect• electron-packager• electron-builder• electron-updater• electron-mocha
Boilerplate Projects
• electron-boilerplate
• electron-react-boilerplate
photonkit.com
MOAR Resources
https://github.com/sindresorhus/awesome-electron
Tips
• Use CSS default cursor• -webkit-user-drag:none• -webkit-user-drag:text• Keep windows open• Native modules (electron-rebuild)• IconFly
