Download as PDF, PPTX
Uploaded byFelicia O'Garro
Intro to Electron - Creating Desktop Applications with HTML5
Electron is an open-source framework that allows developers to create desktop applications using JavaScript, HTML, and CSS. It allows building cross-platform desktop apps that can be installed and run locally on a computer like regular native apps. Apps built with Electron can access low-level system features and integrate normal web app technologies and libraries. To create an Electron app, developers install Node.js, set up a new project using NPM or Yarn, install Electron, and launch the app using "electron ." in the command line. Electron apps emit events like "ready" and "window-all-closed" and allow creating browser windows, menus, notifications, and using IPC for interprocess communication.
Intro to Electron - Creating Desktop Applications with HTML5
- 1. Creating Desktop Applications with HTML5 FeliciaO’Garro | Software Engineer | June 26, 2019
- 2. • Applications thatare 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 byGithub • 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 onElectron Creating Desktop Applications with HTML5
- 5. Applications built withElectron 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 Applicationswith 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 DesktopApplications with HTML5
- 10. Menu - Default CreatingDesktop Applications with HTML5
- 11. Menu - Custom CreatingDesktop Applications with HTML5
- 12. Hotkeys - Accelerators CreatingDesktop Applications with HTML5
- 13.
- 14. Child Windows Creating DesktopApplications with HTML5
- 15. Interprocess Communication -IPC Creating Desktop Applications with HTML5
- 16. • Stay upto 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 foreach 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 DesktopApplications with HTML5
- 19. Resources Creating Desktop Applicationswith HTML5 • Electron • Electron Quickstart • Electron Packager • Openfin • Electron React Boilerplate • Angular Electron • Electron Packager Tutorial
- 20. Creating Desktop Applicationswith HTML5 THANK YOU!