Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cross-Platform Desktop
Apps with Electron
David Neal | reverentgeek.com | @reverentgeek
var trustMe = {
has: ["Beard", "Mo...
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
• ...
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
• A...
Desktop App Ideas
• Disconnected data entry
• Editor
• Time management
• Media player
• Email client
• Messaging, collabor...
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
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 findin...
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
Building for Windows
• Windows 7/Server 2008 R2 minimum
(https://dev.modern.ie)
• Visual Studio 2013
• Python 2.7
• Node.j...
Building for Mac
• OS X 10.8+
• Xcode 5.1+
• Node.js
• pyobjc (Homebrew)
Building for Linux
• Python 2.7
• Node.js
• Clang 3.4+
• GTK+ & libnotify dev headers
Tips
• Use CSS default cursor
• -webkit-user-drag:none
• -webkit-user-drag:text
• Keep windows open
• Native modules (elec...
Roadmap
• Streamline getting started
• Improve platform integrations
• 1.0 early 2016
MOAR Resources
https://github.com/sindresorhus/awesome-electron
Thank you!
David Neal
@ReverentGeek
david@reverentgeek.com
reverentgeek.com
http://bit.ly/codemash2016
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Cross-Platform Desktop Apps with Electron
Upcoming SlideShare
Loading in …5
×

Cross-Platform Desktop Apps with Electron

6,268 views

Published on

An introduction to Electron.js for building cross-platform desktop applications using HTML, CSS, and JavaScript

Published in: Technology

Cross-Platform Desktop Apps with Electron

  1. 1. Cross-Platform Desktop Apps with Electron David Neal | reverentgeek.com | @reverentgeek var trustMe = { has: ["Beard", "Motorcycle"], consumes: ["Bacon", "Caffeine"], sometimesCanComputer: true };
  2. 2. Up Ahead • What is Electron? • Why desktop? • Crash course • Tips
  3. 3. .NET + Mono + Xamarin Pros: • Shared .NET code base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI is hard, yo • Deployment • Licensing
  4. 4. Electron Pros: • HTML + CSS + JavaScript • Node.js + Chrome • No deployment dependencies
  5. 5. Electron Cons: • HTML + CSS + JavaScript • Seriously, JavaScript • Native modules in C/C++
  6. 6. History • Created by GitHub for Atom • Formerly Atom Shell • Active since January 2013
  7. 7. Electron Features • Rapid development • Themes • Shared code/UI • Deployment + “silent” updates • Native UX
  8. 8. 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”
  9. 9. 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
  10. 10. Atom
  11. 11. Nylas N1
  12. 12. > npm install electron-prebuilt > touch main.js > touch index.html
  13. 13. main.js
  14. 14. main.js
  15. 15. main.js
  16. 16. main.js
  17. 17. main.js
  18. 18. main.js
  19. 19. main.js
  20. 20. index.html
  21. 21. index.html
  22. 22. index.html
  23. 23. main.js
  24. 24. There are only 2 hard things in software development: cache invalidation, naming things, and off-by-one errors.
  25. 25. 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
  26. 26. Process modules • app • ipc • dialog • menu, menu-item • power-monitor • tray
  27. 27. Render modules • ipc • remote • web-frame
  28. 28. Modules available to both • clipboard • crash-reporter • native-image • screen • shell
  29. 29. Tools • electron-debug • electron-connect • electron-packager • electron-builder • electron-updater • electron-mocha
  30. 30. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate
  31. 31. photonkit.com
  32. 32. Building for Windows • Windows 7/Server 2008 R2 minimum (https://dev.modern.ie) • Visual Studio 2013 • Python 2.7 • Node.js • Git
  33. 33. Building for Mac • OS X 10.8+ • Xcode 5.1+ • Node.js • pyobjc (Homebrew)
  34. 34. Building for Linux • Python 2.7 • Node.js • Clang 3.4+ • GTK+ & libnotify dev headers
  35. 35. Tips • Use CSS default cursor • -webkit-user-drag:none • -webkit-user-drag:text • Keep windows open • Native modules (electron-rebuild) • IconFly
  36. 36. Roadmap • Streamline getting started • Improve platform integrations • 1.0 early 2016
  37. 37. MOAR Resources https://github.com/sindresorhus/awesome-electron
  38. 38. Thank you! David Neal @ReverentGeek david@reverentgeek.com reverentgeek.com http://bit.ly/codemash2016

×