Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-Platform Desktop Apps with Electron (CodeStock 2016)

Cross-Platform Desktop Apps with Electron (CodeStock 2016)

Would you like to leverage your HTML, CSS, and JavaScript skills to build cross-platform desktop applications? Electron is an open source application shell created by GitHub, designed to make building great desktop applications easy. You may have already experienced Electron using applications such as Atom, Slack, or Visual Studio Code. In this talk, you will learn its features, how to quickly get started, and tips from my experience building Electron applications.

3ab1249be442027903e1180025340b3f?s=128

David Neal

July 16, 2016
Tweet

Transcript

  1. None
  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 • Deployment • Licensing
  4. None
  5. Electron Pros: • HTML + CSS + JavaScript • Node.js

    + Chrome • No deployment dependencies
  6. None
  7. Electron Cons: • HTML + CSS + JavaScript

  8. History • Created by GitHub for Atom • Formerly Atom

    Shell • Active since January 2013 • 1.0 release May 2016 • 1.2.6 release July 6th
  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

  13. None
  14. None
  15. None
  16. Nylas N1

  17. None
  18. None
  19. None
  20. > npm install electron-prebuilt > touch main.js > touch index.html

  21. ( main.js )

  22. ( main.js )

  23. ( main.js ) ( index.html )

  24. ( main.js ) ( home.html ) ( editor.html ) (

    settings.html )
  25. main.js

  26. main.js

  27. main.js

  28. main.js

  29. main.js

  30. main.js

  31. main.js

  32. main.js

  33. index.html

  34. index.html > electron main.js

  35. index.html

  36. index.html

  37. index.html

  38. index.html

  39. index.html

  40. index.html

  41. index.html

  42. index.html

  43. None
  44. main.js

  45. main.js

  46. main.js

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. Process modules • app • ipc • dialog • menu,

    menu-item • power-monitor • tray
  55. Render modules • ipc • remote • web-frame

  56. Modules available to both • clipboard • crash-reporter • native-image

    • screen • shell
  57. Recommended Tools • electron-debug • electron-reload • electron-packager • electron-builder

    • electron-updater • electron-mocha
  58. Devtron

  59. Test your app

  60. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate

  61. electron-prebuilt-compile • ES6/ES7 (Babel), TypeScript, CoffeeScript • React.js • LESS

    • Jade • CSON
  62. None
  63. photonkit.com

  64. None
  65. Building for Windows • Windows 7/Server 2008 R2 minimum (https://dev.modern.ie)

    • Visual Studio 2015 Community • Python 2.7 • Node.js • Git
  66. Building for Mac • OS X 10.8+ • Xcode 5.1+

    • Node.js • pyobjc (only if using Python installed with Homebrew)
  67. Building for Linux • Python 2.7 • Node.js • Clang

    3.4+ • GTK+ & libnotify dev headers
  68. Tips • Use CSS default cursor • -webkit-user-drag:none • -webkit-user-drag:text

    • Keep windows open
  69. Local Storage • Read/write .json files – Pro tip: use

    fs-jetpack • nedb • pouchdb
  70. Relational DB Storage • seriate • pg • mysql •

    oracledb
  71. From here… https://github.com/sindresorhus/awesome-electron Pluralsight Course: Rob Conery’s “Electron Playbook” http://electron.atom.io

  72. None
  73. 12:55 PM Room 200-C

  74. None