O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Cross-Platform Desktop Apps with Electron (Condensed Version)

664 visualizações

Publicada em

Slides from the 30-minute condensed version of this talk given at Nodevember 2015.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Cross-Platform Desktop Apps with Electron (Condensed Version)

  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. main.js
  25. 25. There are only 2 hard things in software development: cache invalidation, naming things, and off-by-one errors.
  26. 26. 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
  27. 27. Process modules • app • ipc • dialog • menu, menu-item • power-monitor • tray
  28. 28. Render modules • ipc • remote • web-frame
  29. 29. Modules available to both • clipboard • crash-reporter • native-image • screen • shell
  30. 30. Tools • electron-debug • electron-connect • electron-packager • electron-builder • electron-updater • electron-mocha
  31. 31. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate
  32. 32. photonkit.com
  33. 33. MOAR Resources https://github.com/sindresorhus/awesome-electron
  34. 34. Tips • Use CSS default cursor • -webkit-user-drag:none • -webkit-user-drag:text • Keep windows open • Native modules (electron-rebuild) • IconFly
  35. 35. Thank you! David Neal @ReverentGeek david@reverentgeek.com reverentgeek.com

×