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. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 25.

    .NET + Mono + Xamarin Pros: • Shared .NET code

    base Cons: • Xamarin Mac !== Xamarin iOS/Android • Native UI is hard • Deployment • Licensing
  25. 26.
  26. 27.

    Electron Pros: • HTML + CSS + JavaScript • Node.js

    + Chromium • No deployment dependencies
  27. 28.
  28. 29.
  29. 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
  30. 33.
  31. 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”
  32. 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
  33. 36.
  34. 37.
  35. 39.
  36. 41.
  37. 42.
  38. 43.
  39. 44.
  40. 45.
  41. 46.
  42. 51.
  43. 52.
  44. 53.
  45. 54.
  46. 55.
  47. 56.
  48. 62.
  49. 72.
  50. 73.
  51. 74.
  52. 75.
  53. 76.
  54. 77.
  55. 78.
  56. 79.
  57. 80.
  58. 81.
  59. 82.
  60. 83.

    Process modules • app • ipc • dialog • menu,

    menu-item • power-monitor • tray
  61. 92.
  62. 93.
  63. 96.

    Tips • Use CSS default cursor • Keep windows open

    • Offload work to main over ipc
  64. 98.
  65. 100.
  66. 101.