Cross-Platform Desktop Apps with Electron - NDC Sydney 2018

3ab1249be442027903e1180025340b3f?s=47 David Neal
September 20, 2018

Cross-Platform Desktop Apps with Electron - NDC Sydney 2018

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

September 20, 2018
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. Up Ahead • What is Electron? • Why desktop? •

    Crash course • Tips
  26. .NET + Mono + Xamarin Pros: • Shared .NET code

    base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI is hard • Deployment • Licensing
  27. None
  28. Electron Pros: • HTML + CSS + JavaScript • Node.js

    + Chromium • No deployment dependencies
  29. None
  30. None
  31. Electron Cons: • HTML + CSS + JavaScript

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

    Shell • Active since January 2013 • 1.0 release May 2016 • Current: 3.0 Sept 18th
  33. Electron Features • Rapid development • Deployment + “silent” updates

    • Native UX • Shared code/UI • Themes
  34. None
  35. 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”
  36. 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
  37. Atom

  38. Slack

  39. Visual Studio Code

  40. Postman

  41. GitHub Desktop

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. ( main.js )

  49. ( main.js )

  50. ( main.js ) ( index.html )

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

    settings.html )
  52. None
  53. main.js

  54. main.js

  55. main.js

  56. main.js

  57. main.js

  58. main.js

  59. main.js

  60. main.js

  61. index.html

  62. index.html > npx electron main.js

  63. index.html

  64. index.html

  65. index.html

  66. index.html

  67. index.html

  68. index.html

  69. index.html

  70. index.html

  71. None
  72. main.js

  73. main.js

  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. Process modules • app • ipc • dialog • menu,

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

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

    • screen • shell
  85. Deploying Electron

  86. Deploying Electron

  87. Deploying Electron

  88. Deploying Electron

  89. Deploying Electron

  90. Recommended Tools • electron-debug • electron-reload • electron-mocha

  91. Devtron

  92. None
  93. Boilerplate Projects • electron-boilerplate • electron-react-boilerplate • angular-electron • electron-vue

  94. electron-prebuilt-compile • ES7 (Babel), TypeScript, GraphQL • React.js • LESS,

    Sass/SCSS, Stylus • Jade • Vue components
  95. None
  96. photonkit.com

  97. None
  98. Tips • Use CSS default cursor • Keep windows open

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

    fs-jetpack • nedb • pouchdb
  100. Relational DB Storage • seriate (SQL Server) • pg •

    mysql • oracledb
  101. From here… https://github.com/sindresorhus/awesome-electron Pluralsight: “Electron Fundamentals” by Jake Trent http://electron.atom.io

    http://atom-slack.herokuapp.com/
  102. None
  103. None
  104. None