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

Cross-Platform Desktop Apps with Electron (Music City Code 2016)

Cross-Platform Desktop Apps with Electron (Music City Code 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

August 20, 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. None
  8. Electron Cons: • HTML + CSS + JavaScript

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

    Shell • Active since January 2013 • 1.0 release May 2016 • 1.2.6 release July 6th
  10. Electron Features • Rapid development • Themes • Shared code/UI

    • Deployment + “silent” updates • Native UX
  11. 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”
  12. 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
  13. Atom

  14. Slack

  15. Visual Studio Code

  16. Wagon

  17. Postman

  18. Nylas N1

  19. Jibo

  20. None
  21. > npm install electron > touch main.js > touch index.html

  22. ( main.js )

  23. ( main.js )

  24. ( main.js ) ( index.html )

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

    settings.html )
  26. main.js

  27. main.js

  28. main.js

  29. main.js

  30. main.js

  31. main.js

  32. main.js

  33. main.js

  34. index.html

  35. index.html > electron main.js

  36. index.html

  37. index.html

  38. index.html

  39. index.html

  40. index.html

  41. index.html

  42. index.html

  43. index.html

  44. None
  45. main.js

  46. main.js

  47. main.js

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

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

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

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

    • electron-updater • electron-mocha
  59. Devtron

  60. Test your app

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

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

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

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

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

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

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

    • Keep windows open • Offload work to main over ipc
  70. Local Storage • Read/write .json files – Pro tip: use

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

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

    http://atom-slack.herokuapp.com/
  73. None
  74. None