Oracle Code One 2019 - Cross-Platform Desktop Apps with Electron

3ab1249be442027903e1180025340b3f?s=47 David Neal
September 17, 2019

Oracle Code One 2019 - Cross-Platform Desktop Apps with Electron

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 apps 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 17, 2019
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. Up Ahead • What is Electron? • Why desktop? •

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

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

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

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

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

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

  37. Slack

  38. Visual Studio Code

  39. Postman

  40. GitHub Desktop

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

  48. ( main.js )

  49. ( main.js ) ( index.html )

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

    settings.html )
  51. main.js

  52. main.js

  53. main.js

  54. main.js

  55. main.js

  56. main.js

  57. index.html

  58. index.html > electron main.js

  59. index.html

  60. index.html

  61. index.html

  62. 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. index.html

  72. None
  73. main.js

  74. main.js

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

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

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

    • screen • shell
  86. Deploying Electron

  87. Deploying Electron

  88. Deploying Electron

  89. Deploying Electron

  90. Deploying Electron

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

  92. Devtron

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

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

    Sass/SCSS, Stylus • Jade • Vue components
  96. Tips • Use CSS default cursor • Keep windows open

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

    fs-extra • nedb • pouchdb
  98. Relational DB Storage • seriate (SQL Server) • pg /

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

    http://atom-slack.herokuapp.com/
  100. None
  101. None