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

Cross-Platform Desktop Apps with Electron (Code on the Beach 2016)

Cross-Platform Desktop Apps with Electron (Code on the Beach 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 13, 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. Speak

  20. Jibo

  21. None
  22. > npm install electron-prebuilt > touch main.js > touch index.html

  23. ( main.js )

  24. ( main.js )

  25. ( main.js ) ( index.html )

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

    settings.html )
  27. main.js

  28. main.js

  29. main.js

  30. main.js

  31. main.js

  32. main.js

  33. main.js

  34. main.js

  35. index.html

  36. index.html > electron main.js

  37. index.html

  38. index.html

  39. index.html

  40. index.html

  41. index.html

  42. index.html

  43. index.html

  44. index.html

  45. None
  46. main.js

  47. main.js

  48. main.js

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

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

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

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

    • electron-updater • electron-mocha
  60. Devtron

  61. Test your app

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

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

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

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

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

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

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

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

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

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

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