Introductory session on creating desktop applications with Electron and HTML5

1. Creating
Desktop Applications
with HTML5
Felicia O’Garro | Software Engineer | June 26, 2019

2. • Applications that are installed and run locally on your
Desktop or Laptop computer
• Unlike web applications you do not need the internet
• Can access your hard drive and lower level features on
your computer
What are Desktop Applications?
Creating Desktop Applications with HTML5

3. • Created by Github
• Originally created for the Atom Text
Editor
• Open source
• Compatible with Mac, Windows and
Linux
• Built with Chromium (tool used to
build Chrome) and Node.js
• Can be integrated with libraries and
tools normally used for web
applications
Electron
Creating Desktop Applications with HTML5

4. Applications built on Electron
Creating Desktop Applications with HTML5

5. Applications built with Electron
Creating Desktop Applications with HTML5

6. • Install Node.js
• Setup a new project with NPM or Yarn
• Install Electron
• Launch using "electron .”
Installation
Creating Desktop Applications with HTML5

7. App
Creating Desktop Applications with HTML5

8. • ready - emitted when electron has finished initializing
• window-all-closed - emitted when the last window is
closed
• hide - hides all app windows without minimizing them
• show - show windows after they are hidden
• open-url - emitted when user wants to open a url
App
Creating Desktop Applications with HTML5

9. Browser Window
Creating Desktop Applications with HTML5

10. Menu - Default
Creating Desktop Applications with HTML5

11. Menu - Custom
Creating Desktop Applications with HTML5

12. Hotkeys - Accelerators
Creating Desktop Applications with HTML5

13. Notifications
Creating Desktop Applications with HTML5

14. Child Windows
Creating Desktop Applications with HTML5

15. Interprocess Communication - IPC
Creating Desktop Applications with HTML5

16. • Stay up to date with the latest version of Electron
• Evaluate Dependencies
• Adopt secure coding practices
• Do not change the security settings for web
preferences
Security
Creating Desktop Applications with HTML5

17. • Executables for each platform
• Package applications with Electron Packager
• Set up a script and add icons for each platform
Deployment
Creating Desktop Applications with HTML5

18. Code Demos
Header/Footer
Creating Desktop Applications with HTML5

19. Resources
Creating Desktop Applications with HTML5
• Electron
• Electron Quickstart
• Electron Packager
• Openfin
• Electron React Boilerplate
• Angular Electron
• Electron Packager Tutorial

20. Creating Desktop Applications with HTML5
THANK YOU!