Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cross-Platform Desktop Apps with Electron

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 50 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Cross-Platform Desktop Apps with Electron (20)

Advertisement

Recently uploaded (20)

Advertisement

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

Editor's Notes

  • Native UX: extensions like native file open/save and tray notifications
  • I had a problem, so I used Java. Now I have a problemFactory to tell me how many problems I have.
  • Now I’d like to show you just how easy it is to get started with Electron…
  • App: application lifecycle events, command-line arguments, system/user paths, launch browser windows (renderers)
    Dialog: File Open/Save, Info and Error
    Menu: Native app and context menus
    Power monitor: monitor power state changes
  • Screen: enumerate displays, cursor location, display events
    Shell: open item with default app, move files to trash, beep()
  • Electron-updater: publish apps/packages through NPM or your own NPM server.
  • Run some experiments
    Do like PayPay and give it a trial

×